CODEWITHSUNDEEP
javascriptangularjsangularjs-routing
Boltosaurus
Boltosaurus

Reputation: 2216

AngularJs routing issue

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.

Upvotes: 0

Views: 1339

Answers (1)

dnc253
dnc253

Reputation: 40337

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-apps 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>

http://jsfiddle.net/SqK4d/

Upvotes: 1

Related Questions