Teilansichten in AngularJS

Question

Ich bin neu in Angular und würde mich über jeden Rat freuen. Grundsätzlich habe ich eine Eins-zu-viele Beziehungs- ein Category hat mehrere Product, ich die Layoutseite, wo ich verschiedene Teilansichten machen:

<div class="mainContent"> 
    <ng-view></ng-view> 
</div> 

Mein erste Ansicht zeigt die Liste der Kategorien, wenn einer von ihnen angeklickt wird, zeige ich die zweite Ansicht, die zwei Teile getrennt: Liste der Kategorien, und die Liste der Produkte von bestimmten Kategorie, schematisch sieht es so aus:

Mein Problem ist, dass ich nicht herausfinden kann, wie man einen anderen Teil für die Liste der Produkte verwendet, weil sie in separaten .html behalten möchten.

Ich konfigurierte Routen:

app.config(function($routeProvider, $locationProvider) { 
$routeProvider 
    .when('/category', { 
     templateUrl: 'category.html', 
     controller: 'categoryController as catCtrl' 
    }) 
    .when('/category/:id', { 
     templateUrl: 'categoryDetail.html', 
     controller: 'categoryDetailController as catDetailCtrl' 
    })  
    .when('/product/:category_id', { 
     templateUrl: 'product.html', 
     controller: 'productController as productCtrl' 
    }) 
    .otherwise({ 
     redirectTo: "/category" 
    }); 
}); 

und Controller:

app.controller("categoryController", function($http) 
{ 
    var vm = this; 
    vm.categories = somedata; 
}); 
app.controller("categoryDetailController", function($http, $routeParams) 
{ 
    var vm = this; 
    vm.category = somedata;//current category from REST api, using $routeParams.id 
}); 
app.controller("productController", function($http, $routeParams) 
{ 
    var vm = this; 
    vm.products = somedata;//product list of current category using $routeParams.category_id 
}); 

So auf meinem ersten Blick - category.html habe ich die Liste der Kategorien mit hrefs:

<a href="#/category/{{category.id}}"> 

Auf der zweite-categoryDetail.html, Liste I Kategorien wieder, aber mit einem anderen hrefs:

<a href="#/product/{{category.id}}"> 

Und auf der letzten Ansicht - product.html ich die Produkte auflisten.

Bis jetzt, wo ich in categoryDetail.html auf Kategorie meines product.html macht in mainContent div des Layouts, sondern - ich brauche es als inneren Teil categoryDetail.html innen zu machen. Ich habe versucht, wieder <ng-view> zu verwenden, aber das scheint nicht korrekt zu sein.

Answer 1

In AngularJS gibt es mehrere Möglichkeiten für Teiltöne.

ng-umfassen

Wenn Theres keine Logik, oder es wird von übergeordnetem Bereich zur Verfügung gestellt werden, können Sie enthalten nur eine HTML-Datei in Ihre Ansicht.

Beispiel:

<div ng-include="'/path/to/your/file.html'"></div> 

neue Richtlinie

Wenn Sie ein wenig Logik in Ihrem Teil haben werden, und Sie möchten, dass es als separates Modul in Ihrer Anwendung verwenden - ich Ich rate dringend, eine neue Richtlinie zu erstellen.

Example.

PS.Wenn Sie Angular neu sind, kann this nützlich sein :-)