Komplexe Verschachtelung von Teilbereichen und Vorlagen

Question

Meine Frage bezieht sich auf den Umgang mit komplexen Verschachtelungen von Vorlagen (auch genannt Teilbereiche ) in einer AngularJS-Anwendung.

Meine Situation lässt sich am besten mit einem Bild beschreiben, das ich geschaffen habe:

Wie Sie sehen können, kann dies eine ziemlich komplexe Anwendung mit vielen verschachtelten Modellen werden.

Die Anwendung ist einseitig, d.h. sie lädt eine index.html die ein div-Element im DOM mit der Eigenschaft ng-view Attribut.

Für Kreis 1 Sie sehen, dass es eine primäre Navigation gibt, die die entsprechenden Vorlagen in die Datenbank lädt. ng-view . Ich tue dies, indem ich die $routeParams zum Hauptmodul der Anwendung. Hier ist ein Beispiel dafür, was in meiner App enthalten ist:

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' })       

    }]);

Im Kreis 2 ist die Vorlage, die in die Datei ng-view hat eine zusätzliche Unternavigation . Dieses Sub-Navi muss dann Vorlagen in den Bereich darunter laden - aber da ng-view bereits verwendet wird, bin ich nicht sicher, wie man über dies zu tun gehen.

Ich weiß, dass ich zusätzliche Vorlagen in die erste Vorlage aufnehmen kann, aber diese Vorlagen werden alle ziemlich komplex sein. Ich möchte alle Vorlagen getrennt halten, damit die Anwendung leichter zu aktualisieren ist und keine Abhängigkeit von der übergeordneten Vorlage besteht, die geladen werden muss, um auf ihre Kinder zugreifen zu können.

Im Kreis 3 können Sie sehen, dass die Dinge noch komplexer werden. Es besteht die Möglichkeit, dass die Subnavigationsvorlagen eine 2. Unternavigation die ihre eigenen Vorlagen ebenfalls in den Bereich in Kreis 4

Wie kann man eine AngularJS-Anwendung so strukturieren, dass sie mit solch komplexen Verschachtelungen von Templates umgehen kann, während sie alle voneinander getrennt bleiben?

Answer 1

UPDATE: Schauen Sie sich das neue Projekt von AngularUI an, um dieses Problem zu lösen

---

Für Unterabschnitte ist es so einfach wie die Nutzung von Strings in 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>

Oder Sie können ein Objekt erstellen, wenn Sie überall Links zu Unterseiten haben:

$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>

Oder Sie können auch $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>

Sie können auch einen ng-Controller auf der obersten Ebene jedes Teilbereichs einfügen

Answer 2

Nun, da Sie derzeit nur eine ngView-Richtlinie haben können... Ich verwende verschachtelte Direktivensteuerungen. Dies ermöglicht es Ihnen, Templating einzurichten und zu erben (oder isolieren) Bereiche unter ihnen. Außerhalb der, dass ich ng-switch oder sogar nur ng-show verwenden, um zu wählen, welche Steuerelemente ich anzeigen, basierend auf was kommt in von $routeParams.

EDITAR Hier ist ein Beispiel für Pseudocode, damit Sie eine Vorstellung davon bekommen, wovon ich spreche. Mit einer verschachtelten Subnavigation.

Hier ist die Hauptseite der App

<!-- 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>

Richtlinie für die Unternavigation

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

Vorlage für die Subnavigation

<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>

Vorlage für eine Hauptseite (von der Hauptnavigation)

<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>

Controller für eine Hauptseite. (von der primären Navigation)

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

Richtlinie für einen Teilbereich

app.directive('mySubArea1', function(){
    return {
        restrict: 'E',
        templateUrl: 'mySubArea1.html',
        controller: function($scope) {
            //controller for your sub area.
        }
    };
});

Answer 3

Sie können diese Bibliothek auch für den gleichen Zweck ausleihen:

http://angular-route-segment.com

Es sieht aus wie das, was Sie suchen, und es ist viel einfacher zu bedienen als ui-router. Von der Demo-Seite :

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 der obersten Ebene:

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

Verschachteltes HTML:

<h4>Section 1</h4>
Section 1 contents.
<div app-view-segment="1"></div>

Answer 4

Ich war auch mit verschachtelten Ansichten in Angular kämpfen.

Als ich einmal in den Besitz von ui-router Ich wusste, dass ich nie wieder zur Standard-Routing-Funktion von Angular zurückkehren würde.

Hier ist eine Beispielanwendung, die mehrere Ebenen der Verschachtelung von Ansichten verwendet

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',
    });
});

Wie Sie sehen können, gibt es 4 Hauptansichten (Ansicht1, Ansicht2, Ansicht3, Ansicht4) und Ansicht1 hat 3 untergeordnete Ansichten.

Answer 5

Sie können ng-include verwenden, um die Verwendung verschachtelter ng-Ansichten zu vermeiden.

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

Meine Index-Seite verwende ich ng-view. Dann auf meine Unterseiten, die ich brauche, um verschachtelte Frames haben. Ich verwende ng-include. Die Demo zeigt ein Dropdown. Ich ersetzte meine mit einem Link ng-click. In der Funktion würde ich $scope.template = $scope.templates[0]; oder $scope.template = $scope.templates[1] setzen;

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