Angular UI 路由器 - 具有命名模板最佳实践的抽象状态

Question

我是 angular ui 路由器的新手，我正在尝试使用具有共享给子状态的公共模板的抽象状态，以及具有自己的模板和控制器的子状态。

angular.module('app').config(['$stateProvider',
        function($stateProvider) {
            $stateProvider
            .state('catalog', {
              abstract:true,
              url: '/catalog',
              views: {
               "":{
                templateUrl: 'modules/catalog/views/catalog.client.view.html',
               },
               "productAdd@catalog": {
                 templateUrl: 'modules/catalog/views/catalog.product_add.client.view.html',
                 controller: 'ProductAddController'
               },
               "productList@catalog": {
                 templateUrl: 'modules/catalog/views/catalog.productList.client.view.html',
                 controller: 'ProductListController'
               }
              }
            })
            .state('catalog.base', {

            })
            .state('catalog.productDetail', {
             params: {
               productId: "no_code"
             },
             templateUrl: 'modules/catalog/views/catalog.productDetail.client.view.html',
             controller: 'ProductDetailController'
            });
        }

]);

为了进入这个模块，我把这个简单的锚点放在导航栏上：

<a ui-sref="catalog.base">go</a>

这种导航有效，但我想知道是否有更清晰的方法来避免 "empty" 状态来编写此导航 "catalog.base" 但维护包含通用命名视图和匿名视图的抽象状态的结构。\

这里是 "catalog.client.view.html":

<div class="new-row">
    <div class="product-add-col">
        <div ui-view="productAdd"></div>
    </div>
</div>
<div class="new-row">
    <div class="product-list-col">
      <div ui-view="productList"></div>
    </div>
    <div ui-view></div>
</div>

Answer 1

你不能把它命名为 catalog 而不是 catalog.base 并使它 而不是 抽象吗？

然后 catalog.productDetail 将激活 catalog。文档明确表示我们 not 在这里讨论继承：

Child states DO inherit the following from parent states:

Resolved dependencies via resolve

Custom data properties Nothing else is inherited (no controllers, templates, url, etc).

点是一种状态，不必是抽象的就可以拥有激活它的子状态。这就是文档 say:

An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to.

Angular UI 路由器 - 具有命名模板最佳实践的抽象状态

Angular UI router - abstract state with named template best practice

javascript

angularjs

angular-ui-router