如何使用 Angular Ui-Router 减少具有相同“templateUrl”的“状态”数量答案

【问题标题】：How to reduce number of 'states' with same 'templateUrl' using Angular Ui-Router如何使用 Angular Ui-Router 减少具有相同“templateUrl”的“状态”数量
【发布时间】：2015-10-13 16:32:03
【问题描述】：

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

我有三个子状态：

main.tab1.hello
main.tab2.hello
main.tab3.hello

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

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

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

任何帮助将不胜感激。

【问题讨论】：

好像你不喜欢状态，然后使用
是的，可能是这样，但我的问题集中在是否可以通过减少代码来完成，尝试将所有这三种状态都置于一种状态。有可能的？ ¿ 有办法吗？ ¿ 使用参数？这就是我想知道的。

标签： javascript angularjs angular-ui-router state angularjs-routing

【解决方案1】：

...嗯，其实不是问题，更多的是要减少代码。

一般来说，我建议使用一些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)

有详细解释的工作示例：

【讨论】：

感谢您的回答！这就是我要找的。拜托，你能编辑 plunkr 并用$stateProvider.decorator 帮我做吗，我真的听不懂。
decorator 是UI-Router 中的一个功能，可以帮助您减少代码。它可以在一个地方为所有州做很多常见的事情。也许它不适合这里（你应该自己尝试，真的），但至少其他示例（上面的链接）可以展示它可以为我们做什么。还要检查所有可用的 builder 函数 的文档...希望将来对减少大量代码有所帮助；）
哦，再次感谢！现在我正在尝试使用decorator，但仍有一些问题需要理解。也许你可以看到它：Setting view's name from decorator - Angular Ui Router
稍后（不同的时区，对吗？；）但是..希望你有答案；）享受强大的 UI-Router 先生！ ;)
目前我的资源有限...我建议在这里创建新问题。你会得到更多、更聪明的观众（不仅仅是我）......你可以稍后给我一个链接，如果没有答案，我现在会......我可以稍后来找你......有意义吗？跨度>

【解决方案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。

【讨论】：

有趣的想法！谢谢你的回答。