Can angularjs routes have default parameter values?

Question

Can I set a default value for a route parameter in AngularJS? Is there a way to have /products/123 and /products/ handled by the same route?

I am looking for refactoring existing code that looks like this:

 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 is not very elegant. Is there a better way?

Answer 1

AngularJS does not allow you to set default values ​​for route parameters.

But routes (in AngularJS ) should not have default options.

Resources may have default settings.

In AngularJS , if you want a route with an optional parameter, these are actually two different routes.

Why?

• Routes should be easy

• Routes do not allow regular expressions for parameters

• Routes are not something that provides an API to work in your application (as opposed to resources). Routes are just a configuration that associates a URL with a pattern and controller. Thus, more routes are better:

  • It’s clear what route maps the URL refers to.

  • This is a more detailed but easier way to read. More complex routes will create a steeper learning curve where AngularJS does not need it.

Unlike server frameworks that have routes

• AngularJS routes have no names.
• You are not creating URLs from specific routes.
• You have no logic (aka function) in the route definitions.

Simple routes = more lines to determine them = less headaches working with them.

NOTE Please keep in mind the question, and this answer is for the old version of AngularJS (1.0, I think), prior to the introduction of new routes / resources.

Answer 2

I understand that this question is old, but still: why don't you just redirect the "empty" URL to one containing the default file?

 myModule.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/products/', {redirectTo: '/products/123'}). when('/products/:productId', {templateUrl: 'products.html', controller: ProductsCtrl}) }]); 

Answer 3

I had a similar requirement. I did to create a function for the solution. 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; } 

Answer 4

With url: "/ view /: id /: status?" . You can specify an optional parameter.

I just thought that someone might need it.

Answer 5

Not sure if this question is specific to $routeProvider , but in $ stateProvider you can achieve this with

 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 } } }); });