I have an AngularJS app built with version 1.2.5. I am trying to dynamically add routes. Currently, I have the following:
var sitemap = [];
angular.module('app', ['ngRoute', 'ngAnimate'])
.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
angular.forEach(sitemap, function (value, key) {
$routeProvider.when(value.route, { templateUrl: value.html, controller: viewCtrl });
});
$routeProvider.otherwise({ templateUrl: '/views/default.html', controller: viewCtrl });
})
.service('navigationService', function () {
this.loadItems = function () {
console.log('loading items...');
sitemap.push({
name: 'dashboards', children: [
{ name: 'dashboard 1', route: '/dashboards/dashboard1', html: '' }
]
});
sitemap.push({
name: 'views', children: [
{ name: 'historical', route: '/views/historical', html: '/views/historical.html' },
{ name: 'present', route: '/views/present', html: '/views/present.html' },
{ name: 'future', route: '/views/future', html: '/views/future.html' }
]});
};
})
;
While my sitemap is hard-coded, I would like to eventually pull this from a web service. That's why I want to rely on a function in a service. However, I can't figure out how to dynamically build the routes once I have them. Can someone please provide some insight?
Thank you!