使用抽象状态的目的是什么? [英] what is the purpose of use abstract state?

问题描述

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

I am working on my tutorial AngularUI project. I read all about states, nested states and abstract states. The problem is that I can't understand why and when I should use abstract state?  

推荐答案

抽象状态确实意味着你写的状态不能被访问直接地.抽象状态仍然需要自己的状态供他们的孩子插入.

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 的社交页面.

It gets called when we load its child's state. You can use abstract state to define some initial pattern of your page, suppose you can take an example of Any social media site, where you wanted to show user profile & social page. For that you could have one abstract state, which will have url: "" & have basic layout of your page. Like header, content & footer named views. header & footer named view will be filled up by the abstract state & then child will define the what the content is depends on which module is displayed. /profile will show the userProfile.html & /social will show the social page of an user 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

Other main feature of abstract is you can have common resolve on it, provide inherited custom data via data for use by child states or an event listener. Also you can have OnEnter & OnExit on it to making sure things before loading state & while leaving from state

这篇关于使用抽象状态的目的是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！