AngularJS, ui-router, nested states

Question

I'm building the outline of an app using ui-router. I've defined the states and it seems to work, but I can't help but feel there might be a better way in terms of best practice.

My states:

'main' is an abstract state with a header, footer, and a middle content area.
'main.home' is what comes up by default. The content file 'home.tpl.html' is a sort of splash page with srefs to other areas of the app, like 'main.wizard.step1'.
'main.wizard' is an abstract state representing a multi step info gathering wizard.
'main.wizard.step1', 'main.wizard.step2' are steps in the wizard

What I'm doubting is my use of the 'views' object having values of "@" and "". Does this look reasonable, or would you do something else?

$urlRouterProvider.otherwise('/');

var app = {
    name: 'main',
    abstract: true,
    url: '',
    views: {
        'header': {
            templateUrl: 'header.tpl.html'
        },
        'footer': {
            templateUrl: 'footer.tpl.html'
        }
    }
};

var home = {
    name: 'main.home',
    url: '/',
    views: {
        "@": {
            templateUrl: 'home/home.tpl.html'
        }
    }
};

var wizard = {
    name: 'main.wizard',
    abstract: true,
    url: '/wizard',
    views: {
        "@": {
            templateUrl: 'wizard/wizard.tpl.html'
        }
    }
};

var step1 = {
    name: 'main.wizard.step1',
    url: '/step1',
    views: {
        "": {
            templateUrl: 'wizard/step1.tpl.html'
        }
    }
};

/** repeat similarly for step2, step3 & step 4 **/

$stateProvider.state(app);
$stateProvider.state(home);
$stateProvider.state(wizard).state(step1).state(step2).state(step3).state(step4);

Gabriel Kohen · Accepted Answer · 2015-04-16 23:12:42Z

What '@' will mean in the definition of the template of the view will be injected into the ui-view of the root state which is usually your index.html. If you want the wizard to go into your middle area of your main page you should add something like this to your index.html:

<ui-view name='content'>Optional placeholder text</ui-view>

And in the definition of the view you should do something like

var wizard = {
name: 'main.wizard',
abstract: true,
url: '/wizard',
views: {
    "@content": {
        templateUrl: 'wizard/wizard.tpl.html'
    }
 }
};

You can actually drop that @ in @content because main is the parent of wizard and you don't have to resolve it in an absolute manner. In any case if you want to have steps in your wizard(of course) don't put any views in your wizard virtual state. Have your steps sub states have their own view and target wizard@. I don't see that you need a separate view wrapper for your wizard (Maybe if you want to do "step x of y" or a progress bar). Hope it helps.

Vivek · Accepted Answer · 2017-03-07 07:45:51Z

You are going good. But you can improve. Here is the code which shows how I had done it,I have taken this approach from a sample app in UI-Router Guide.

    var states = [
        { name: 'hello', url: '/loginnn', component: 'loginComponent'    },
        { name: 'home', url: '/hommm', component: 'homeComponent' },

        { 
          name: 'home.dumm1', 
          url: '', 
          component: 'dummyComponent',

        },


        {
          name: 'home.dumm2', 
          url: '/dumm1', 
          component: 'dummyComponent1',
        },


        {
            name : 'home.dashboard',
            url: '/dashboard', 
            component: 'dashboardComponent',
        }

      ]

      // Loop over the state definitions and register them
      states.forEach(function(state) {
        $stateProvider.state(state);
      });
    });

Collectives™ on Stack Overflow

AngularJS, ui-router, nested states

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related