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:
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);
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments