使用抽象状态的目的是什么？答案

【问题标题】：what is the purpose of use abstract state?使用抽象状态的目的是什么？
【发布时间】：2015-09-06 11:56:31
【问题描述】：

我正在编写我的教程 AngularUI 项目。我阅读了所有关于状态、嵌套状态和抽象状态的内容。问题是我不明白为什么以及何时应该使用抽象状态？

【问题讨论】：

标签： angularjs routing angular-ui-router single-page-application angularjs-routing

【解决方案1】：

抽象状态确实意味着您编写的状态无法访问直接地。抽象状态仍然需要他们自己的孩子才能插入。

当我们加载它的子状态时，它会被调用。您可以使用抽象状态来定义页面的一些初始模式，假设您可以以任何社交媒体网站为例，您想在其中显示用户个人资料和社交页面。为此，您可以拥有一个abstract 状态，它将拥有url: "" 并具有您页面的基本布局。像 header、content 和 footer 命名视图。 header & footer 命名视图将被抽象状态填充，然后子视图将根据显示的模块定义内容是什么。 /profile 将显示userProfile.html 和/social 将显示用户social.html 的社交页面。

配置

app.config(function($stateProvider){
  $stateProvider.state("app":
  {
    url: "", //you can have the default url here..that will shown before child state url
    abstract: true,
    views: {
       '': {
          templateUrl: 'layout.html',
          controller: 'mainCtrl'
       },
       'header': {
          templateUrl: 'header.html'
       },
       'footer': {
          templateUrl: 'footer.html'
       }
    },
    resolve: {
       getUserAuthData: function(userService){
           return userService.getUserData();
       }
    }

  })
  .state("app.profile": {
      'content@app': {
          templateUrl: 'profile.html',
          controller: 'profileController'
      }
  })
  .state("app.social": {
      'content@app': {
          templateUrl: 'social.html',
          controller: 'socialController'
      }
  })
})

abstract 的其他主要功能是您可以对其进行通用解析，通过数据提供继承的自定义数据以供子状态或事件侦听器使用。你也可以在上面加上OnEnter和OnExit，以确保在加载state和从state离开之前进行检查

【讨论】：

【解决方案2】：

如果您不想要一个可以被命中\转换到的状态，那么您可以将其设为抽象状态。示例

\A
\A.B
\A.B.C

如果您不希望用户直接转到\A，则应将其设为abstract。

【讨论】：

【解决方案3】：

基本上，抽象状态可帮助您将通用功能从不同状态转移到父抽象状态。

一个典型的例子是处理加载用户名、本地化设置、元数据的状态。您不希望用户重定向到仅加载该状态的状态。当重定向到每个状态时，您希望始终加载它

/session 是抽象的，但是 /session/main, /session/detail 不会。通过依赖关系，会话数据将在进入main 和detail 状态时加载，但您不希望用户进入session 状态。

【讨论】：

【解决方案4】：

抽象状态

在某些情况下，我们需要在多个州提供一些通用信息。为此，UI-Router 提供了指定抽象状态的可能性。抽象状态可以有子状态，但它们本身不能被激活，也不能转换到。抽象状态在其子状态之一被激活时被隐式激活。这在以下情况下很有用：我们需要在所有子状态 url 前面添加一个 url 我们需要插入一个带有自己的 ui 视图的模板，子状态将填充该模板我们需要提供已解析的依赖项（通过解析）以便子状态使用我们需要提供继承的自定义状态数据以供子状态或事件使用定义抽象状态，指定状态配置对象中的抽象键设置为 true。

$stateProvider

.state('home', {

    abstract: true,

    templateURL: 'home.html'

})

【讨论】：