javascript - 如何使用 Angular Ui-Router 减少具有相同 'states' 的 'templateUrl' 的数量

Question

好吧，我需要一些帮助来解决 Angular UI-Roter 的路由问题。嗯，其实不是问题，更多的是为了减少代码。

我有三个子状态:

1. ma​​in.tab1.hello
2. ma​​in.tab2.hello
3. ma​​in.tab3.hello

并且它们有相同的 'templateUrl' :'hello.html'

我想知道是否可以只在一种状态下减少它们，当然，当我点击按钮时，我不想更改 URL。

这是我的 Plunkr:http://plnkr.co/edit/ej7pCo1RRXPTBL6p8dsL

如有任何帮助，我们将不胜感激。

Answer 1

...Well, actually is not a problem, it's more about to reduce code.

一般来说，我会建议使用一些 array state names 并迭代它来创建它的所有 child :

var states = ["main.tab1", "main.tab2", "main.tab3"]

states.forEach(function(parentName){
    $stateProvider
      .state(parentName + ".hello", {
        views: {
        "viewC@main": {
            templateUrl:"hello.html"
        }
       },
    })  
})

有the updated plunker有了这种方法

但还有更复杂的方法，可以从内置功能中获益:

decorator(name, func)

有详细解释的工作示例:

• > 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)