Multiple Optional Route Params in AngularJS Not Working

Question

How is is possible to define ONE route with TWO optional params and to allow NONE, ONE, OR BOTH of the params to be supplied?..

http://localhost/login
http://localhost/login/abc123
http://localhost/login/abc123/[email protected]

I've read the docs on UrlMatcher and looked at several SO questions. Nothing seems to work. I cannot resolve the basic route (no params) once optional params are defined on a UI-Router route. No errors are produced, but the view is never displayed. The only way to force this to work is to define THREE different routes:

$urlRouterProvider.otherwise("/login");
$stateProvider
.state("login", {
    url: "/login",
    templateUrl: "login/login.html",
    params: {
        appId: null,
        emailAddress: null
    }
})
.state("loginWithAppId", {
    url: "/login/:appId",
    templateUrl: "login/login.html",
    params: {
        appId: null,
        emailAddress: null
    }
})
.state("loginWithParams", {
    url: "/login/:appId/:emailAddress",
    templateUrl: "login/login.html",
    params: {
        appId: null,
        emailAddress: null
    }
});

My goal is to only have ONE route but to allow NONE, ONE, OR BOTH of the params to be sent in:

$urlRouterProvider.otherwise("/login");
$stateProvider
.state("login", {
    url: "/login/:appId/:emailAddress",
    templateUrl: "login/login.html",
    params: {
        appId: null,
        emailAddress: null
    }
});

to be clear, when you say NONE, ONE, or BOTH, you mean NONE, AppID only, or AppId and emailAddress, correct? — Charles Josephs
– Charles Josephs, Commented Apr 26, 2015 at 14:16
Correct. I've also tried adding a ? to the route URL and a / to the browser's URL. No view or console error is ever displayed. — G. Deward
– G. Deward, Commented Apr 26, 2015 at 14:18

Charles Josephs · Accepted Answer · 2015-04-26 15:33:11Z

1

Here is a Plunker with your code and just one state with multiple optional routes:

http://plnkr.co/edit/rgi9MoDKI5ncJcnchb4j?p=preview

HTML:

<body ng-controller="appController as appCtrl">
<a ui-sref='login({appId:null,emailAddress:null})'>login(NONE)</a>
&nbsp;&nbsp;<a ui-sref='login({appId:123,emailAddress:null})'>login(ONE)</a>
&nbsp;&nbsp;<a ui-sref="login({appId:123,emailAddress:'[email protected]'})">login(BOTH)</a>
<div ui-view=""></div>

Config:

.config(function ($stateProvider) {
  $stateProvider.state("login", {
    url: "/login/:appId/:emailAddress",
    params: {
      appId: null,
      emailAddress: null
    },
    templateUrl: "login.html",
    controller: 'LoginController',
    controllerAs: 'LoginCtrl'
 })
})

Controller:

.controller('LoginController',function($stateParams){
  var self = this;

  self.appId = $stateParams.appId;
  self.emailAddress = $stateParams.emailAddress;
});

Login Page:

<div>appId:{{LoginCtrl.appId}}</div>
<div>emailAddress:{{LoginCtrl.emailAddress}}</div>

Hope this works for you

edited Apr 26, 2015 at 15:33

Charles Josephs

1,5353 gold badges14 silver badges25 bronze badges

answered Apr 26, 2015 at 14:43

shivas

92310 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Charles Josephs Over a year ago

I just submitted an edit to the links to allow for navigation back to less specific parameters from more specific parameters.

Collectives™ on Stack Overflow

Multiple Optional Route Params in AngularJS Not Working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related