AngularJS dynamic routing

Question

I currently have an AngularJS application with routing built in. It works and everything is ok.

My app.js file looks like this:

angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).   config(['$routeProvider', function ($routeProvider) {       $routeProvider.when('/', { templateUrl: '/pages/home.html', controller: HomeController });       $routeProvider.when('/about', { templateUrl: '/pages/about.html', controller: AboutController });       $routeProvider.when('/privacy', { templateUrl: '/pages/privacy.html', controller: AboutController });       $routeProvider.when('/terms', { templateUrl: '/pages/terms.html', controller: AboutController });       $routeProvider.otherwise({ redirectTo: '/' });   }]); 

My app has a CMS built in where you can copy and add new html files within the /pages directory.

I would like to still go through the routing provider though even for the new dynamically added files.

In an ideal world the routing pattern would be:

$routeProvider.when('/pagename', { templateUrl: '/pages/pagename.html', controller: CMSController });

So if my new page name was "contact.html" I would like angular to pick up "/contact" and redirect to "/pages/contact.html".

Is this even possible?! and if so how?!

Update

I now have this in my routing config:

$routeProvider.when('/page/:name', { templateUrl: '/pages/home.html', controller: CMSController }) 

and in my CMSController:

function CMSController($scope, $route, $routeParams) {     $route.current.templateUrl = '/pages/' + $routeParams.name + ".html";     alert($route.current.templateUrl); } CMSController.$inject = ['$scope', '$route', '$routeParams']; 

This sets the current templateUrl to the right value.

However I would now like to change the ng-view with the new templateUrl value. How is this accomplished?

Answer 1

angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives']).         config(['$routeProvider', function($routeProvider) {         $routeProvider.when('/page/:name*', {             templateUrl: function(urlattr){                 return '/pages/' + urlattr.name + '.html';             },             controller: 'CMSController'         });     } ]); 

• Adding * let you work with multiple levels of directories dynamically. Example: /page/cars/selling/list will be catch on this provider

From the docs (1.3.0):

"If templateUrl is a function, it will be called with the following parameters:

{Array.} - route parameters extracted from the current $location.path() by applying the current route"

Also

when(path, route) : Method

• path can contain named groups starting with a colon and ending with a star: e.g.:name*. All characters are eagerly stored in $routeParams under the given name when the route matches.