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

Mic*_*ael 16 routing angularjs single-page-application angularjs-routing angular-ui-router

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

Pan*_*kar 21

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

当我们加载其子状态时会调用它.您可以使用抽象状态来定义页面的某些初始模式,假设您可以举例说明您要显示用户个人资料和社交页面的任何社交媒体网站.为此,您可以拥有一个abstract状态,该状态将具有url: ""页面的基本布局.像header,contentfooter命名的视图.header&footernamed视图将由抽象状态填充,然后子将定义内容取决于显示哪个模块./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'
      }
  })
})
Run Code Online (Sandbox Code Playgroud)

其他主要功能abstract是你可以对它有共同的决心,通过数据提供继承的自定义数据供子状态或事件监听器使用.您也可以OnEnterOnExit它来装货前确保事情state和而离开state


AD.*_*Net 5

如果你不想要一个可以被击中的状态\转换为那么你可以使它成为一个抽象状态.例

\A
\A.B
\A.B.C
Run Code Online (Sandbox Code Playgroud)

如果您不希望用户只是去\A,你应该做到abstract.