Angularjs 使用抽象状态的目的是什么?

Angularjs 使用抽象状态的目的是什么?,angularjs,routing,angular-ui-router,single-page-application,angularjs-routing,Angularjs,Routing,Angular Ui Router,Single Page Application,Angularjs Routing,我正在做我的教程AngularUI项目。 我阅读了所有关于状态、嵌套状态和抽象状态的内容。 问题是我无法理解为什么以及何时应该使用抽象状态 如果您不想要一个可以命中\转换为的状态,那么可以将其设置为抽象状态。范例 \A \A.B \A.B.C 如果您不希望用户简单地转到\A,则应将其设置为抽象 抽象状态 在某些情况下,我们需要在几个州获得一些共同的信息。为此,UI路由器提供了指定抽象状态的可能性。 抽象状态可以有子状态,但它们本身不能被激活,也不能转换为。当抽象状态的一个子状态被激活时,抽象状

我正在做我的教程AngularUI项目。 我阅读了所有关于状态、嵌套状态和抽象状态的内容。
问题是我无法理解为什么以及何时应该使用抽象状态

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

\A
\A.B
\A.B.C
如果您不希望用户简单地转到
\A
,则应将其设置为
抽象

抽象状态

在某些情况下,我们需要在几个州获得一些共同的信息。为此,UI路由器提供了指定抽象状态的可能性。 抽象状态可以有子状态,但它们本身不能被激活,也不能转换为。当抽象状态的一个子状态被激活时,抽象状态被隐式激活。 这在以下情况下非常有用: 我们需要为所有子状态url预先添加一个url 我们需要插入一个模板,该模板具有子状态将填充的自己的ui视图 我们需要提供已解析的依赖项(通过解析),以便子状态使用 我们需要提供继承的自定义状态数据,以便子状态或事件使用 抽象状态是通过指定状态配置对象中设置为true的抽象键来定义的

$stateProvider

.state('home', {

    abstract: true,

    templateURL: 'home.html'

})

基本上,抽象状态帮助您将公共功能从不同的状态移动到父抽象状态

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

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

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

当我们加载其子对象的状态时,会调用它。您可以使用抽象状态来定义页面的一些初始模式,假设您可以以任何社交媒体站点为例,在其中显示用户配置文件和社交页面。为此,您可以有一个
摘要
状态,该状态将有
url:“
”&具有页面的基本布局。像
标题
内容
页脚
命名视图<代码>页眉
页脚
命名视图将由抽象状态填充,然后子级将根据显示的模块定义内容
/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
的另一个主要功能是,您可以对其进行通用解析,通过数据提供继承的自定义数据,供子状态或事件侦听器使用。您还可以在其上安装
oneter
&
OnExit
,以确保在从
state