How to use an URL param in a templateUrl using ngRoute?

javascript angularjs url-routing ngroute
Blake picture Blake · Apr 9, 2014 · Viewed 8.6k times · Source

I am building an angularjs app, my app.js looks like this. However, it throws Unknown provider: $routeParams error. Any idea why?

var angularSite = angular.module('angularSite', [
  'ui.router',
  'ngRoute',
  'siteController',
  'siteDirectives'
])
.config(['$routeProvider', '$routeParams',
  function($routeProvider,$routeParams) {
    $routeProvider.
      when('/Projects', {
        templateUrl: 'partials/projects.html',
        controller: 'ProjectController'
      }).
      when('/Projects/:projectId', {
        template: 'partials/pages/'+$routeParams.projectId+'.html',
        controller: 'ProjectDetailController'
      }).
      otherwise({
        redirectTo: '/About'
      });
  }]);

Answer

Mistalis picture Mistalis · Apr 7, 2017

$routeParams is a service and can not be injected in .config.

If you want to set your templateUrl from URL params, the correct way is to use a function to set the templateUrl (as following):

.when('/Projects/:projectId', {
    templateUrl: function(params) { // <-- 
        return 'partials/pages/' + params.projectId + '.html'    
    },
    controller: 'ProjectDetailController'
})

Related questions

AngularJS dynamic routing

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('/…

Read More
AngularJS - Animate ng-view transitions

I have 2 html pages, welcome.html and login.html both of which are "inserted" into index.html dependending on the URL via an ngview attribute and router provider, as part of my AngularJS app. An example of this can be …

Read More
Difference between $state.transitionTo() and $state.go() in Angular ui-router

In AngularJS, I see sometimes we use $state.transitionTo() and sometimes we use $state.go(). Can anyone tell me how they differ and when one should be used over the other?

Read More