Angular UI-Router more Optional Parameters in one State

javascript angularjs angular-ui-router angular-ui
G. Deward picture G. Deward · May 13, 2015 · Viewed 20k times · Source

How can I allow optional parameters to my routes without using a query string and only using one route name? I am currently specifying each route FIVE TIMES to allow for any combination of parts:

All parts must be optional. Route must resolve any variation.

.state("login", { url: "/login", templateUrl: "login.html", params: { a: null, b: null, c: null, d: null } })
.state("loginA", { url: "/login/:a", templateUrl: "login.html", params: { b: null, c: null, d: null } })
.state("loginAB", { url: "/login/:a/:b", templateUrl: "login.html", params: { c: null, d: null } })
.state("loginABC", { url: "/login/:a/:b/:c", templateUrl: "login.html", params: { d: null } })
.state("loginABCD", { url: "/login/:a/:b/:c/:d", templateUrl: "login.html" })

There MUST be an easier / cleaner / less ugly way.

Answer

Fred Lackey picture Fred Lackey · May 14, 2015

Short answer....

.state('login', {
    url: '/login/:a/:b/:c/:d',
    templateUrl: 'views/login.html',
    controller: 'LoginCtrl',
    params: {
        a: { squash: true, value: null },
        b: { squash: true, value: null },
        c: { squash: true, value: null },
        d: { squash: true, value: null },
    }
})

Related questions

How to pass parameters using ui-sref in ui-router to controller

I need to pass and recieve two parameters to the state I want to transit to using ui-sref of ui-router. Something like using the link below for transitioning the state to home with foo and bar parameters: <a ui-sref="…

Read More
How to extract query parameters with ui-router for AngularJS?

How do I extract query parameters using ui-router for AngularJS? In AngularJS' own $location service I did: ($location.search()).uid to extract the parameter uid from a URL. What is the corresponding code for ui-router?

Read More
Difference between $state.transitionTo() and $state.go() in Angular ui-router

In AngularJS, I see sometimes we use $state.transitionTo() and sometimes we use $state.go(). Can anyone tell me how they differ and when one should be used over the other?

Read More