Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can angularjs routes have default parameter values?

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

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 ?

like image 689
Michael Low Avatar asked Sep 21 '12 05:09

Michael Low


People also ask

How does AngularJS route work?

AngularJS routes enable the user to create different URLs for different content in an application. The ngRoute module helps in accessing different pages of an application without reloading the entire application. Important: $routeProvider is used to configure the routes.

Which function is used to set up a default route in AngularJS?

We use the ngRoute config() to configure the $routeProvider. The config() takes a function which takes the $routeProvider as parameter and the routing configuration goes inside the function.

What makes route path case sensitive in AngularJS routes?

That's because the routes that are configured using UI-Router are case sensitive. To make route insensitive, all you have to do is to inject $urlMatcherFactoryProvider service into the config() function and call caseInsensitive(true) function.

What is routing in AngularJS with example?

We can build Single Page Application (SPA) with AngularJS. It is a web app that loads a single HTML page and dynamically updates that page as the user interacts with the web app. AngularJS supports SPA using routing module ngRoute. This routing module acts based on the url.


2 Answers

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

myModule.config(['$routeProvider', function($routeProvider) {     $routeProvider.      when('/products/', {redirectTo: '/products/123'}).      when('/products/:productId', {templateUrl: 'products.html', controller: ProductsCtrl}) }]); 
like image 131
Juliane Holzt Avatar answered Oct 02 '22 17:10

Juliane Holzt


AngularJS does not allow default values for route parameters.

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

Resources could have default parameters.

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

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.

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.

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.

like image 32
Haralan Dobrev Avatar answered Oct 02 '22 16:10

Haralan Dobrev