为什么要给出“抽象:真实"?说一个网址?

问题描述

今天我一直在摆弄 ui-router，试图更好地理解 Ionic 中的脚手架，我注意到的一件事是它们为标签"的抽象状态提供了一个 URL.

I've be fiddling around with ui-router today in trying to better understand the scaffolding in Ionic and one thing that I noticed was that they give the abstracted state of "tabs" a url.

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

The only times I've ever used abstract states, I used an empty string as the url and I notice that if I've ever accidentally attempted to navigate to an abstracted state (as opposed to the child state) I get the error:

无法转换到抽象状态[insertAbstractStateHere]"

此外，在实验中，当我尝试为我的抽象状态(在 Ionic 之外)分配一个 url 并仍然呈现嵌套状态视图时，我得到了一个大鹅蛋.根本没有任何显示."

"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 中再次尝试，嵌套状态确实出现了.

the above quoted statement is false! I tried it again in Plunker and the nested states did show up.

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

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

Apparently I was indeed doing it wrong. So my new question is:

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

Is there any reason why one would use a named state as opposed to an empty string in employing abstract states, or is it just a style choice?

推荐答案

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

The reason you would use an abstract state is to keep your definition dry when you have a part of your url non-navigable. For example, say that you had a url scheme like the following:

/home/index
/home/contact

但是，无论出于何种原因在您的设计中，此 url 无效(即页面没有目的):

However, for whatever reason in your design, this url was invalid (i.e. no purpose for a page):

/home

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

Now you could simply create two states for this situation, with the complete urls, however then you would be writing /home/ twice, and the description is a bit more convoluted. The best idea instead is to create a home abstract parent of which the two other states are children (for 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.这可确保渲染子项(这可能就是您的子项显示为空白的原因).

Just notice that inside the parent state, we assign a template whose only child is a ui-view. This ensures that the children are rendered (and might be why yours is appearing blank).

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

Sometimes you might notice the use of an abstract state with a blank url. The best use of this setup is when you need a parental resolve. For example, you may require some particular server data for a subset of your states. So instead of putting the same resolve function into each of your states, you could create a blank url parent with the desired resolve. It could also be useful if you want hierarchical controllers, where the parent has no use for a view (not sure why you would want this, but it is plausible).

这篇关于为什么要给出“抽象:真实"?说一个网址?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！