我有一个角度的应用程序的多个视图.目前,我正在使用ui.router的$stateProvider建立视图.不过,我觉得这是非常乏味的,因为我必须重复每个国家的每一个观点.有没有办法为所有州设置默认视图,而不是在每个状态重复它们？
$stateProvider
.state('default',{
url: '/default',views:{
view_1: {
templateUrl: 'view1',controller: function($scope){}
},view_2: {
templateUrl: 'view2',view_3: {
templateUrl: 'view3',controller: function($scope){}
}
}
})
.state('changed_state',{
url: '/changed_state',view_2: {
templateUrl: 'changed_view2',controller: function($scope){}
}
}
})
我只需要列出一次所有状态的默认视图,然后只更改每个状态更改时更改的视图.即：
.state('default',views:{
view_2: {
templateUrl: 'changed_view2',controller: function($scope){}
}
}
})
谢谢
正是在UI路由器架构中已经存在：
我们只会声明一个超级基础状态(例如“root”).甚至可以避免它的初始化是抽象的,但不一定要.而这个状态将定义所有的默认视图.任何子女状态或大孩子国家都可以替换以下任何默认值：
根状态
.state('root',{
// url: '/default',- no url needed at all,but could be
abstract: true
views:{
'' : { templateUrl: 'layout.html'},'view_1@root': {
templateUrl: 'view1','view_2@root': {
templateUrl: 'view2','view_3@root': {
templateUrl: 'view3',controller: function($scope){}
}
});
上面我们可以看到,根状态注入到index.thml< div ui-view =“”>< / div>自己的模板 – 布局模板：
'' : { templateUrl: 'layout.html'},
因此,所有layout.html内的所有命名视图现在都可以填充默认视图,我们只需要使用绝对命名(见下文)
'view_1@root': { // this will inject into the layout.html of current root state
一些更有意思的点.我们不使用url …所以所有的小孩国家都可以自己定义.我们使用抽象…但它不是必须的.
儿童国家 – 这是如何从父母那里获利
.state('changed_state',{
parent: 'root' // this way we profit from parent
url: '/changed_state',// HERE all other views are unchanged
还要查看：
和
View Names – Relative vs. Absolute Names
了解更多命名’view_1 @ root'(小号)
Behind the scenes,every view gets assigned an absolute name that follows a scheme of
viewname@statename,where viewname is the name used in the view directive and state name is the state’s absolute name,e.g. contact.item. You can also choose to write your view names in the absolute Syntax.
