Зачем указывать URL-адрес "abstract: true"?

Сегодня я занимаюсь ui-router, пытаясь лучше понять леса в ионике, и одна вещь, которую я заметил, это то, что они дают абстрактное состояние "вкладок" URL.

Единственные времена, когда я когда-либо использовал абстрактные состояния, я использовал пустую строку в качестве URL-адреса, и я замечаю, что если я когда-либо случайно попытался перейти к абстрактному состоянию (в отличие от дочернего состояния), я получаю Ошибка:

Невозможно перейти к абстрактному состоянию '[insertAbstractStateHere]'

изменить:

"Кроме того, при экспериментировании, когда я пытаюсь назначить url своему абстрактному состоянию (вне Ionic) и все еще выдавать вложенные представления состояний, я получаю большое гусиное яйцо. Ничего не появляется вообще".

приведенная выше цитата неверна! Я попробовал еще раз в Plunker, и вложенные состояния действительно появились.

 angular.module('routingExperiments', ['ui.router'])
      .config(function($urlRouterProvider, $stateProvider) {

    $stateProvider

      .state('abstractExperiment', {
        abstract: true,
        url: '', //<--- seems as if any string can go here.
        templateUrl: 'abstractExperiment.html'
      })
      .state('abstractExperiment.test1', {
        url: '/test1',
        templateUrl: 'abstractTest1.html'
      });
  });

По-видимому, я действительно делал это неправильно. Поэтому мой новый вопрос:

Есть ли причина, по которой можно использовать именованное состояние, а не пустую строку при использовании абстрактных состояний, или это просто выбор стиля?

Ответ 1

Причина, по которой вы должны использовать абстрактное состояние, состоит в том, чтобы сохранить ваше определение сухим, когда у вас есть часть вашего навигационного текста. Например, скажем, что у вас была схема URL-адресов, например:

/home/index
/home/contact

Однако по какой-либо причине в вашем дизайне этот URL-адрес недействителен (т.е. нет цели для страницы):

/home

Теперь вы можете просто создать два состояния для этой ситуации с полными URL-адресами, однако тогда вы будете писать /home/ дважды, а описание немного запутаннее. Лучшей идеей является создание родительского абстрактного родителя, из которого два других состояния являются дочерними (для ui-router docs):

$stateProvider
    .state('parent', {
        url: '/home',
        abstract: true,
        template: '<ui-view/>'
    })
    .state('parent.index', {
        url: '/index',
        templateUrl: 'index.html'
    })
    .state('parent.contact', {
        url: '/contact',
        templateUrl: 'contact.html'
    })

Просто обратите внимание, что внутри родительского состояния мы назначаем шаблон, единственным дочерним элементом которого является ui-view. Это гарантирует, что дети будут обработаны (и может быть, почему ваши не отображаются).

Иногда вы можете заметить использование абстрактного состояния с пустым URL-адресом. Лучше всего использовать эту настройку, когда вам нужен родительский resolve. Например, для подмножества ваших состояний могут потребоваться определенные данные сервера. Поэтому вместо того, чтобы помещать одну и ту же функцию разрешения в каждое из ваших состояний, вы можете создать пустой родительский URL-адрес с желаемым решением. Это также может быть полезно, если вы хотите, чтобы иерархические контроллеры, в которых родитель не использовал для представления (не знаете, зачем вам это нужно, но это правдоподобно).

Ответ 2

.state('home', {
        url: '/home',
        abstract:true,                        
        controller: "HomeController",
        templateUrl:"path to your html"                       
})
.state('home.list', {
        url:"",
        controller: "HomelistController",
        templateUrl:"path to your html" 
})

Ответ 3

Используйте абстрактное состояние, также разрешайте маршрутизатору ui делать навигацию при перезагрузке контроллера/страницы.