javascript - handlebars - mustache template




Nesting complesso di partial e template (4)

La mia domanda riguarda come affrontare il complesso nidificazione di modelli (chiamati anche partial ) in un'applicazione AngularJS.

Il modo migliore per descrivere la mia situazione è con un'immagine che ho creato:

Come puoi vedere, questo ha il potenziale per essere un'applicazione abbastanza complessa con molti modelli annidati.

L'applicazione è a pagina singola, quindi carica un index.html che contiene un elemento div nel DOM con l'attributo ng-view .

Per il cerchio 1 , si vede che esiste una navigazione principale che carica i modelli appropriati nella ng-view . Lo sto facendo passando $routeParams al modulo dell'app principale. Ecco un esempio di cosa c'è nella mia app:

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

    }]);

Nel cerchio 2 , il modello che viene caricato nella ng-view ha una navigazione secondaria aggiuntiva. Questo sotto-nav deve quindi caricare i modelli nell'area sottostante, ma poiché ng-view è già in uso, non sono sicuro di come procedere.

So che posso includere modelli aggiuntivi all'interno del primo modello, ma questi modelli saranno tutti piuttosto complessi. Vorrei mantenere separati tutti i modelli per rendere l'applicazione più facile da aggiornare e non avere una dipendenza dal modello principale che deve essere caricato per poter accedere ai suoi figli.

Nel cerchio 3 , puoi vedere le cose diventare ancora più complesse. Esiste il potenziale che i modelli di navigazione secondaria abbiano una seconda sotto-navigazione che dovrà caricare i propri modelli anche nell'area del cerchio 4

Come si fa a strutturare un'app AngularJS per gestire un nidificazione così complessa di modelli, pur mantenendoli tutti separati l'uno dall'altro?


AGGIORNAMENTO: github.com/angular-ui/ui-router

Per le sottosezioni è facile come sfruttare le stringhe 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>

Oppure puoi creare un oggetto nel caso in cui tu abbia collegamenti a pagine secondarie dappertutto:

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

O puoi anche usare $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>

Puoi anche mettere un ng-controller al livello più alto di ogni partial


È possibile utilizzare ng-include per evitare l'uso di ng-viste nidificate.

http://docs.angularjs.org/api/ng/directive/ngInclude
http://plnkr.co/edit/ngdoc:[email protected]?p=preview

La mia pagina indice io uso ng-view. Poi sulle mie pagine secondarie che ho bisogno di avere fotogrammi annidati. Io uso ng-include. La demo mostra un menu a discesa. Ho sostituito il mio con un link ng-clic. Nella funzione vorrei inserire $ scope.template = $ scope.templates [0]; o $ scope.template = $ scope.templates [1];

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

Bene, dal momento che al momento è possibile avere solo una direttiva ngView ... Io uso i controlli di direttiva annidati. Ciò ti consente di impostare i modelli e ereditare (o isolare) gli ambiti tra di loro. Al di fuori di questo utilizzo ng-switch o anche solo ng-show per scegliere quali controlli sto visualizzando in base a ciò che proviene da $ routeParams.

EDIT Ecco alcuni esempi di pseudo-codice per darti un'idea di cosa sto parlando. Con una sub-navigazione nidificata.

Ecco la pagina principale dell'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>

Direttiva per la navigazione secondaria

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

modello per la navigazione secondaria

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

modello per una pagina principale (dal nav principale)

<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 per una pagina principale. (dal nav principale)

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

Direttiva per una Sotto-area

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





angularjs