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

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

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>

go

这种导航很有效，但我想知道是否有更清晰的方法来编写这种导航，避免出现“空”状态 “catalog.base”，但维护包含公共命名视图和非命名视图的抽象状态的结构\

这里是“catalog.client.view.html”：

---

你能不能把它命名为

catalog

而不是

catalog.base

，让它不要抽象

然后

catalog.productDetail

将激活

catalog

。 文档明确指出，我们在这里讨论的是继承：

子州从父州继承以下内容：

• 通过resolve解决依赖关系
• 自定义数据属性不继承任何其他内容（无控制器、模板、url等）

点是一个状态，不必是抽象的，就可以有激活它的子状态。以下是文档的内容：

抽象状态可以有子状态，但不能被激活 它本身“抽象”状态只是一种不可复制的状态 过渡到

---

好的，所以我不需要呈现状态“catalog”抽象，但是如何与子状态共享命名视图呢？共享这些视图是有意义的，否则我必须重新设计导航？默认情况下，子状态“激活”父状态，即使父状态不是抽象的。类似于继承，但不是根据文档。啊，好的，现在我已经理解了问题的要点。非常感谢您的澄清。

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