为什么要给一个“摘要: true”状态一个 url？

为了更好地理解 Ionic 中的脚手架，我今天一直在摆弄 ui-router，我注意到他们给抽象的“ tab”状态提供了一个 url。

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

无法转换到抽象状态’[ insert tAbstractStateHere ]’

编辑:

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

上面引用的语句是错误的! 我在 笨蛋中再次尝试，嵌套状态确实出现了。

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

显然我的确做错了，所以我的新问题是:

在使用抽象状态时，使用命名状态而不使用空字符串有什么原因吗? 或者这只是一种样式选择？

55469 次浏览
小开
最佳答案

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

/home/index
/home/contact

但是，不管出于什么原因，这个 URL 是无效的(也就是说，页面没有任何用途) :

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

请注意，在父状态中，我们分配了一个模板，它的唯一子级是 ui-view。这样可以确保渲染了子元素(这可能就是为什么您的子元素看起来是空白的)。

有时您可能会注意到使用了一个带有空白 url 的抽象状态。这个设置的最佳用途是当您需要一个家长 resolve时。例如，您可能需要某些特定的服务器数据作为状态的子集。因此，您可以创建一个具有所需解析的空白 url 父节点，而不是将相同的解析函数放到每个状态中。如果您需要分层控制器，父控制器对视图没有用处(不确定为什么需要这样做，但似乎是合理的) ，那么它也可能很有用。

小开

使用抽象状态，还允许 ui 路由器在不重新加载控制器/页面的情况下进行导航。

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

提交答案