UI маршрутизатор - Как я создать вложенное состояние

Question

У меня есть состояние, как следующее:

.state('main', {url: '/main', templateUrl: 'views/main.html', controller: 'Main'}) 

То, что я хочу сделать, это иметь другой URL, который /main/details. Это будет div в пределах views/main.html, что я ТОЛЬКО хочу появляться, когда в этом URL-адресе. Затем они могут щелкнуть ссылку, которая вернет их в/main, но скроет вышеуказанный div и покажет другой div. Как мне это сделать?

Answer 1

Существует несколько способов сделать это.

Если вам не нужно распространять общие материалы в основном шаблоне, просто используйте два состояния (которые не вложены) и сопоставьте их с URL-адресами main и main/detail. Пока имена состояний не содержат точки, нет гнездования.

Если вы хотите использовать общий шаблон для основного и вставлять материал только для состояния детали, вы можете использовать вложенность. Довольно простым способом было бы иметь (абстрактное) основное состояние с разделителем-заполнителем, содержащим другую директиву ui-view и два вложенных (дочерних) состояния empty и with. Эти дочерние состояния затем могут предоставить шаблон, который должен быть отображен в ваш основной шаблон. Итак, для empty один шаблон может быть пустым (должен быть чем-то, а не пустой строкой).

angular 
    .module('main') 
    .config(function ($stateProvider) { 
    $stateProvider 
     .state('main', { 
     url: '/main', 
     abstract: true, 
     template: '<div>some stuff possibly here: <div ui-view></div></div>' 
     }) 
     .state('main.empty', { 
     url: '', 
     template: ' ' // cannot be empty string 
     }) 
     .state('main.detail', { 
     url: '/detail', 
     template: '<div>the details</div>' 
     }); 
    }); 

Имейте в виду, что ваши ссылки, то должны быть направлены main.empty как государства имени, даже если URL будет просто /main.

Третьим вариантом может быть использование имени ui-view s, а затем управление содержимым путем присвоения материала более чем одному виду. Но это невозможно сделать довольно громоздким, так как тогда вам нужно ссылаться на первое имя ui-view для каждого другого состояния, а также не поддерживает вложенный вами контент.