I'm new to Angular and would appreciate any advice.
Basically, I have one-to-many relationship- one Category has several Product,
I have the layout page where I render different partial views:
<div class="mainContent">
<ng-view></ng-view>
</div>
My first view shows the list of categories, when one of them is clicked, I show the second view, which is separated to two parts: list of categories, and list of products of particular category, schematically it looks like:
My problem is that I cannot figure out how to use another partial for the list of products because want to keep them in separate .html.
I configured routes:
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"
});
});
And controllers:
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 on my first view - category.html, I have the list of categories with hrefs:
<a href="#/category/{{category.id}}">
On the second - categoryDetail.html, I list categories again but with another hrefs:
<a href="#/product/{{category.id}}">
And on the last view - product.html I list the products.
Till now, when I click on category inside categoryDetail.html my product.html renders in mainContent div of the layout, instead - I need it to render as inner partial inside categoryDetail.html. I tried to use <ng-view> again, but this does not seem to be correct.
