AngularJS宁静路由 [英] AngularJS Restful Routing
问题描述
我试图使用REST /红宝石convension /＆LT构建我的应用程序，资源和GT; / [法] / [ID] 。如何我已经做到了使用诸如codeIgniter服务器端的MVC框架，当被pviously $ P $动态的，基于URI路径：
I'm trying to structure my app using the Restful/Ruby convension /<resource>/[method]/[id]. How I've done it previously when using a server-side MVC framework like CodeIgniter was to dynamically route based on the URI:
恩。
www.foo.com/bar/baz/1
该应用程序将随后在控制器使用方法巴兹 /类栏并返回的意见/bar/baz.php （填入数据从酒吧，＆GT;巴兹）
The app would then use method baz in controller/class bar and return views/bar/baz.php (populated with data from bar->baz)
我愿做同样的角度，但我不知道它是否支持这一点（如果这样做，我不知道究竟如何去做）。目前我使用 $ routeProvider 的在方法以指定每种情况。 $ location.path（）看起来它可能有我需要什么，但我不认为我可以在 app.js 使用它（在配置（））。
I would like to do the same in Angular, but I'm not sure if it supports this (and if it does, I'm not sure exactly how to go about it). At the moment I'm using $routeProvider's when method to specify each case. $location.path() looks like it might have what I need, but I don't think I can use it in app.js (within config()).
我想要做的是这样的：
.config([
'$routeProvider', function($routeProvider) {
$routeProvider
.when(//<resource> controller exists
resource+'/'+method, {
"templateURL": "views/" + resource + "/" + method + ".html",
"controller": resource
}
).otherwise({ "redirectTo":"/error" });
}
]);
和路由器会自动调用适当的方法。
And the router automatically calls the appropriate method.
修改同时，为什么 $ routeProvider 吓坏了，当我指定时，（'/富/酒吧'，{...}）？
EDIT Also, why does $routeProvider freak out when I specify when('/foo/bar', {…}) ?
编辑2 每Lee的建议，我寻找到做这样的事情：
EDIT 2 Per Lee's suggestion, I'm looking into doing something like this:
$routeProvider
.when(
'/:resource/:method/:id', {
"templateUrl": function(routeParams){
var path = 'views/'+routeParams.resource+'/';
return ( typeof routeParams.method === 'undefined' ) ?
path+'index.html' : path+routeParams.method+'.html';
},
"controller": RESOURCE
})
.otherwise({redirectTo: '/error'});
我注意到 $ routeProvider 的DOC以下内容：
的 templateUrl 的 - {字符串= |函数（）=} - 路径或函数返回
路径应该由ngView使用HTML模板。
templateUrl – {string=|function()=} – path or function that returns a path to an html template that should be used by ngView.
如果 templateUrl 的是一个函数，它将被称为下面
参数：
If templateUrl is a function, it will be called with the following parameters:
•{阵列下;对象＆gt;} - 路由参数从当前提取的
$ location.path（）通过将当前路径
• {Array.<Object>} - route parameters extracted from the current $location.path() by applying the current route
修改：设置 templateUrl 来一个功能是不稳定的1.1.2 建设：＃1963年（但并不作为2013年2月7日的工作）。
Edit: The option to set templateUrl to a function is part of the unstable 1.1.2 build: #1963 (but it doesn't work as of 2013-02-07).
有一个关于增加对AngularJS的Github上这个功能dicussion：＃1193 的#1524 ，但我不能告诉如果它实际上执行（从短跑上面引述的文档，它看起来像它一直以来，并在网站上的文档尚未更新）。
There is a dicussion about adding this functionality on AngularJS's Github: #1193 #1524, but I can't tell if it was actually implemented (in the docs from Dash quoted above, it looks like it has been, and the docs on the site haven't been updated yet).
编辑3 ：要澄清我希望发生的（每李某的要求），在最简单的术语，我想转到 www.foo.com/index.html ＃/人
EDIT 3 To clarify what I want to happen (per lee's request), in simplest terms, I would like to go to www.foo.com/index.html#/people
角应使用控制器人，自动调用其首页方法，并应成为了
Angular should use controller people, automatically call its index method, and should serve up
./意见/人/ index.html的
./views/people/map.html
./views/people/index.html
./views/people/map.html
另外，如果我去 www.foo.com/index.html#/people/map
角应该再次使用人控制器，但这次automcatically调用它的地图方法和服务于 ... map.html 的（因为地图是在URL中指定）
Angular should use the people controller again, but this time automcatically call its map method and serve up …map.html (because map was specified in the url)
./意见/人/ index.html的
./意见/人/ map.html
./views/people/index.html
./views/people/map.html
然后，如果我去
www.foo.com/index.html#/widgets
www.foo.com/index.html#/widgets
角度应该成为了
./意见/部件/ index.html的
./views/widgets/details.html
./views/widgets/index.html
./views/widgets/details.html
在code路由器应该是很普通的，我不应该指定。当（）每路线。
The code for the router should be very generic—I shouldn't have to specify a .when() for every route.
推荐答案
这是现在可以使用 UI路由器 0.2.8：
This is now possible with ui-router 0.2.8:
$stateProvider
.state('base', {
url: '/:resource/:collection/:id',
controllerProvider: function( $stateParams )
{ // assuming app.controller('FooCtrl',[…])
return $stateParams.collection + 'Ctrl';
},
templateUrl: function( $stateParams )
{
return '/partials/' + $stateParams.collection + '.html';
}
});
以利用<一但href=\"https://github.com/angular-ui/ui-router/wiki/Quick-Reference#wiki-stateincludesstatename--params\"相对=nofollow> $ state.includes（） 的导航菜单，这可能会更好：
But in order to take advantage of $state.includes() on nav menus, this would probably be better:
$stateProvider
.state('base.RESOURCE_NAME1', {
url: '/:collection/:id',
controllerProvider: function( $stateParams )
{ // assuming the convention FooCtrl
return $stateParams.collection + 'Ctrl';
},
templateUrl: function( $stateParams )
{
return '/partials/' + $stateParams.collection + '.html';
}
}).state('base.RESOURCE_NAME2', {
url: '/:collection/:id',
controllerProvider: function( $stateParams )
{ // assuming the convention FooCtrl
return $stateParams.collection + 'Ctrl';
},
templateUrl: function( $stateParams )
{
return '/partials/' + $stateParams.collection + '.html';
}
});
以上可以用一个循环来构建状态被简化从资源数组（ $ stateProvider 的支持添加状态基本上每当）：
The above could be simplified with a loop to build the states from an array of resources ($stateProvider supports adding states basically whenever):
var resources = [ 'r1', 'r2', '…' ];
for ( var r = resources.length-1; r >=0; r-- )
{
var name = resources[r];
$stateProvider.state('base.'+name, {
…
});
}
买者 UI路由器并不没有真正支持可选状态参数（的计划V0.4 ）
Caveat ui-router doesn't not really support optional state parameters (planned for v0.4)
这篇关于AngularJS宁静路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
