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

Question

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

Answer 1

如果您不想要可以 hit\transitioned 的状态，那么您可以将其设为抽象状态。例子

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

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

Answer 2

抽象状态

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

$stateProvider

.state('home', {

    abstract: true,

    templateURL: 'home.html'

})

Answer 3

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

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

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

Answer 4

Abstract state does mean the state that you wrote can't be accessible directly. Abstract states still need their own for their children to plug into.

当我们加载它的子状态时它被调用。您可以使用抽象状态来定义页面的一些初始模式，假设您可以以任何社交媒体网站为例，您希望在其中显示用户个人资料和社交页面。为此，您可以拥有一个 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

离开时的事情

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

what is the purpose of use abstract state?

routing

angularjs

single-page-application

angularjs-routing

angular-ui-router