Benim sorum kompleksi ile ilgili nasıl iç içe içerirşablonlar(de denirelimizde) AngularJS bir uygulama.

Durumumu açıklamak için en iyi yolu, benim yarattığım bir görüntü ile

Gördüğünüz gibi bu modeller, iç içe geçmiş bir sürü ile oldukça karmaşık bir uygulama olma potansiyeline sahiptir.

Uygulama, tek sayfa, bir yük yaniindex.htmlng-view öznitelik ile DOM div öğesi içerir.

Daire 1, ng-view uygun şablonları yükler Birincil navigasyon olduğunu göreceksiniz. Ana uygulama modülü $routeParams geçirerek yapıyorum. İşte benim app içinde ne bir örnek:

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

    }]);

Daire 2, ng-view yüklenen şablonu bir ek vardıralt gezinti. Sub-nav bu zaman onun altındaki alana şablonları yüklemek için ihtiyacı var - ama ng-view zaten kullanıldığından, bu yapıyor hakkında gitmek nasıl emin değilim.

1 sayfa içinde ek şablonlar vardır biliyorum, ama bu şablonlar oldukça karmaşık olacak. Uygulamayı güncellemek için daha kolay yapmak ve ana şablon çocukların erişmek için yüklenecek olan bağımlılığı yok etmek için tüm şablonları ayrı tutmak istiyorum.

Daire 3işler daha da karmaşık bir hale görebilirsiniz. Alt-navigasyon şablonlar olacak potansiyel var2-navigasyon altkendi şablonları da içine alan yük gerekirDaire 4

Nasıl onları birbirinden ayrı tutarken şablonları böylesine karmaşık, iç içe geçmiş başa AngularJS uygulaması yapılanma?

GÜNCELLEME:Check out AngularUI's new project to address this problem

Alt dizeleri yararlanarak, ng-alır kadar kolaydır:

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

Bu alt sayfalarına bağlantılar varsa bir nesne oluşturabilirsiniz:

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

Hatta $routeParams kullanabilirsiniz

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

Ayrıca her kısmi en üst düzeyde ng-denetleyici koyabilirsiniz