Come utilizzare un parametro URL in un templateUrl utilizzando ngRoute?

Question

Sto costruendo un'app angularjs, la mia app.js ha questo aspetto. Tuttavia, genera l'errore Unknown provider: $routeParams. Qualche idea del perché?

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 1

Disponibile in AngularJS 1.2 parametri di percorso di accesso a un livello di configurazione sostituire.

template: 'partials/pages/'+$routeParams.projectId+'.html', 

con:

templateUrl: function(params){ return 'partials/pages/' + params.projectId + 'html'; } 

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

Answer 2

Nella configurazione di un modulo angolare non è consentito utilizzare i servizi. $ routeParams è un servizio quindi non puoi utilizzarlo lì.

Si consiglia di includere un modello o un altro tramite il controller ProjectDetailController. In questo controller è possibile iniettare e utilizzare il servizio $ routeParams, per scegliere un modello o un altro. Qualcosa di simile:

Così, il vostro config:

when('/Projects/:projectId', { 
    template: 'partials/pages/main.html', 
    controller: 'ProjectDetailController' 
    }). 

Il controller:

Controller.$inject = ['$routeParams']; 

/* @ngInject */ 
function Controller($routeParams) { 
    var vm = this; 
    vm.template = 'partials/pages/'+$routeParams.projectId+'.html'; 
} 

E il modello main.html:

<ng-include src="vm.template"/> 

Answer 3

$routeParams è un servizio e può non essere iniettato in .config.

Se si vuole impostare il vostro TemplateURL da URL params, il modo corretto è quello di utilizzare una funzione per impostare il templateUrl (come segue):

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