AngularJS: ¿Cómo utilizar $routeParams para generar la plantillaUrl?
Nuestra aplicación tiene navegación de 2 niveles. Queremos utilizar AngularJS $routeProviderpara proporcionar plantillas dinámicamente a un archivo <ng-view />. Estaba pensando en hacer algo como esto:
angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/:primaryNav/:secondaryNav', {
templateUrl: 'resources/angular/templates/nav/'+<<primaryNavHere>>+'/'+<<secondaryNavHere>>+'.html'
});
}]);
Simplemente no sé cómo completar las partes dentro del archivo <<>>. Sé que el navegador primario y el navegador secundario están vinculados a $routeParams, pero ¿cómo accedo a $routeParams aquí para servir dinámicamente la plantilla?
Esta característica muy útil ahora está disponible a partir de la versión 1.1.2 de AngularJS. Se considera inestable pero lo he usado (1.1.3) y funciona bien.
Básicamente, puedes usar una función para generar una cadena templateUrl. A la función se le pasan los parámetros de ruta que puede usar para crear y devolver la cadena templateUrl.
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:'/'});
}
);
Muchas gracias a https://github.com/lrlopez por la solicitud de extracción.
https://github.com/angular/angular.js/pull/1524
No pude encontrar una manera de inyectar y usar el $routeParamsservicio (que supongo que sería una mejor solución). Intenté esto pensando que podría funcionar:
angular.module('myApp', []).
config(function ($routeProvider, $routeParams) {
$routeProvider.when('/:primaryNav/:secondaryNav', {
templateUrl: 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html'
});
});
Lo que produjo este error:
Proveedor desconocido: $routeParams de myApp
Si algo así no es posible, puede cambiarlo templateUrlpara que apunte a un archivo HTML parcial que solo tiene ng-includey luego configurar la URL en su controlador usando $routeParammensajes como este:
angular.module('myApp', []).
config(function ($routeProvider) {
$routeProvider.when('/:primaryNav/:secondaryNav', {
templateUrl: 'resources/angular/templates/nav/urlRouter.html',
controller: 'RouteController'
});
});
function RouteController($scope, $routeParams) {
$scope.templateUrl = 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html';
}
Con esto como tuurlRouter.html
<div ng-include src="templateUrl"></div>
