Несколько index.html при использовании Angular UI Router

Я новичок в использовании Angular с Meteor. В настоящее время я борюсь с использованием маршрутизатора Angular UI, где у меня есть файл index.html, который похож на основной шаблон макета с <div ui-view></div>, где маршрутизатор будет отображать шаблоны представления в зависимости от текущего маршрута.

Можно ли создать больше файлов шаблонов макета, таких как index.html, и выбрать, в какой версии index.html мы хотим отображать шаблон представления?

Это может быть связано с тем, что на большинстве страниц сайта используется определенный макет, определенный в index.html, но для некоторых страниц могут потребоваться свои собственные специальные макеты (например, без заголовка и т. д.).


javascript angularjs meteor angular-meteor
person Athena Wisdom    schedule 18.12.2015    source источник
comment
Angular задуман как одностраничное приложение, поэтому вам не нужно этого делать. Вот личное руководство для тех случаев, когда я начинаю проект. При таком подходе вы не можете создать уникальный макет для каждой страницы. Глянь сюда. github.com/jofftiquez/angular-app-starter-pack   -  person CENT1PEDE    schedule 18.12.2015

Ответы (2)


arrow_upward
0
arrow_downward

Вы не хотите использовать отдельные страницы index.html, потому что там хранятся все скрипты angular, а переход на новый index.html означает повторную загрузку всех ваших скриптов.

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

Из вики-сайта Ui-Router:

$stateProvider
.state('contacts', {
    abstract: true,
    templateUrl: 'contacts.html'
})
.state('contacts.list', {
    // loaded into ui-view of parent's template
    templateUrl: 'contacts.list.html'
})
.state('contacts.detail', {
    // loaded into ui-view of parent's template
    templateUrl: 'contacts.detail.html'
})

<!-- contacts.html -->
<h1>Contacts Page</h1>
<div ui-view></div>
person Claies    schedule 18.12.2015

arrow_upward
0
arrow_downward

Ваше требование иметь много index.html файлов вместе с ui-router указывает на слабый дизайн. Но я отвечу на ваш вопрос.

Одним из способов достижения различных макетов в index.html является наличие директивы менеджера ui-view, которая прослушивает состояние. Вы можете использовать эту директиву во всех разных местах, где может находиться ваш ui-view, и заставить его вставлять директиву ui-view в зависимости от состояния.

Также ваша директива может показывать/скрывать свои родительские блоки, чтобы наложить вашу конфигурацию макета. Таким образом, вы можете настроить блоки макета index.html до того, как ui-router заменит разметку.

person Charlie    schedule 18.12.2015