”;
AngularJS supports Single Page Application via multiple views on a single page. To do this, AngularJS has provided ng-view and ng-template directives, and $routeProvider services.
ng-view Directive
The ng-view directive simply creates a place holder where a corresponding view (HTML or ng-template view) can be placed based on the configuration.
Usage
Define a div with ng-view within the main module.
<div ng-app = "mainApp"> ... <div ng-view></div> </div>
ng-template Directive
The ng-template directive is used to create an HTML view using script tag. It contains id attribute which is used by $routeProvider to map a view with a controller.
Usage
Define a script block with type as ng-template within the main module.
<div ng-app = "mainApp"> ... <script type = "text/ng-template" id = "addStudent.htm"> <h2> Add Student </h2> {{message}} </script> </div>
$routeProvider Service
The $routeProvider is a key service which sets the configuration of URLs, maps them with the corresponding HTML page or ng-template, and attaches a controller with the same.
Usage 1
Define a script block with type as ng-template within the main module.
<div ng-app = "mainApp"> ... <script type = "text/ng-template" id = "addStudent.htm"> <h2> Add Student </h2> {{message}} </script> </div>
Usage 2
Define a script block with main module and set the routing configuration.
var mainApp = angular.module("mainApp", [''ngRoute'']); mainApp.config([''$routeProvider'', function($routeProvider) { $routeProvider .when(''/addStudent'', { templateUrl: ''addStudent.htm'', controller: ''AddStudentController'' }) .when(''/viewStudents'', { templateUrl: ''viewStudents.htm'', controller: ''ViewStudentsController'' }) .otherwise ({ redirectTo: ''/addStudent'' }); }]);
The following points are important to be considered in the above example −
-
$routeProvider is defined as a function under config of mainApp module using key as ”$routeProvider”.
-
$routeProvider.when defines a URL “/addStudent”, which is mapped to “addStudent.htm”. addStudent.htm should be present in the same path as main HTML page. If the HTML page is not defined, then ng-template needs to be used with id=”addStudent.htm”. We used ng-template.
-
“otherwise” is used to set the default view.
-
“controller” is used to set the corresponding controller for the view.
Example
The following example shows the use of all the above-mentioned directives.
testAngularJS.htm
<html> <head> <title>Angular JS Views</title> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"> </script> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = "mainApp"> <p><a href = "#addStudent">Add Student</a></p> <p><a href = "#viewStudents">View Students</a></p> <div ng-view></div> <script type = "text/ng-template" id = "addStudent.htm"> <h2> Add Student </h2> {{message}} </script> <script type = "text/ng-template" id = "viewStudents.htm"> <h2> View Students </h2> {{message}} </script> </div> <script> var mainApp = angular.module("mainApp", [''ngRoute'']); mainApp.config([''$routeProvider'', function($routeProvider) { $routeProvider .when(''/addStudent'', { templateUrl: ''addStudent.htm'', controller: ''AddStudentController'' }) .when(''/viewStudents'', { templateUrl: ''viewStudents.htm'', controller: ''ViewStudentsController'' }) .otherwise({ redirectTo: ''/addStudent'' }); }]); mainApp.controller(''AddStudentController'', function($scope) { $scope.message = "This page will be used to display add student form"; }); mainApp.controller(''ViewStudentsController'', function($scope) { $scope.message = "This page will be used to display all the students"; }); </script> </body> </html>
Output
Open the file testAngularJS.htm in a web browser and see the result.
”;