Menu
I wish to create a single html file with multiple tags. These should act as separate individual views that are usually kept in partials folder. And then i wish to specify them in routing controller. For now i am doing as follows: app.js
angular.module('productapp', []). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/productapp', {templateUrl: 'partials/productList.html', controller: productsCtrl}). when('/productapp/:productId', {templateUrl: 'partials/edit.html', controller: editCtrl}). otherwise({redirectTo: '/productapp'}); }], ['$locationProvider', function($locationProvider) { $locationProvider.html5Mode = true; }]); index.html
<!DOCTYPE html> <html ng-app = "productapp"> <head> <title>Search form with AngualrJS</title> <script src="../angular-1.0.1.min.js"></script> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="js/products.js"></script> <script src="js/app.js"></script> </head> <body> <div ng-view></div> </body> </html> in partials folder: i have 2 html views named edit.html and productlist.html
instead of creating these 2 files i wish combine them into one in separate and call them (the divs) through routing. How do i do this?
552
You could use ng-switch to conditionally render your productList with an include, depending on the route parameters.
Try this in your config:
angular.module('productapp', []) .config(['$routeProvider', function($routeProvider) { $routeProvider .when('/productapp', {templateUrl: 'partials/productList.html', controller: productsCtrl}) .when('/productapp/:productId', {templateUrl: 'partials/productList.html', controller: productsCtrl}) .otherwise({redirectTo: '/productapp'}); And in your controller:
function productsCtrl($scope, $routeParams) { $scope.productId = $routeParams.productId; } And in your html:
<...productListHtml...> <div ng-switch="productId != null"> <div ng-switch-when="true" ng-include="'partials/product.html'"> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
