我们的应用程序有 2 级导航。我们想使用 AngularJS$routeProvider为<ng-view />. 我正在考虑按照以下方式做一些事情：
angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/:primaryNav/:secondaryNav', {
templateUrl: 'resources/angular/templates/nav/'+<<primaryNavHere>>+'/'+<<secondaryNavHere>>+'.html'
});
}]);
我只是不知道如何填充<<>>. 我知道primaryNav 和secondaryNav 绑定到$routeParams，但是我如何在此处访问$routeParams 以动态提供模板？
从 AngularJS 的 1.1.2 版本开始，现在可以使用这个非常有用的功能。它被认为是不稳定的，但我已经使用它（1.1.3）并且它工作正常。
基本上你可以使用一个函数来生成一个 templateUrl 字符串。该函数传递了可用于构建和返回 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:'/'});
}
);
非常感谢https://github.com/lrlopez的拉取请求。
我找不到注入和使用$routeParams服务的方法（我认为这将是一个更好的解决方案）我尝试了这个，认为它可能会起作用：
angular.module('myApp', []).
config(function ($routeProvider, $routeParams) {
$routeProvider.when('/:primaryNav/:secondaryNav', {
templateUrl: 'resources/angular/templates/nav/'+$routeParams.primaryNav+'/'+$routeParams.secondaryNav+'.html'
});
});
这产生了这个错误：
未知提供者：来自 myApp 的 $routeParams
如果这样的事情是不可能的，你可以改变你templateUrl的指向一个部分 HTML 文件，ng-include然后使用$routeParams 在你的控制器中设置 URL，如下所示：
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';
}
以此为你urlRouter.html
<div ng-include src="templateUrl"></div>
templateUrl 可以用作返回生成 URL 的函数。我们可以使用带有 routeParams 的传递参数来操作 url。
请参阅示例。
.when('/:screenName/list',{
templateUrl: function(params){
return params.screenName +'/listUI'
}
})
希望这有帮助。
好吧，我想我明白了……
先说一点背景知识：我需要这个的原因是将 Angular 放在 Node Express 之上，并让 Jade 为我处理我的部分。
所以这就是你要做的事情......（先喝啤酒，然后花 20 多个小时在上面！！！）......
设置模块时，$routeProvider全局保存：
// app.js:
var routeProvider
, app = angular.module('Isomorph', ['ngResource']).config(function($routeProvider){
routeProvider = $routeProvider;
$routeProvider
.when('/', {templateUrl: '/login', controller: 'AppCtrl'})
.when('/home', {templateUrl: '/', controller: 'AppCtrl'})
.when('/login', {templateUrl: '/login', controller: 'AppCtrl'})
.when('/SAMPLE', {templateUrl: '/SAMPLE', controller: 'SAMPLECtrl'})
.when('/map', {templateUrl: '/map', controller: 'MapCtrl'})
.when('/chat', {templateUrl: '/chat', controller: 'ChatCtrl'})
.when('/blog', {templateUrl: '/blog', controller: 'BlogCtrl'})
.when('/files', {templateUrl: '/files', controller: 'FilesCtrl'})
.when('/tasks', {templateUrl: '/tasks', controller: 'TasksCtrl'})
.when('/tasks/new', {templateUrl: '/tasks/new', controller: 'NewTaskCtrl'})
.when('/tasks/:id', {templateUrl: '/tasks', controller: 'ViewTaskCtrl'})
.when('/tasks/:id/edit', {templateUrl: '/tasks', controller: 'EditTaskCtrl'})
.when('/tasks/:id/delete', {templateUrl: '/tasks', controller: 'DeleteTaskCtrl'})
.otherwise({redirectTo: '/login'});
});
// ctrls.js
...
app.controller('EditTaskCtrl', function($scope, $routeParams, $location, $http){
var idParam = $routeParams.id;
routeProvider.when('/tasks/:id/edit/', {templateUrl: '/tasks/' + idParam + '/edit'});
$location.path('/tasks/' + idParam + '/edit/');
});
...
这可能比需要的信息更多......
基本上，您会希望$routeProvider全局存储模块的 var，例如，routeProvider以便控制器可以访问它。
然后你可以使用routeProvider并创建一个新的路由（你不能'RESET a route'/'REpromise'；你必须创建一个新的），我只是在末尾添加了一个斜杠（/），以便它具有语义作为第一个。
然后（在您的控制器内），将 设置为templateUrl您想要点击的视图。
取出对象的controller属性.when()，免得出现无限请求循环。
最后（仍在控制器内部），用于$location.path()重定向到刚刚创建的路由。
如果您对如何将 Angular 应用程序添加到 Express 应用程序感兴趣，可以在此处分叉我的存储库：https ://github.com/cScarlson/isomorph 。
而且这个方法还允许你保留 AngularJS 双向数据绑定，以防你想使用 WebSockets 将你的 HTML 绑定到你的数据库：否则如果没有这个方法，你的 Angular 数据绑定只会输出{{model.param}}.
如果你在这个时候克隆它，你需要在你的机器上运行 mongoDB 来运行它。
希望这能解决这个问题！
科迪
不要喝你的洗澡水。
我在我的 Angular 分支中添加了对此的支持。它允许您指定
$routeProvider
.when('/:some/:param/:filled/:url', {
templateUrl:'/:some/:param/:filled/template.ng.html'
});
https://github.com/jamie-pate/angular.js/commit/dc9be174af2f6e8d55b798209dfb9235f390b934
不确定这是否会被拾起，因为它有点不利于棱角分明，但它对我很有用
路由器：-
...
.when('/enquiry/:page', {
template: '<div ng-include src="templateUrl" onload="onLoad()"></div>',
controller: 'enquiryCtrl'
})
...
控制器：-
...
// template onload event
$scope.onLoad = function() {
console.log('onLoad()');
f_tcalInit(); // or other onload stuff
}
// initialize
$scope.templateUrl = 'ci_index.php/adminctrl/enquiry/'+$routeParams.page;
...
我认为 $routeParams 在路由器内部不可见是 angularjs 的一个弱点。一个微小的改进将在实施过程中产生巨大的变化。
//module dependent on ngRoute
var app=angular.module("myApp",['ngRoute']);
//spa-Route Config file
app.config(function($routeProvider,$locationProvider){
$locationProvider.hashPrefix('');
$routeProvider
.when('/',{template:'HOME'})
.when('/about/:paramOne/:paramTwo',{template:'ABOUT',controller:'aboutCtrl'})
.otherwise({template:'Not Found'});
}
//aboutUs controller
app.controller('aboutCtrl',function($routeParams){
$scope.paramOnePrint=$routeParams.paramOne;
$scope.paramTwoPrint=$routeParams.paramTwo;
});
在 index.html 中
<a ng-href="#/about/firstParam/secondParam">About</a>
根据您的需要，firstParam 和 secondParam 可以是任何值。
我遇到了类似的问题并使用$stateParams而不是routeParam