Сложное вложение партиалов и шаблонов

507

В моем вопросе речь идет о решении сложной вложенности шаблонов (также называемых partials) в приложении AngularJS.

Лучший способ описать мою ситуацию - с созданным мной изображением:

Изображение 261

Как вы можете видеть, это потенциально может быть довольно сложным приложением с множеством вложенных моделей.

Приложение одностраничное, поэтому он загружает index.html, который содержит элемент div в DOM с атрибутом ng-view.

Для круга 1. Вы видите, что есть первичная навигация, которая загружает соответствующие шаблоны в ng-view. Я делаю это, передавая $routeParams в основной модуль приложения. Вот пример того, что в моем приложении:

angular.module('myApp', []).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.                     
            when("/job/:jobId/zones/:zoneId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/zone_edit.html' }).
            when("/job/:jobId/initial_inspection", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/initial_inspection.html' }).
            when("/job/:jobId/zones/:zoneId/rooms/:roomId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/room_edit.html' })       

    }]);

В круге 2 шаблон, загруженный в ng-view, имеет дополнительную суб-навигацию. Затем этому суб-навигатору необходимо загрузить шаблоны в область под ним - но поскольку ng-view уже используется, я не уверен, как это сделать.

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

В круге 3 вы можете видеть, что все становится еще сложнее. Существует вероятность того, что шаблоны суб-навигации будут иметь вторую суб-навигацию, которая также должна будет загружать свои собственные шаблоны в область круга 4

Как организовать структурирование приложения AngularJS для работы с таким сложным вложением шаблонов, сохраняя при этом их все отдельно друг от друга?

  • 3
    Если вы все еще читаете эту ветку, я добавил ссылку на новый проект AngularUI для решения этой проблемы и третью демонстрацию, основанную на подпрограммах, без необходимости указания моего ответа.
  • 2
    что насчет этого? bennadel.com/blog/...
Показать ещё 3 комментария
Теги:

6 ответов

170
Лучший ответ

Ну, так как в настоящее время у вас есть только одна директива ngView... Я использую вложенные элементы управления. Это позволяет вам устанавливать шаблоны и наследовать (или изолировать) области между ними. Вне этого я использую ng-switch или даже просто ng-show, чтобы выбрать, какие элементы управления отображаются на основе того, что происходит из $routeParams.

РЕДАКТИРОВАТЬ Вот пример псевдо-кода, чтобы дать вам представление о том, о чем я говорю. С вложенной суб-навигацией.

Здесь главная страница приложения

<!-- primary nav -->
<a href="#/page/1">Page 1</a>
<a href="#/page/2">Page 2</a>
<a href="#/page/3">Page 3</a>

<!-- display the view -->
<div ng-view>
</div>

Директива для вспомогательной навигации

app.directive('mySubNav', function(){
    return {
        restrict: 'E',
        scope: {
           current: '=current'
        },
        templateUrl: 'mySubNav.html',
        controller: function($scope) {
        }
    };
});

для вспомогательной навигации

<a href="#/page/1/sub/1">Sub Item 1</a>
<a href="#/page/1/sub/2">Sub Item 2</a>
<a href="#/page/1/sub/3">Sub Item 3</a>

шаблон для главной страницы (из первичной навигации)

<my-sub-nav current="sub"></my-sub-nav>

<ng-switch on="sub">
  <div ng-switch-when="1">
      <my-sub-area1></my-sub-area>
  </div>
  <div ng-switch-when="2">
      <my-sub-area2></my-sub-area>
  </div>
  <div ng-switch-when="3">
      <my-sub-area3></my-sub-area>
  </div>
</ng-switch>

Контроллер для главной страницы. (от основного навигатора)

app.controller('page1Ctrl', function($scope, $routeParams) {
     $scope.sub = $routeParams.sub;
});

Директива для вспомогательной области

app.directive('mySubArea1', function(){
    return {
        restrict: 'E',
        templateUrl: 'mySubArea1.html',
        controller: function($scope) {
            //controller for your sub area.
        }
    };
});
  • 9
    Мне больше нравится решение ProLoser, мы делаем что-то подобное в нашем приложении, и оно работает нормально. Проблема с решением blesh заключается в том, что код контроллера входит в директивы. Обычно контроллер, который вы указываете в директиве, это тот, который тесно работает с директивой для ex: ngModelCtrl, которая работает в тесной связи с входными и другими директивами. В вашем случае помещение кода контроллера в директиву было бы запахом кода, на самом деле это независимый контроллер.
  • 0
    @bsh, хорошо! Это кажется действительно хорошим объяснением, но, как хороший программист JS и новичок в AngularJS, я могу это хорошо уловить ... Мне и сообществу очень понравится ссылка JSFiddle на рабочий образец, использующий этот подход. Разобраться в этом будет легко для понимания! :) Спасибо
Показать ещё 3 комментария
204

ОБНОВЛЕНИЕ: Просмотрите новый проект AngularUI для решения этой проблемы


В подразделах это так же просто, как использование строк в ng-include:

