Order of query params should not matter for Angular UI Router

Question

I am working on a AngularJS project v1.5.8, which is using angular-ui-router. The routes are setup something like this:

var myApp = angular.module('demoapp', ['ui.router']);

myApp.config(function($stateProvider) {
  $stateProvider
    .state('landing', {
      url: '/?paramOne&paramTwo&paramThree',
      template: '<h3>Landing Page with params.</h3>',
    })
    .state('landing.pageA', {
      url: '',
      template: '<h3>Landing Page A!</h3>',
    })
    .state('landing.pageB', {
      url: '',
      template: '<h3>Landing Page B!</h3>',
    })
    .state('error', {
      url: '/error',
      template: '<h3>Error Page!</h3>',
    });
  $urlRouterProvider.otherwise('/');
});

For the landing states, the params are not always passed in the order specified. And sometimes, one or more of the params is omitted. A different service redirect to this app and passes the query params.

• Is there a way to make to make some or all of the params optional?
• Require only the first one, and it should not matter if the rest are passed?
• Make the order they are being passed not matter? But, still render the template specified under state landing .

Answer 1

Is there a way to make to make some or all of the params optional?

Yes.

From the Docs:

Using Parameters without Specifying Them in State URLs

You still can specify what parameters to receive even though the parameters don't appear in the url. You need to add a new field params in the state and create links as specified in Using Parameters in Links

For example, you have the state.

 .state('contacts', { url: "/contacts", params: { param1: null }, templateUrl: 'contacts.html' })

The link you create is

<a ui-sref="contacts({param1: value1})">View Contacts</a>

For more information, see

• Angular-UI-Router Wiki - URL Routing