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.

it is just a breakpoint I put to check that the path is okay. — Boltosaurus
– Boltosaurus, Commented Sep 27, 2013 at 22:01
i don't think that is the problem because otherwise is placed in module that works fine. it means that this view is always appended not depending on the path — Boltosaurus
– Boltosaurus, Commented Sep 27, 2013 at 22:06

dnc253 · Accepted Answer · 2013-09-27 22:21:09Z

1

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/

answered Sep 27, 2013 at 22:21

dnc253

40.4k41 gold badges145 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJs routing issue

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related