如何降低采用了棱角分明的UI路由器“国家”与同样“templateUrl'的数量 [英] How to reduce number of 'states' with same 'templateUrl' using Angular Ui-Router
问题描述
好吧,我需要与左右角UI-罗特路由问题有所帮助。嗯,其实是没有问题的,它更多的是减少code。
我有三个孩子的状态:
- main.tab1.hello
- main.tab2.hello
- main.tab3.hello
和他们有共同的同一'templateUrl
:'hello.html的
我想知道是否有可能减少他们只有一个状态,当然,当我按一下按钮,我不想改变URL。
下面是我的Plunkr: http://plnkr.co/edit/ej7pCo1RRXPTBL6p8dsL
任何帮助将是AP preciated。
......嗯,其实是没有问题的,它更关于减少code
块引用>在一般情况下,我会建议使用一些
阵列
中的状态名称的,只是重复的创建及其所有子:VAR状态= [main.tab1,main.tab2,main.tab3]states.forEach(功能(parentName){
$ stateProvider
.STATE(parentName +.hello,{
观点:{
viewC @主:{
templateUrl:hello.html的
}
},
})
})但是,还有更复杂的方法,从中获利内置功能:
装饰(姓名,FUNC)
有详细的解释工作的例子:
Well, I need some help about a routing problem with Angular UI-Roter. Well, actually is not a problem, it's more about to reduce code.
I have three child states:
- main.tab1.hello
- main.tab2.hello
- main.tab3.hello
and they have in common the same
'templateUrl'
:'hello.html'
I want to know if is possible to reduce them in only one state, and of course, when I click the button, I don't want to change the URL.
Here is my Plunkr: http://plnkr.co/edit/ej7pCo1RRXPTBL6p8dsL
Any help would be appreciated.
解决方案...Well, actually is not a problem, it's more about to reduce code.
In general, I would suggest to use some
array
of state names and just iterate that to create all its children:var states = ["main.tab1", "main.tab2", "main.tab3"] states.forEach(function(parentName){ $stateProvider .state(parentName + ".hello", { views: { "viewC@main": { templateUrl:"hello.html" } }, }) })
There is the updated plunker with that approach in place
But there are even more sophisticated approaches, profiting from built in feature:
decorator(name, func)
There are working examples with detailed explanation:
- How to decorate current state resolve function in UI-Router? Current function isn't invoked
- AngularJS: How to set one state as a global parent in UI-Router (to use modal as common parts)
这篇关于如何降低采用了棱角分明的UI路由器“国家”与同样“templateUrl'的数量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!