I am using angular js in my project. I have some views and an index.html file. I am using $routeProvider for navigating between different views. Currently I have two views, projects.html and floor-mapping.html. I want the golden layout on my floorMap.html page. The default view is projects.html
I have created two modules. The first module "myModule" takes care of routing. And second is for golden layout "goldenModule". I am defining my modules something like this
'use strict';
var app = angular.module('myModule', []);
app.config(['$routeProvider',function ($routeProvider) {
// Route Provider
$routeProvider.when('/', {
templateUrl: '/views/projects.html',
controller: 'projectCtrl'
}).when('/floorplan/:id', {
templateUrl: '/views/floor-mapping.html',
controller: 'kineticCtrl'
}).otherwise({
redirectTo: '/'
});
}
]);
For goldenModule I am injecting myModule cause goldenModule has some dependencies on it and doing following:
var goldenModule = angular.module('goldenModule', ['myModule']);
My controllers for the panes of golden layout are
goldenModule.controller('BrokenLegController', function ($scope) {
$scope.brokenLeg = 'This is broken leg.';
$scope.jakob = {};
$scope.jakob.firstName = "Jakob";
$scope.jakob.lastName = "Jenkov";
});
goldenModule.controller('BalloonController', function ($scope) {
$scope.balloon = 'This is balloon.';
$scope.john = {};
$scope.john.firstName = "John";
$scope.john.lastName = "Doe";
});
Directive for the goldenModule:
goldenModule.directive('userinfo', function() {
var directive = {};
directive.restrict = 'E';
directive.template = "<p style='color:#fff;'>User : {{user.firstName}} {{user.lastName}}</p>";
directive.scope = {
user : "=user"
};
return directive;
});
My main.html something looks like this.
<body ng-app="myModule">
<div class="col-md-9">
<div ng-view></div>
</div>
</body>
My floor-mapping.html is:
<div id="goldenLayoutContainer" style="width:800px; height:500px;">
<template type="text/html" id="brokenLeg">
<div ng-controller="BrokenLegController">
<p style="color:#fff;">{{brokenLeg}}</p>
<userinfo user="jakob"></userinfo>
<img style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px;" border="0" src="http://www.menucool.com/slider/prod/image-slider-3.jpg">
</div>
</template>
<template type="text/html" id="balloon">
<div ng-controller="BalloonController">
<p style="color:#fff;">{{balloon}}</p>
<userinfo user="john"></userinfo>
<img style="background-image: none; padding-top: 0px; padding-left: 0px; padding-right: 0px; border-width: 0px; height:174px;" border="0" src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg">
</div>
</template>
</div>
The controller in which I am initialising golden layout and bootstrapping the goldenModule is kineticCtrl which is:
myModule.controller('kineticCtrl',function($scope){
var myLayout = new GoldenLayout({
settings: {
hasHeaders: false
},
content: [{
type: 'row',
content: [{
type: 'component',
componentName: 'myPane',
componentState: {
templateId: 'brokenLeg',
color: '#1D84BD'
}
}, {
type: 'component',
componentName: 'myPane',
componentState: {
templateId: 'balloon',
color: '#F15C25'
}
}]
}]
}, angular.element('#goldenLayoutContainer')[0]);
var setComponent = function (container, state) {
var temp = angular.element('#' + state.templateId);
var templateHtml = temp.html();
container.getElement().html(templateHtml);
};
myLayout.registerComponent('myPane', function (container, state) {
setComponent(container, state);
});
myLayout.on('initialised', function () {
//this throws already boostrapped error.
angular.bootstrap(angular.element('#goldenLayoutContainer')[0], ['goldenModule']);
});
myLayout.init();
});
Statement
angular.bootstrap(angular.element('#goldenLayoutContainer')[0], ['goldenModule']);
throws already bootstrapped error. If I comment it. No module is bootstrapped and all the controller and directive don't work. Please help me. I don't know why it is coming. Pardon me for my english. Thanks in advance.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent