如何使用 Angular Ui-路由器减少具有相同 'templateUrl' 的 'states' 的数量

Question

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

我有三个子状态：

main.tab1.hello
main.tab2.hello
main.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 并迭代它来创建它的所有子项：

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)

有详细解释的工作示例：

Answer 2

最简单的方法是定义状态对象，然后在注册状态时简单地重新使用它：

var helloState = {
    views: {
        "viewC@main": {
            templateUrl:"hello.html"
        }
    },
};

$stateProvider
    //snip...
    .state("main.tab1.hello", helloState)
    .state("main.tab2.hello", helloState)
    .state("main.tab3.hello", helloState);

更进一步，您可以定义一个公开所有这些状态定义的服务。如果您需要覆盖任何属性，您可以在状态对象上使用 angular.extend。

如何使用 Angular Ui-路由器减少具有相同 'templateUrl' 的 'states' 的数量

How to reduce number of 'states' with same 'templateUrl' using Angular Ui-Router

javascript

state

angularjs

angularjs-routing

angular-ui-router

decorator(name, func)