AngularJS - How to use $routeParams in generating the templateUrl?

Question

Our application has 2-level navigating. We want to use AngularJS $routeProvider to dynamically provide templates to an <ng-view />. I was thinking of doing something along the lines of this:

angular.module('myApp', []). config(['$routeProvider', function($routeProvider) {     $routeProvider.when('/:primaryNav/:secondaryNav', {         templateUrl: 'resources/angular/templates/nav/'+<<primaryNavHere>>+'/'+<<secondaryNavHere>>+'.html'     }); }]); 

I just don't know how to populate the parts within the <<>>. I know the primaryNav and secondaryNav get bound to the $routeParams, but how do I access $routeParams here in order to dynamically serve up the template?

Answer 1

This very helpful feature is now available starting at version 1.1.2 of AngularJS. It's considered unstable but I have used it (1.1.3) and it works fine.

Basically you can use a function to generate a templateUrl string. The function is passed the route parameters that you can use to build and return the templateUrl string.

var app = angular.module('app',[]);  app.config(     function($routeProvider) {         $routeProvider.             when('/', {templateUrl:'/home'}).             when('/users/:user_id',                  {                        controller:UserView,                      templateUrl: function(params){ return '/users/view/' + params.user_id; }                 }             ).             otherwise({redirectTo:'/'});     } ); 

Many thanks to https://github.com/lrlopez for the pull request.

https://github.com/angular/angular.js/pull/1524