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

Question

Сегодня я возился с ui-router, пытаясь лучше понять леса в Ionic, и одна вещь, которую я заметил, это то, что они дают абстрактное состояние "вкладок" в качестве 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'
      });
  });

Видимо, я действительно делал это неправильно. Итак, мой новый вопрос:

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

Answer 1

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

/home/index
/home/contact

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

/home

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

$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 с желаемым разрешением. Это также может быть полезно, если вам нужны иерархические контроллеры, в которых родительский элемент не используется для представления (не знаю, зачем вам это нужно, но это правдоподобно).

Answer 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" 
})

Answer 3

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