The multiple nested views functionality of the ui-router
is very nice - you can easily jump from one state of your app to another.
ui-router的多重嵌套视图功能非常棒——您可以轻松地从应用程序的一个状态跳到另一个状态。
Sometimes you might want to change the URL, but sometimes not. I feel like the concept of state should be separate/optional from routing.
有时您可能想要更改URL,但有时不会。我觉得国家的概念应该是独立的/可选的。
Here's a plunker that shows what I mean. This is a fork of one of the plunkers in the ui-router
documentation, with 2 minor changes noted below:
这里有一个柱塞显示了我的意思。这是ui-router文档中其中一个插片的分支,其中有两个小更改如下:
.state('route1', {
url: "/route", // <---- URL IS SHARED WITH ROUTE2
views: {
"viewA": {
template: "route1.viewA"
},
"viewB": {
template: "route1.viewB"
}
}
})
.state('route2', {
url: "/route", // <---- URL IS SHARED WITH ROUTE1
views: {
"viewA": {
template: "route2.viewA"
},
"viewB": {
template: "route2.viewB"
}
}
})
This seems to work - the URL stays the same. Again, how much redundant work is done here? Is this an approved/tested usage?
这似乎可行——URL保持不变。这里做了多少多余的工作?这是批准/测试的用法吗?
It would be nice if you could omit the url
from a state..
如果您可以省略某个状态的url,那就太好了。
UPDATE: You can omit a url from a state. plunker
Update question: Is this an approved/tested usage?
更新问题:这是批准/测试的用法吗?
2 个解决方案
#1
41
You can absolutely have a state without a URL. In fact, none of your states need URLs. That's a core part of the design. Having said that, I wouldn't do what you did above.
你绝对可以有一个没有URL的状态。事实上,您的任何州都不需要url。这是设计的核心部分。话虽如此,我不会做你上面所做的事。
If you want two states to have the same URL, create an abstract parent state, assign a URL to it, and make the two states children of it (with no URL for either one).
如果您希望两个状态具有相同的URL,创建一个抽象的父状态,为它分配一个URL,并使两个状态为它的子节点(没有URL)。
#2
0
To add to the other answer, Multiple Named Views do not use a URL.
要添加到另一个答案,多个命名视图不使用URL。
From the docs:
从文档:
If you define a views object, your state's templateUrl, template and templateProvider will be ignored. So in the case that you need a parent layout of these views, you can define an abstract state that contains a template, and a child state under the layout state that contains the 'views' object.
如果定义一个视图对象,则会忽略状态的templateUrl、template和templateProvider。因此,如果您需要这些视图的父布局,您可以定义一个包含模板的抽象状态,以及包含“view”对象的布局状态下的子状态。
The reason for using named views is so that you can have more than one ui-view per template or in other words multiple views inside a single state. This way, you can change the parts of your site using your routing even if the URL does not change and you can also reuse data in different templates because it's a component with it's own controller and view.
使用命名视图的原因是,您可以在每个模板上拥有多个ui-view,或者换句话说,在单个状态中有多个视图。这样,即使URL没有更改,您也可以使用您的路由来更改站点的各个部分,您还可以在不同的模板中重用数据,因为它是一个具有自己的控制器和视图的组件。
See Angular Routing using ui-router for an in-depth explanation with examples.
请参阅使用ui-router的角路由,了解有关示例的深入解释。
#1
41
You can absolutely have a state without a URL. In fact, none of your states need URLs. That's a core part of the design. Having said that, I wouldn't do what you did above.
你绝对可以有一个没有URL的状态。事实上,您的任何州都不需要url。这是设计的核心部分。话虽如此,我不会做你上面所做的事。
If you want two states to have the same URL, create an abstract parent state, assign a URL to it, and make the two states children of it (with no URL for either one).
如果您希望两个状态具有相同的URL,创建一个抽象的父状态,为它分配一个URL,并使两个状态为它的子节点(没有URL)。
#2
0
To add to the other answer, Multiple Named Views do not use a URL.
要添加到另一个答案,多个命名视图不使用URL。
From the docs:
从文档:
If you define a views object, your state's templateUrl, template and templateProvider will be ignored. So in the case that you need a parent layout of these views, you can define an abstract state that contains a template, and a child state under the layout state that contains the 'views' object.
如果定义一个视图对象,则会忽略状态的templateUrl、template和templateProvider。因此,如果您需要这些视图的父布局,您可以定义一个包含模板的抽象状态,以及包含“view”对象的布局状态下的子状态。
The reason for using named views is so that you can have more than one ui-view per template or in other words multiple views inside a single state. This way, you can change the parts of your site using your routing even if the URL does not change and you can also reuse data in different templates because it's a component with it's own controller and view.
使用命名视图的原因是,您可以在每个模板上拥有多个ui-view,或者换句话说,在单个状态中有多个视图。这样,即使URL没有更改,您也可以使用您的路由来更改站点的各个部分,您还可以在不同的模板中重用数据,因为它是一个具有自己的控制器和视图的组件。
See Angular Routing using ui-router for an in-depth explanation with examples.
请参阅使用ui-router的角路由,了解有关示例的深入解释。