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

Question

我是 Angular ui 路由器的新手，我正在尝试使用以下命令进行状态配置 一个抽象状态，它具有共享给子状态的公共(public)模板，并且子状态具有自己的模板和 Controller 。

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'
            });
        }

]);

为了进入此模块，我将这个简单的 anchor 放在导航栏上:

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

这种导航有效，但我想知道是否有更清晰的方法来编写此导航以避免“空”状态 “catalog.base”，但维护包含公共(public)命名 View 和匿名 View 的抽象状态的结构。\

这里是“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.