Javascript angularjs 路由可以有默认参数值吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12524533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can angularjs routes have default parameter values?
提问by mikel
Can I set a default value of a parameter of a route in AngularJS? Is there a way to have /products/123and /products/handled by the same route ?
我可以在 AngularJS 中设置路由参数的默认值吗？有没有办法通过相同的路线拥有/products/123和/products/处理？
I'm looking to refactor my existing code, which looks like:
我正在寻找重构我现有的代码，它看起来像：
myModule.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/products/', {templateUrl: 'products.html', controller: ProductsCtrl}).
when('/products/:productId', {templateUrl: 'products.html', controller: ProductsCtrl})
}]);
function ProductsCtrl($scope, $routeParams) {
$scope.productId = typeof($routeParams.productId) == "undefined" ? 123 : $routeParams.productId;
}
It works, but it's not very elegant. Is there a better way ?
它有效，但不是很优雅。有没有更好的办法 ？
采纳答案by Haralan Dobrev
AngularJSdoes not allow default values for route parameters.
AngularJS不允许路由参数的默认值。
But routes (in AngularJS) should not have default parameters.
但是路由（in AngularJS）不应该有默认参数。
Resources could have default parameters.
资源可以有默认参数。
In AngularJSif you want a route with an optional parameter, these are actually two different routes.
在AngularJS如果你想使用一个可选的参数的路线，这实际上是两个不同的路线。
Why?
为什么？
Routes should be simple
Routes does not allow regular expressions matching for parameters
Routes are not something which exposes an API to work in your application (unlike Resources do). Routes are just configuration which connects a URL with a template and a controller. Thus having more routes is better:
It is clear which route maps to which url.
It is more verbose, but simpler to read. Having more complex routes would create a steeper learning curve where AngularJS does not need one.
路线应该很简单
路由不允许正则表达式匹配参数
路由不是公开 API 以在您的应用程序中工作的东西（与参考资料不同）。路由只是将 URL 与模板和控制器连接起来的配置。因此，拥有更多路线更好：
哪个路由映射到哪个 url 一目了然。
它更冗长，但更易于阅读。拥有更复杂的路由会产生更陡峭的学习曲线，而 AngularJS 不需要。
Unlike server-side frameworks which have routes
与具有路由的服务器端框架不同
- AngularJS routes do not have names.
- You do not build URLs from the defined routes.
- You do not have logic (a.k.a functions) in the routes definitions.
- AngularJS 路由没有名称。
- 您不从定义的路由构建 URL。
- 您在路由定义中没有逻辑（又名函数）。
Simpler routes = more lines to define them = less headaches working with them.
更简单的路线 = 更多定义它们的线 = 更少的麻烦。
NOTE: Please keep in mind the question and this answer are for an old version of AngularJS (1.0 I think) pre-dating the new routes/resources implementation.
注意：请记住这个问题，这个答案是针对新路由/资源实现之前的旧版本 AngularJS（我认为是 1.0）。
回答by Juliane Holzt
I recognize that this question is old, but still: Why don't you just redirect the "empty" URL to one containing the default productId?
我承认这个问题很老，但仍然：为什么不将“空”URL 重定向到包含默认 productId 的 URL？
myModule.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/products/', {redirectTo: '/products/123'}).
when('/products/:productId', {templateUrl: 'products.html', controller: ProductsCtrl})
}]);
回答by Bren
I had a similar requirement. What i did was to create a function to resolve. Something like below
我也有类似的需求。我所做的是创建一个函数来解决。像下面这样
myModule.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/products/', resolveProduct()).
when('/products/:productId', resolveProduct())
}]);
function ProductsCtrl($scope, $routeParams) {
$scope.productId = $routeParams.productId;
}
function resolveProduct() {
var routeConfig = {
templateUrl: 'products.html',
controller: ProductsCtrl,
resolve: {
productId: ['$route', function($route){
var params = $route.current.params;
params.productId = params.productId || 123;
}]
}
}
return routeConfig;
}
回答by PAVITRA
With url: "/view/:id/:status?", You can indicate an optional parameter.
使用网址：“/view/:id/:status?” , 可以指明一个可选参数。
Just thought someone may need it.
只是觉得有人可能需要它。
回答by tsuz
Not sure if this question is specific to $routeProviderbut in $stateProvider, you can achieve this by
不确定这个问题是否特定于$routeProvider但在$stateProvider 中，您可以通过
myApp.config(function($stateProvider) {
$stateProvider
.state('products', {
url: '/:productId',
templateUrl: "/dashboard/products.html",
controller: 'ProductController',
params: {
productId: {
value: "defaultValue",
squash: true // or enable this instead to squash `productId` when empty
}
}
});
});
