如何降低采用了棱角分明的UI路由器“国家”与同样“templateUrl'的数量 [英] How to reduce number of 'states' with same 'templateUrl' using Angular Ui-Router

问题描述

好吧，我需要与左右角UI-罗特路由问题有所帮助。嗯，其实是没有问题的，它更多的是减少code。

我有三个孩子的状态：

1. main.tab1.hello


2. main.tab2.hello


3. 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的
        }
       }，
    }）
}）
 

有与地方的做法更新plunker

但是，还有更复杂的方法，从中获利内置功能：

装饰（姓名，FUNC）

有详细的解释工作的例子：

• 如何装修现状的决心功能UI的路由器？当前函数不调用


• AngularJS：如何设置一个状态在UI的路由器的全球母公司（使用模态作为通用零件）

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:

1. main.tab1.hello
2. main.tab2.hello
3. 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屋！