Using ng-view and ng-template directives and $routeProvider services you can provide single page application via multiple views on a single page.
ng-view: A place holder where a corresponding view can be placed.
ng-template: Used to create an html view using script tag with the help of “id” attribute.
$routeProvider: Set the configuration of urls and map them with the corresponding html page via attaching controller.
If htm page is not defined then ng-template will be used with id=”addStudent.htm”.
Following example will show the above criteria:
Save the file as angularview.html and run into browser.
<html>
<head>
<title>Angular JS Views</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
</head>
<body>
<h2>Angular JS Views</h2>
<div ng-app="angApp">
<p><a href="#addProduct">Add Product</a></p>
<p><a href="#viewProducts">View Products</a></p>
<div ng-view></div>
<script type="text/ng-template" id="addProduct.htm">
<h2> Add Product </h2>
{{message}}
</script>
<script type="text/ng-template" id="viewProducts.htm">
<h2> View Products </h2>
{{message}}
</script>
</div>
<script>
var angApp = angular.module("angApp", ['ngRoute']);
angApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/addProduct', {
templateUrl: 'addProduct.htm',
controller: 'addProductController'
}).
when('/viewProducts', {
templateUrl: 'viewProducts.htm',
controller: 'viewProductsController'
}).
otherwise({
redirectTo: '/addProduct'
});
}]);
angApp.controller('addProductController', function($scope) {
$scope.message = "Page template for add product form";
});
angApp.controller('viewProductsController', function($scope) {
$scope.message = "Page template for display all products";
});
</script>
</body>
</html> <div>External add product page</div>
<div>External view product page</div>
The coronavirus outbreak has drastically changed the way we live our lives. Yes, that's absolutely…
Sales and marketing teams help attract, convert, and retain customers to ensure an organization’s long-term…
Are you an owner of a small business who’s trying to come up with ways…
Introduction When patients bring me their lab reports, the confusion is almost always the same.…
Are you excited about remodeling your house after a long time? Perhaps if you're planning…
The practice of yoga teaches us to be present, patient and mindful of our decisions.…