我正在使用ui-router构建应用程序的大纲。我已经定义了状态并且它似乎有效,但我不禁觉得在最佳实践方面可能有更好的方法。
我的州:
我怀疑的是我使用了具有“@”和“”值的'views'对象。这看起来合情合理,还是会做其他事情?
$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);
答案 0 :(得分:3)
什么' @'将意味着在视图模板的定义中将注入到根状态的ui-view中,这通常是你的index.html。 如果您希望向导进入主页的中间区域,您应该将这样的内容添加到index.html:
<ui-view name='content'>Optional placeholder text</ui-view>
在视图的定义中,您应该执行类似
的操作var wizard = {
name: 'main.wizard',
abstract: true,
url: '/wizard',
views: {
"@content": {
templateUrl: 'wizard/wizard.tpl.html'
}
}
};
您实际上可以将@
放在@content
中,因为main是向导的父级,您不必以绝对的方式解决它。
在任何情况下,如果你想在你的向导中有步骤(当然)不要在你的向导虚拟状态中放置任何视图。让您的步骤子状态具有自己的视图并定位wizard@
。我没有看到你需要为你的向导单独的视图包装器(也许你想做&#34; y&#34的步骤x;或进度条)。
希望它有所帮助。
答案 1 :(得分:0)
你很好。但你可以改进。下面的代码显示了我是如何完成的,我从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);
});
});