AngularJs routing issue
Question
I have some problem with angularjs routing. My goal is to append different view depending on the path. I want to implement this using different ng-apps in one html document like this:
<body>
<div ng-app="header" id='header'>
<div ng-view></div>
</div>
<div ng-app="content" id='content'>
<div ng-view></div>
</div>
</body>
And the app.js:
angular.module('content', []).
config(['$routeProvider', function($routeProvider) {
debugger;
$routeProvider
.when('/101DEV/createProfile/', {templateUrl: '/101DEV/views/new-profile.html'})
.otherwise({templateUrl: '/101DEV/views/page-not-found.html'})
}]);
angular.module('header', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({templateUrl: '/101DEV/views/top-menu.html'})
}]);
angular.bootstrap(document.getElementById('header'), ['header']);
angular.bootstrap(document.getElementById('content'), ['content']);
The header part is appended fine but the content part is not appended even the path is the same as I expect to get.. Can't find where the problem is.
1 answers
solution1
1 ACCPTED 2013-09-27 22:21:09
You can only have one ng-app in the HTML (See http://docs.angularjs.org/api/ng.directive:ngApp ). Just get rid of the ng-app s in the HTML and do the manual bootstrapping you have at the bottom.
<body>
<div id='header'>
<div ng-view></div>
</div>
<div id='content'>
<div ng-view></div>
</div>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.