Angularjs UI-Router state params not working

Question

I have a simple setup in my config()

    $stateProvider
        .state('app', {
          'url': '/app',
          'abstract': true,
          'templateUrl': 'views/layout/index.html',
          'controller': 'App'
        })

        .state('app.home', {
          'url': '/home',
          'views': {
            'appContent': {
              'templateUrl': 'views/home/index.html',
              'controller': 'Home'
            }
          }
        });
        .state('app.asd', {
          'url': '/asd/:idContact?',
          'views': {
            'appContent': {
              'templateUrl': 'views/asd/index.html',
              'controller': 'Asd'
            }
          }
        });
$urlRouterProvider.otherwise('/app/home');

If i browse app/asd/7 everything works if i browse then app/asd it redirects me

I am wondering how can i make idContact param not required ? I used the classic $routeProvider sintax for it :(

@jevgenig i get this error in console Failed to instantiate module emotion due to: Error: Invalid parameter name '' in pattern '/app/asd/:idContact?' cant understand whats wrong with it — Filippo oretti
– Filippo oretti, Commented Oct 1, 2014 at 9:27
The ":varName?" syntax seems to be not supported by stateProvider, but routerProvider. try regexp format: '/asd[/:idContact]' — Jevgeni
– Jevgeni, Commented Oct 1, 2014 at 9:32
@jevgenig i fixed it goind to kill myself it is all written in the doc i didnt noticed sorry, i am gonna close this question , thanks for support!! — Filippo oretti
– Filippo oretti, Commented Oct 1, 2014 at 9:44

ms87 · Accepted Answer · 2014-10-01 09:38:05Z

1

Try:

/asd/{idContact:/?.*}

As far as I know that is the workaround to make parameters optional in ui router. I'm not sure if there have been any recent built in implementations of this in ui router.

answered Oct 1, 2014 at 9:38

ms87

17.5k23 gold badges89 silver badges123 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 11:56:55Z

1

Just wanted to provide some example giving the answer to optional parameter issue. See that all in working example.

This Q&A does explain more details:

AngularJS ui-router optional parameters

Here is a snippet of two states definition:

.state('view', {
    url: '/view/:inboxId',
    templateUrl: 'tpl.view.html',
    controller: 'viewCtrl'
}).

state('view_root', {
    url: '/view',
    templateUrl: 'tpl.view.html',
    controller: 'viewCtrl'
})

And here are some ways how to create links (href or ui-sref) to reach these states:

// href
<a href="#/view/1">/view/1</a> - id is passed<br />
<a href="#/view/"> /view/ </a> - is is missing - OPTIONAL like <br />
<a href="#/view">  /view  </a> - url matching the view_root

// ui-sref
<a ui-sref="view({inboxId:2})">    - id is passed<br /> 
<a ui-sref="view">                 - is is missing - OPTIONAL like
<a ui-sref="view({inboxId:null})"> - id is explicit NULL <br />
<a ui-sref="view_root()">          - url matching the view_root

That should show, that we do not have to pass some param, just must be sure that the proper url is called (the trailing /)

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Oct 8, 2014 at 16:22

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

2 Comments

Radim Köhler Over a year ago

Great if that could help anyhow ;)

Episodex Over a year ago

Not specifying parameter in ui-sref or setting it to null will cause controller to be invoked twice. github.com/angular-ui/ui-router/issues/1476

Collectives™ on Stack Overflow

Angularjs UI-Router state params not working

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related