I'm trying to use different AngularJS modules in different HTML-pages but only one is loaded (frankly, I think that just only one is loaded but the problem may be in something else). To put the logic of the example in a nutshell: index.html - main page with 2 panels: left hand sidebar menu and main panel that contains relevant info. Click on menu makes request to the server and redirects data responded to relevant HTML that is in main panel.
Please find the code below:
index.html (page that contains all views)
<!DOCTYPE html>
<html ng-app="indexPageModule">
<head lang="en">
<meta charset="UTF-8">
<title>Navigation Panel</title>
<link href="/resources/css/bootstrap.css" rel="stylesheet"/>
<link href="/resources/css/bootstrap-theme.css" rel="stylesheet"/>
<link href="/resources/css/index-style.css" rel="stylesheet"/>
<script src="/resources/js/angular.js"></script>
<script src="/resources/js/angular-route.js"></script>
<script src="/resources/js/index_page_module.js"></script>
<base href="/">
</head>
<body ng-controller="indexPageRootController">
<div class="container-fluid">
<div id="static-header" class="row">
<nav role="navigation" class="navbar navbar-static-top custom-navbar row-bottom-margin">
</nav>
</div>
<div class="row">
<div id="navigation-panel" class="col-lg-2 sidebar">
<ul class="nav nav-list" ng-repeat="item in treeNavigationMenu">
<li><label class="tree-toggler nav-header">{{item.parent}}</label>
<ul class="nav nav-list tree" ng-repeat="child in item.children">
<li><a href="{{child.urlPattern}}" ng-click="requestMainPanelData(child.urlPattern)">{{child.childName}}</a></li>
</ul>
</li>
</ul>
</div>
<div id="main-panel" class="col-lg-10 main-panel" ng-view>
</div>
</div>
</body>
</html>
index_module.js
angular.module("indexPageModule", ['ngRoute'])
.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);
$routeProvider.when("/limits_list", {
templateUrl: "resources/static/limits_list.html"
}).when("/limits_upload", {
templateUrl: "resources/static/limits_upload.html"
}).when("/exposures_list", {
templateUrl: "resources/static/exposures_list.html"
}).when("/exposures_upload", {
templateUrl: "resources/static/exposures_upload.html"
}).when("/breaches_list", {
templateUrl: "resources/static/breaches_list.html"
}).otherwise({
templateUrl: "resources/static/default_main_page.html"
})
})
.provider("navigationPanelRequestService", function(){
return {
$get : function($http) {
return {
requestJson : function(pageUrl){
$http.get(pageUrl).success(function(response){
return response.data;
});
}
}
}
}
})
.service("sharedMainPageData", function(){
var sharedData;
return {
getMainPageData : function(){
return sharedData;
},
setMainPageData : function(mainPageJson){
sharedData = mainPageJson;
}
}
})
.controller("indexPageRootController", function($scope, $http, $document, navigationPanelRequestService, sharedMainPageData){
$scope.treeNavigationMenu = {};
$scope.requestMainPanelData = function(pageUrl){
var retrievedData = navigationPanelRequestService.requestJson(pageUrl);
sharedMainPageData.setMainPageData(retrievedData);
};
angular.element($document).ready(function(){
$http.get("/navigation_menu/navigation_tree.json")
.success(function(response){
$scope.treeNavigationMenu = response;
});
});
});
limits_list.html (the page that should display JSON retrieved from server)
<!DOCTYPE html>
<html ng-app="limitsListModule">
<head lang="en">
<meta charset="UTF-8">
<title>Limits List</title>
<link href="/resources/css/bootstrap.css" rel="stylesheet"/>
<link href="/resources/css/bootstrap-theme.css" rel="stylesheet"/>
<link href="/resources/css/index-style.css" rel="stylesheet"/>
<script src="/resources/js/angular.js"></script>
<script src="/resources/js/angular-route.js"></script>
</head>
<body ng-controller="limitsListController">
<div class="container">
<div class="row">{{limitsGridData.gridData}}</div>
</div>
</body>
</html>
limits_list_module.js (the module that is supposed to be processed model for limits_list.html)
angular.module("limitsListModule", ['indexPageModule'])
.controller("limitsListController", function($scope, sharedMainPageData){
$scope.limitsGridData = function(){
if (angular.isDefined(sharedMainPageData.getMainPageData())){
var jsonData = sharedMainPageData.getMainPageData();
console.log("Retrieved data is here - " + jsonData.gridData);
return jsonData;
}
}
});
I tried to debug JS-side - as a result JSON is retrieved from server and is stored in sharedMainPageData(index_page_module.js) service. This sharedMainPageData should be available in limitsListController of the limitsListModule but it doesn't. More over it is not debugged. Even if I try to put incorrect controller name in ng-controller directive on limit_list.html then nothing happens (but an exception should be thrown). So I think the problem is in module bootstraping. What I tried to solve the problem:
- I tried to load module explicitly through angular.bootstrap()
- I tried to define module in limit_list.html instead of separated .js-file
- I tried to play with server call by using different aproaches: callbacks and promise-object
Internet search didn't helped. I'm really new in AngularJS and think that problem is trivial but due to lack of experience I can't solve it. If you have any ideas what is wrong with my code please let me know. Thanks.
