I have a simple application that has many different variations of one block.
I want to implement simple routing with Angular.
For example for the URL #/page1 main block of the page should load content from /partials/page1.html
I have a large quantity of pages with unique names. How can I implement such routing?
Note: we can't use Angular app.config to store all the URLs and template names there.
Something like this could work, although this is using app.config but in a programmatic way.
angular.module('yourApp',['ngRoute']).config(function ($routeProvider) {
// get your pages from somewhere (e.g. via $http)
var yourBigChunkOfPages = [
{route: ..., template: ..., ctrl: ...},
...
];
angular.forEach(yourBigChunkOfPages, function (page) {
$routeProvider.when(page.route, {
template: page.template,
controller: page.ctrl
});
});
});
Another, probably more generic, solution could be loading the same controller for all your requests and decide there what to do. E.g.:
angular.module('yourApp',['ngRoute']).config(function ($routeProvider) {
$routeProvider.when("/page/:pagename", {
template: 'page.html',
controller: 'PageCtrl'
});
})
.controller('PageCtrl', function ($scope, $routeParams) {
// do something with $routeParams.pagename which holds
// the reference to the requested pagename
});
There is an explainaition of how to work with the injected params.
I have got it.
var module = angular.module('appName', ['ngRoute']).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/', {templateUrl: 'partials/index.html'}).
when('/:page', {templateUrl: function(routeArgs){
var path = 'partials';
path += '/' + routeArgs['page'] + '.html';
return path;
}}).
otherwise({redirectTo: '/'});
}]);
module. Each module now will have it's ownroutes. This way you end up with chunkable sizes of code and easy to understand app