<ul id="subNav">
  <li><a ng-click="subPage='section1/subpage1.htm'">Sub Page 1</a></li>
  <li><a ng-click="subPage='section1/subpage2.htm'">Sub Page 2</a></li>
  <li><a ng-click="subPage='section1/subpage3.htm'">Sub Page 3</a></li>
</ul>
<ng-include src="subPage"></ng-include>

Или вы можете создать объект в случае, если у вас есть ссылки на вспомогательные страницы повсюду:

$scope.pages = { page1: 'section1/subpage1.htm', ... };
<ul id="subNav">
  <li><a ng-click="subPage='page1'">Sub Page 1</a></li>
  <li><a ng-click="subPage='page2'">Sub Page 2</a></li>
  <li><a ng-click="subPage='page3'">Sub Page 3</a></li>
</ul>
<ng-include src="pages[subPage]"></ng-include>

Или вы даже можете использовать $routeParams

$routeProvider.when('/home', ...);
$routeProvider.when('/home/:tab', ...);
$scope.params = $routeParams;
<ul id="subNav">
  <li><a href="#/home/tab1">Sub Page 1</a></li>
  <li><a href="#/home/tab2">Sub Page 2</a></li>
  <li><a href="#/home/tab3">Sub Page 3</a></li>
</ul>
<ng-include src=" '/home/' + tab + '.html' "></ng-include>

Вы также можете установить ng-контроллер на самый верхний уровень каждого частичного

  • 8
    Мне нравится ваше решение лучше. Я новичок в Angular, и это выглядит гораздо более понятным с того момента, как я вижу сеть до сегодняшнего дня. кто знает, может быть, Blesh использует больше угловой структуры, чтобы сделать это, но кажется, что вы сделали это с меньшим количеством строк кода более разумным способом. Спасибо!
  • 0
    К вашему сведению, ссылка сверху мертва
Показать ещё 11 комментариев
27

Вы можете проверить эту библиотеку для этой же цели:

http://angular-route-segment.com

Он похож на то, что вы ищете, и его гораздо проще использовать, чем ui-router. Из демонстрационного сайта :

JS:

$routeSegmentProvider.

when('/section1',          's1.home').
when('/section1/:id',      's1.itemInfo.overview').
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'}).

HTML верхнего уровня:

<ul>
    <li ng-class="{active: $routeSegment.startsWith('s1')}">
        <a href="/section1">Section 1</a>
    </li>
    <li ng-class="{active: $routeSegment.startsWith('s2')}">
        <a href="/section2">Section 2</a>
    </li>
</ul>
<div id="contents" app-view-segment="0"></div>

Вложенный HTML:

<h4>Section 1</h4>
Section 1 contents.
<div app-view-segment="1"></div>
  • 0
    Артем, твое лучшее решение, которое я нашел на сегодняшний день! Мне нравится тот факт, что вы расширяете угловой маршрут, а не заменяете его, как это делает угловой интерфейс.
17

Я тоже боролся с вложенными представлениями в Angular.

Как только я получил ui-router, я знал, что никогда не вернусь к angular функциям маршрутизации по умолчанию.

Вот пример приложения, в котором используется несколько уровней представления, вложенных

app.config(function ($stateProvider, $urlRouterProvider,$httpProvider) {
// navigate to view1 view by default
$urlRouterProvider.otherwise("/view1");

$stateProvider
    .state('view1', {
        url: '/view1',
        templateUrl: 'partials/view1.html',
        controller: 'view1.MainController'
    })
    .state('view1.nestedViews', {
        url: '/view1',
        views: {
            'childView1': { templateUrl: 'partials/view1.childView1.html' , controller: 'childView1Ctrl'},
            'childView2': { templateUrl: 'partials/view1.childView2.html', controller: 'childView2Ctrl' },
            'childView3': { templateUrl: 'partials/view1.childView3.html', controller: 'childView3Ctrl' }
        }
    })

    .state('view2', {
        url: '/view2',
    })

    .state('view3', {
        url: '/view3',
    })

    .state('view4', {
        url: '/view4',
    });
});

Как видно, есть 4 основных вида (view1, view2, view3, view4), а view1 имеет 3 дочерних представления.

  • 2
    Какова цель введения $httpProvider ? Я не вижу, чтобы это использовалось где-либо.
  • 0
    @Aaron app.config не заканчивается этим фрагментом кода и может быть, $ httpProvider используется где-то еще
4

Вы можете использовать ng-include, чтобы избежать использования вложенных ng-представлений.

http://docs.angularjs.org/api/ng/directive/ngInclude
http://plnkr.co/edit/ngdoc:example-example39@snapshot?p=preview

Моя индексная страница Я использую ng-view. Затем на моих вспомогательных страницах, которые мне нужны для вложенных фреймов. Я использую ng-include. Демонстрация показывает выпадающий список. Я заменил мою ссылку ng-click. В функции я бы поставил $scope.template = $scope.templates [0]; или $scope.template = $scope.templates [1];

$scope.clickToSomePage= function(){
  $scope.template = $scope.templates[0];
};
2

Angular ui-router поддерживает вложенные представления. Я еще не использовал его, но выгляжу очень многообещающе.

http://angular-ui.github.io/ui-router/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню