Какова цель использования абстрактного состояния?

Ответ 1

Абстрактное состояние означает, что состояние, которое вы написали, не может быть доступно непосредственно. Абстрактные состояния все еще нуждаются в собственных интересах, чтобы их дети могли подключаться.

Он вызывается, когда мы загружаем его дочернее состояние. Вы можете использовать абстрактное состояние, чтобы определить какой-то исходный шаблон вашей страницы, предположим, что вы можете взять пример любого сайта социальных сетей, где вы хотите показать профиль пользователя и социальную страницу. Для этого вы можете иметь одно состояние abstract, которое будет иметь url: "" и иметь базовый макет вашей страницы. Подобно header, content и footer с именем views. header и footer named view будет заполнен абстрактным состоянием, а затем дочерний элемент определит, что содержимое зависит от того, какой модуль отображается. /profile отобразит userProfile.html и /social покажет социальную страницу пользователя social.html.

Config

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": {
      '[email protected]': {
          templateUrl: 'profile.html',
          controller: 'profileController'
      }
  })
  .state("app.social": {
      '[email protected]': {
          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-адрес всем адресам дочерних состояний нам нужно вставить шаблон с собственным ui-представлением, в котором будут заполняться состояния ребенка нам нужно предоставить разрешенные зависимости (через разрешение) для использования дочерними состояниями нам необходимо предоставить унаследованные пользовательские данные состояния для использования дочерними состояниями или событиями Абстрактные состояния определены с указанием абстрактного ключа в объекте конфигурации состояния, установленном на true.

$stateProvider

.state('home', {

    abstract: true,

    templateURL: 'home.html'

})