AngularJS Views

AngularJS Scopes

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.


<title>Angular JS Views</title>
<script src=""></script>
<script src=""></script>
<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>
<script type="text/ng-template" id="viewProducts.htm">
<h2> View Products </h2>

var angApp = angular.module("angApp", ['ngRoute']);
function($routeProvider) {
when('/addProduct', {
templateUrl: 'addProduct.htm',
controller: 'addProductController'
when('/viewProducts', {
templateUrl: 'viewProducts.htm',
controller: 'viewProductsController'
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";


<div>External add product page</div>


<div>External view product page</div>

For any types of queries, you can contact us on

You may like:  AngularJS custom directives

Leave a Reply

Your email address will not be published. Required fields are marked *