Defining multiple states in Angular in one line, using UI-Router

Question

Apologies if this question is obvious.

I am defining several states simultaneously in my main modules file for use with UI-Router.

My code is:

 samApp.config(function($stateProvider) {
  $stateProvider
    .state('index', {
      url: "",
      views: {
        "nav": {template: "index.nav"},
        "header": { template: "index.viewA" },
        "page": { template: "index.viewB" }
      }
    })
    .state('articles', {
      url: "/route1",
      views: {
        "nav": {template: "index.nav"},
        "viewA": { template: "route1.viewA" },
        "viewB": { template: "route1.viewB" }
      }
    })
    .state('route2', {
      url: "/route2",
      views: {
        "nav": {template: "index.nav"},
        "viewA": { template: "route2.viewA" },
        "viewB": { template: "route2.viewB" }
      }
    })
});

As you can see, I want every route to use the same Nav. Would it be possible to write something like:

.state(['index', 'articles', 'route2'], {
      url: "",
      views: {
        "nav": {template: "index.nav"}
      }
    })

Or is this just out of the question? Thank you.

seems like you only need the otherwise method. Every route will bring you back to the one that otherwise redirects you to. — Joe Minichino
– Joe Minichino, Commented Mar 17, 2014 at 20:56
@JoeMinichino I thought otherwise sets a state for non-referenced routes. I am referencing the three states I enclosed in the bracketed portion at the bottom. I just want to include a view for every state, including them. — Union find
– Union find, Commented Mar 17, 2014 at 21:00

atondelier · Accepted Answer · 2014-03-17 21:07:28Z

1

In order to group view definition, use an abstract state:

$stateProvider
    .state('parent', {
        // use quotes for avoiding compilation issues with this reserved word
        'abstract': true,
        url: '',
        views: {
            'nav': { template: 'index.nav' }
        }
    })
    .state('articles', {
        parent: 'parent',
        url: "/route1",
        views: {
            // use the viewName@stateName syntax (stateName is empty since we address root no name state
            "header@": { template: "index.viewA" },
            "page@": { template: "index.viewB" }
        }
    })
    /* ... quite the same for other child states */
;

See ui router view names documentation and ui router abstract state documentation. '

answered Mar 17, 2014 at 21:07

atondelier

2,43417 silver badges11 bronze badges

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

1 Comment

Union find Over a year ago

Thanks. That makes a lot of sense!

Collectives™ on Stack Overflow

Defining multiple states in Angular in one line, using UI-Router

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