angularjs - 为什么要给 "abstract: true"状态一个 url？

Question

今天我一直在摆弄 ui-router，试图更好地理解 Ionic 中的脚手架，我注意到的一件事是它们为“选项卡”的抽象状态提供了一个 url。

我唯一一次使用抽象状态，我使用了一个空字符串作为 url，我注意到如果我曾经不小心尝试导航到抽象状态(而不是子状态)，我会得到错误:

Cannot transition to abstract state '[insertAbstractStateHere]'

编辑:

“此外，在实验中，当我尝试将 url 分配给我的抽象状态(Ionic 之外)并仍然渲染嵌套状态 View 时，我得到了一个大鹅蛋。根本没有显示任何内容。”

以上引用的说法是错误的!我在Plunker又试了一次嵌套状态确实出现了。

 angular.module('routingExperiments', ['ui.router'])
      .config(function($urlRouterProvider, $stateProvider) {

    $stateProvider

      .state('abstractExperiment', {
        abstract: true,
        url: '', //<--- seems as if any string can go here.
        templateUrl: 'abstractExperiment.html'
      })
      .state('abstractExperiment.test1', {
        url: '/test1',
        templateUrl: 'abstractTest1.html'
      });
  });

看来我确实做错了。所以我的新问题是:

在使用抽象状态时，是否有任何理由使用命名状态而不是空字符串，或者这只是一种样式选择？

Answer 1

使用抽象状态的原因是当您的 URL 的一部分不可导航时，要保持定义干燥。例如，假设您有一个如下所示的 url 方案:

/home/index
/home/contact

但是，无论您的设计出于何种原因，此网址无效(即页面没有任何用途):

/home

现在您可以简单地为这种情况创建两个状态，并使用完整的 url，但是您将编写 /home/ 两次，并且描述有点复杂。最好的想法是创建一个主抽象父级，其中其他两个状态是子级(对于 ui-router 文档):

$stateProvider
    .state('parent', {
        url: '/home',
        abstract: true,
        template: '<ui-view/>'
    })
    .state('parent.index', {
        url: '/index',
        templateUrl: 'index.html'
    })
    .state('parent.contact', {
        url: '/contact',
        templateUrl: 'contact.html'
    })

请注意，在父状态内，我们分配了一个模板，其唯一的子级是 ui-view。这可确保渲染子级(这可能就是您的子级显示为空白的原因)。

<小时/>

有时您可能会注意到使用带有空白 URL 的抽象状态。当您需要家长解决时，此设置的最佳用途。例如，您可能需要部分州的某些特定服务器数据。因此，您可以创建一个具有所需解析的空白 url 父级，而不是将相同的解析函数放入每个状态中。如果您想要分层 Controller ，其中父级没有 View 的用途，它也可能很有用(不确定为什么您会想要这个，但它是合理的)。