Я пытаюсь использовать разные модули AngularJS на разных HTML-страницах, но загружается только одна (откровенно говоря, я думаю, что загружен только один, но проблема может быть в чем-то еще). Чтобы привести логику примера в двух словах: index.html - главная страница с 2 панелями: меню боковой панели левой руки и основная панель, содержащая соответствующую информацию. Нажмите меню, чтобы сделать запрос на сервер, и перенаправляет данные на соответствующий HTML-код, который находится на главной панели.Модуль AngularJS не загружен
Вы можете найти код ниже:
index.html (страница, которая содержит все точки зрения)
<!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 (страница, на которой должен отображаться JSON, полученный с сервера)
<!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 (модуль, который должен быть обработан модель для 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;
}
}
});
я пытался отлаживать JS стороне - в результате JSON извлекается из сервер и хранится в sharedMainPageData (index_page_module.js). Этот sharedMainPageData должен быть доступен в limitsListController of limitsListModule, но это не так. Более того, он не отлажен. Даже если я попытаюсь поместить неправильное имя контроллера в директиву ng-controller на limit_list.html, тогда ничего не произойдет (но нужно исключить исключение). Поэтому я думаю, что проблема заключается в бутстрапинге модуля. То, что я пытался решить эту проблему:
- Я пытался загрузить модуль явно через angular.bootstrap()
- Я попытался определить модуль в limit_list.html вместо разделенных .js-файл
- Я попытался сыграть с вызовом сервера, используя различные апробации: callbacks и object-object
Поиск в Интернете не помог. Я действительно новичок в AngularJS и думаю, что проблема тривиальна, но из-за отсутствия опыта я не могу ее решить. Если у вас есть идеи, что не так с моим кодом, пожалуйста, дайте мне знать. Благодарю.
вы включая limits_list_module.js в HTML? – Michael