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

Question

我今天一直在摆弄 ui-router，试图更好地理解 Ionic 中的脚手架，我注意到的一件事是它们给出了 "tabs" 的抽象状态 url。

我唯一一次使用抽象状态，我使用空字符串作为 url 我注意到如果我不小心尝试导航到抽象状态（而不是子状态）我得到错误：

Cannot transition to abstract state '[insertAbstractStateHere]'

编辑：

"Moreover, in experimenting, when I try to assign a url to my abstract state (outside of Ionic) and still render the nested state views, I get a big goose egg. Nothing shows up at all."

以上引用的说法是错误的！我在 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 non-navigable 的一部分时保持您的定义干燥。例如，假设您有一个如下所示的 url 方案：

/home/index
/home/contact

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

/home

现在您可以简单地为这种情况创建两个状态，具有完整的 urls，但是您将写 /home/ 两次，并且描述有点复杂。相反，最好的想法是创建一个主页摘要 parent，其中其他两个状态是 children（对于 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'
    })

请注意，在 parent 状态中，我们分配了一个模板，其唯一的 child 是 ui-view。这确保 children 被渲染（这可能是你的显示空白的原因）。

有时您可能会注意到使用带有空白的抽象状态 url。此设置的最佳用途是当您需要 parental resolve 时。例如，您可能需要一些特定的服务器数据用于您的一部分状态。因此，您可以创建一个具有所需分辨率的空白 url parent，而不是将相同的解析函数放入您的每个状态。如果你想要分层控制器，它也可能很有用，其中 parent 对视图没有用处（不确定你为什么想要这个，但它是合理的）。

Answer 2

使用抽象状态，同时启用 ui 路由器进行导航而无需重新加载 controller/page。

Answer 3

.state('home', {
        url: '/home',
        abstract:true,                        
        controller: "HomeController",
        templateUrl:"path to your html"                       
})
.state('home.list', {
        url:"",
        controller: "HomelistController",
        templateUrl:"path to your html" 
})

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

Why give an "abstract: true" state a url?

state

abstract

angularjs

angular-ui-router

ionic-framework