AngularJS Views

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.

angularview.html:

<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>

addProduct.htm:

<div>External add product page</div>

viewProducts.htm:

<div>External view product page</div>