为什么要给“抽象：真实”的网址指定网址？

Question

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

我仅有两次使用抽象状态时，我使用一个空字符串作为url，并且注意到如果我不小心尝试导航到抽象状态（而不是子状态），则会收到错误消息：

无法转换为抽象状态“ [insertAbstractStateHere]”

编辑：

“此外，在实验中，当我尝试为我的抽象状态（在Ionic之外）分配一个url并仍然渲染嵌套状态视图时，我得到了一个很大的鹅蛋。什么都没有出现。”

以上引用的陈述是错误的！我在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方案：

/home/index
/home/contact

但是，无论出于何种原因在您的设计中，此url都是无效的（即，对页面无用）：

/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的抽象状态。此设置的最佳用途是当您需要父母的时候resolve。例如，对于状态的子集，您可能需要一些特定的服务器数据。因此，您可以将空白的url父项包含所需的resolve，而不是将相同的resolve函数放入每个状态。如果您要使用层次结构的控制器（父级没有用到视图）（不确定为什么要这样做，但是这是合理的），这也可能很有用。