Sono nuovo per Angular e gradirei qualsiasi consiglio. Fondamentalmente, io ho uno-a-molti al rapporto contrattuale una Category ha diversi Product, Ho la pagina di layout in cui rendo diversi punti di vista parziali:Viste parziali in AngularJS
<div class="mainContent">
<ng-view></ng-view>
</div>
mio prima vista mostra la lista delle categorie, quando uno di loro viene cliccato, mi mostra il secondo vista , che è separata da due parti: elenco delle categorie, e la lista dei prodotti di particolare categoria, schematicamente assomiglia:
Il mio problema è che non riesco a capire come utilizzare un altro parziale per l'elenco dei prodotti perché voglio tenerli in un file .html separato.
ho configurato percorsi:
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"
});
});
e 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
});
Così il mio punto di vista prima - category.html, ho l'elenco delle categorie con HREF:
<a href="#/category/{{category.id}}">
Sul secondo-categoryDetail.html, elenco categorie di nuovo, ma con un altro HREF:
<a href="#/product/{{category.id}}">
E sulla vista ultima - product.html I Elenco dei prodotti.
Fino ad ora, quando clicco su categoria all'interno categoryDetail.html mia product.html rende in mainContent div del layout, invece - ho bisogno di rendere come interno parziale all'interno categoryDetail.html. Ho provato a utilizzare nuovamente <ng-view>, ma questo non sembra essere corretto.
Qualsiasi motivo particolare per cui non stai facendo uso di stati? cioè angolare-ui-router? Inoltre - +1 per l'immagine – Katana24
Hai considerato di utilizzare ngInclude invece di ngView? –
@ Katana24, ho letto che l'ui-router è utilizzato per le app più grandi, il mio è piuttosto piccolo, ma dovrei usare l'ui-router se ho bisogno di cercapersone per l'elenco dei prodotti? –