Структурировать состояние $ в Angular

Question

У меня есть веб-приложение. До сих пор я использовал.when, чтобы определить все URL. Теперь я хочу лучше узнать состояние $. Итак, у меня есть сеть, которая состоит из следующих элементов: - страница входа (общедоступная) - затем (личная): - главная страница панели инструментов - список пользователей

Закрытая сторона состоит из: - навигационной панели (вверху) с приветственными сообщениями - боковой панели (справа) со списком кнопок ("Домой" и "Список") - представлением (где я вижу домашнюю панель управления, а затем, если пользователь нажимает "Список", смотрите список пользователей).

В main.js я пишу это:

'use strict';

angular.module('app', [
'app.login',
'app.dashboard'
]).config(
['$stateProvider', '$urlRouterProvider', '$resourceProvider',
function($stateProvider, $urlRouterProvider, $resourceProvider) {

  $resourceProvider.defaults.stripTrailingSlashes = false;

$urlRouterProvider
  .otherwise('/login');

 $stateProvider

  // Definizione dei template di base per le pagine
  .state('app.dashboard', {
    url: '/dashboard',
    templateUrl: 'dashboard.html',
    controller: 'dashboardCtrl'
  })

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'app.html',
  })

  .state('login', {
    url: '/login',
    templateUrl: 'login.html',
    controller: 'LoginController'
  })

  .state('app.list', {
    url: '/list',
    templateUrl: 'list.html',
    controller: 'ListController',
  })

}])

Каким должен быть / или не должен быть тезис? Должен ли я сделать "общее" состояние $? Кроме того, потому что я хочу добавить авторизацию, которую вы не сможете продвинуть, если не вошли в систему. Можете ли вы помочь мне структурировать маршрутизацию и понять абстрактное состояние?

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

Источник: Зачем давать URL-адрес "abstract: true"?