15

Я работаю над моим проектом AngularUI. Я читал все о состояниях, вложенных состояниях и абстрактных состояниях. Проблема в том, что я не могу понять, почему и когда я должен использовать абстрактное состояние?  Какова цель использования абстрактного состояния?

ответ

19

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

Он вызывается, когда мы загружаем его состояние ребенка. Вы можете использовать абстрактное состояние, чтобы определить какой-то исходный шаблон вашей страницы, предположим, что вы можете взять пример любого сайта социальных сетей, где вы хотите показать профиль пользователя &. Для этого у вас может быть одно состояние abstract, которое будет иметь url: "" & имеет базовое расположение вашей страницы. Как header, content & footer названные виды. header & footer Именованный вид будет заполнен абстрактным состоянием &, тогда ребенок определит, что содержимое зависит от того, какой модуль отображается./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

5

Если вы не хотите, чтобы состояние, которое может быть удалено \ перешло к, вы можете сделать его абстрактным. Пример

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

Если вы не хотите, чтобы пользователь просто пойти \A, вы должны сделать это abstract.

0

Аннотация состояния

Существуют ситуации, в которых мы должны иметь некоторую общую информацию, доступную в нескольких штатах. Для этого UI-Router предоставляет возможность указывать абстрактные состояния. Абстрактные состояния могут иметь дочерние состояния, но они не могут быть активированы сами, и не переходят к. Абстрактное состояние неявно активируется, когда активируется одно из его дочерних состояний. Это полезно, когда: нам нужно добавить URL-адрес ко всем адресам дочерних состояний , нам нужно вставить шаблон со своим собственным ui-представлением, в котором будут заполнены дочерние состояния , нам необходимо предоставить разрешенные зависимости (через разрешение) в для использования дочерними состояниями нам необходимо предоставить унаследованные пользовательские данные состояния для использования дочерними состояниями или событиями Абстрактные состояния определены с указанием абстрактного ключа в объекте конфигурации состояния, установленном в true.

$stateProvider 

.state('home', { 

    abstract: true, 

    templateURL: 'home.html' 

}) 
3

В принципе, абстрактные состояния помогают вам перемещать общую функциональность из разных состояний в родительское абстрактное состояние.

Типичным примером является состояние, которое обрабатывает загрузку имени пользователя, параметров локализации, метаданных. Вы не хотите, чтобы пользователь перенаправлял состояние, которое будет загружать именно это. Вы хотите, чтобы быть загружены всегда, когда перенаправлены на каждом штате

/session бы абстрактно, но /session/main, /session/detail не будет. Через зависимости данные сеанса будут загружены при переходе в оба состояния main и detail, но вы не хотите, чтобы пользователь перешел в состояние session.

Смежные вопросы