为什么给一个"抽象:真实"状态的网址？

Question

我今天正试图用ui-router来试图更好地理解Ionic中的脚手架,我注意到的一件事是他们给了抽象状态的"标签"一个网址.

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

无法过渡到抽象状态'[insertAbstractStateHere]'

编辑:

"而且,在实验中,当我尝试将一个网址分配给我的抽象状态(离开Ionic)并仍然呈现嵌套状态视图时,我得到一个大鹅蛋.根本没有任何东西出现."

上面引用的陈述是假的!我在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

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

/home/index
/home/contact

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

/home

现在你可以简单地为这种情况创建两个状态,使用完整的URL,然后你会写/home/两次,描述有点复杂.最好的想法是创建一个家庭抽象父级,其他两个状态是子级(对于ui-router docs):

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

请注意,在父状态内,我们分配了一个唯一的子项为a的模板ui-view.这可以确保渲染子项(并且可能是您的子项显示为空白的原因).

有时您可能会注意到使用带有空白URL的抽象状态.这种设置的最佳用途是当您需要父母时resolve.例如,您可能需要一些特定的服务器数据用于您的状态子集.因此,您可以创建一个具有所需解析的空白URL父级,而不是将相同的解析函数放入每个状态.如果你想要层次结构控制器,它可能是有用的,其中父级没有用于视图(不确定为什么你会想要这个,但它是合理的).