I am encountering an issue with angularjs routing. My objective is to append different views based on the path. I aim to achieve this by using separate ng-apps within a single HTML document like so:
<body>
<div ng-app="header" id='header'>
<div ng-view></div>
</div>
<div ng-app="content" id='content'>
<div ng-view></div>
</div>
</body>
Below is the app.js code snippet:
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 section gets appended correctly, but there seems to be an issue with appending the content part even though the path matches what I expect. I am finding it challenging to identify where exactly the problem lies.