Partial views in AngularJS
there are couple ways for partials in AngularJS.
ng-include
If theres no logic, or it will be provided from parent scope you can just include a html file into your view.
Example:
<div ng-include="'/path/to/your/file.html'"></div>
new directive
If you'll have a bit logic in your partial, and you'd like to use it as a separate module in your app - I'll strongly advice to built a new directive.
PS. If you're new to Angular, this may be useful :-)
Related videos on Youtube
Gyuzal R
Updated on September 15, 2022Comments
-
Gyuzal R over 1 year
I'm new to Angular and would appreciate any advice. Basically, I have one-to-many relationship- one
Category
has severalProduct
, 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
myproduct.html
renders inmainContent
div of the layout, instead - I need it to render as inner partial insidecategoryDetail.html
. I tried to use<ng-view>
again, but this does not seem to be correct.-
Katana24Any particular reason why you aren't making use of states? i.e. angular-ui-router? Also - +1 for the image
-
-
Padraic over 6 yearsIt's important to note the double quotes around the single quotes in the case of using
ng-include