Подтвердить что ты не робот

Крупномасштабное приложение AngularJS - несколько макетов UI

Я только начинаю изучать AngularJS. Маршрутизатор упрощает замену одного элемента (элемента dom) с частичным. В моем случае у меня может быть 20 или около того экранов с макетом "полного размера", заменяющим весь экран минус общий верхний заголовок, например:

full size layout

Это прекрасно работает. Однако для моего приложения требуется более одного макета! Если я открою какую-нибудь запись, у нее может быть динамическое подменю с ~ 20 ссылками, где щелчок по каждой ссылке должен только менять правую панель. Конечно, я хочу только один раз получить это динамическое подменю.

detailed record with submenu

Возможно, открытие чего-то другого может иметь совершенно другой макет (со своим подменю - возможно, горизонтальным).

Может ли Angular обрабатывать несколько макетов, подобных этому? Или мне действительно нужно будет создавать отдельные приложения для каждого типа макета!? Этот тип вещей довольно тривиален для других фреймворков, которые я использовал, таких как GWT (с привязкой к действиям и местам для URL), ExtJS и т.д.

Я нашел подобный (хотя, возможно, не такой сложный) вопрос, размещенный здесь без ответа: Несколько макетов с Angular

4b9b3361

ОТВЕТЫ

Ответ 1

То, что вы описываете, представляет собой вложенные представления, которые маршрутизатор по умолчанию не поддерживает. Там очень популярный сторонний модуль для AngularJs, называемый UI-Router, который поддерживает то, что вы просите (и многое другое, с действительно хорошим документация).

Демо-версия UI-Router, которая делает то, что вы описываете, можно увидеть здесь:

http://plnkr.co/edit/3KgB5g?p=preview

Маршруты в UI-Router называются состояниями, и каждое состояние может иметь состояние родительского состояния и дочерних состояний, что позволяет вам планировать макеты. В приведенном выше примере вы можете увидеть это в действии в app.js:

Мы определяем состояние, называемое персоналом:

    .state('personnel', {
        url: "/personnel",
        templateUrl: "personnel.html"
    })

Затем мы определяем дочерние состояния у персонала (список персонала, который вы можете просмотреть):

    .state('personnel.list', {
      url: '/list',
      templateUrl: 'personnel.list.html',
      controller: 'PersonnelCtrl'
    })

И от этого мы можем определить еще большее количество детей (когда вы нажимаете на имя, деталь лица):

    .state('personnel.list.person', {
      url: '/:id',
      templateUrl: 'personnel.list.person.html',
      controller: function($scope, $stateParams){
        $scope.id = $stateParams.id
      }
    });

Обратите внимание, что вы можете перемещаться по разным людям, и только та часть изменения изменяется, пока родительские состояния остаются неизменными.