Как настроить вложенные представления в AngularJS?

У меня есть приложение с различными экранами. Каждому экрану присваивается URL-адрес, например #, mails, contacts и т.д.

В моем основном HTML файле у меня есть элемент ng-view, который обновляется в соответствии с выбранным пользователем маршрутом. Пока что так хорошо.

Теперь некоторые из этих экранов имеют суб-навигацию. Например, #mails имеет папку "Входящие" и отправленную папку. Они представляют обезьяны с двумя столбцами: суб-навигацией слева, почтой соответствующей папки справа.

Когда вы переходите к #mails, он перенаправляет вас на #mails/inbox, так что основной почтовый ящик по умолчанию для почтовых ящиков является почтовым ящиком.

Как я могу настроить это?

Единственный подход, о котором я могу сейчас думать (я довольно новичок в AngularJS, поэтому прошу меня, если этот вопрос немного наивен) состоит в том, чтобы иметь два вида: один для #mails/inbox, а другой для #mails/sent.

Когда вы выбираете маршрут, эти представления загружаются. Когда вы выберете #mails, он просто перенаправит вас на #mails/inbox.

Но это означает, что оба представления должны использовать ng-include для суб-навигации. Как-то это мне не нравится.

Что мне больше нравится, так это наличие вложенных представлений. Верхний переключатель переключается между экранами, такими как почта, контакты и т.д., а нижний - между под-представлениями, такими как входящие, отправленные и т.д.

Как я могу это решить?

Ответ 1

AngularJS ui-router решил мои проблемы: -)

Ответ 2

Еще одна библиотека для проверки: http://angular-route-segment.com

Вы можете использовать его вместо встроенных ng-view и $route.

Пример конфигурации маршрута выглядит следующим образом:

$routeSegmentProvider.

when('/section1',          's1.home').
when('/section1/prefs',    's1.prefs').
when('/section1/:id',      's1.itemInfo.overview').
when('/section1/:id/edit', 's1.itemInfo.edit').
when('/section2',          's2').

segment('s1', {
    templateUrl: 'templates/section1.html',
    controller: MainCtrl}).

within().

    segment('home', {
        templateUrl: 'templates/section1/home.html'}).

    segment('itemInfo', {
        templateUrl: 'templates/section1/item.html',
        controller: Section1ItemCtrl,
        dependencies: ['id']}).

    within().

        segment('overview', {
            templateUrl: 'templates/section1/item/overview.html'}).

        segment('edit', {
             templateUrl: 'templates/section1/item/edit.html'}).

        up().

    segment('prefs', {
        templateUrl: 'templates/section1/prefs.html'}).

    up().

segment('s2', {
    templateUrl: 'templates/section2.html',
    controller: MainCtrl});