Search code examples
javascriptangularjsangular-ui-routerangular-ui

Angular UI-Router more Optional Parameters in one State


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.


Solution

  • 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 },
        }
    })