Hello folks! welcome back to a new edition of our tutorial on AngularJS. In this tutorial, we will be studying about AngularJS Views.
AngularJS supports Single Page Application using multiple views on a single page. To do this, ng-view and ng-template directives, and $routeProvider services have been provided by AngularJS.
AngularJS supports Single Page Application using multiple views on a single page. To do this, ng-view and ng-template directives, and $routeProvider services have been provided by AngularJS.
ng-view Directive
The ng-view directive creates a place holder where a corresponding view can be placed based on the configuration.
Syntax
Define a div utilizing 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 services to map a view with a controller.
Syntax
Define a script block with type attribute set to 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>
READ: AngularJS | Ajax
$routeProvider Services
The $routeProvider is a key service which is used to set the configuration of URLs, maps them with the corresponding HTML page or ng-template, and attaches a controller with the same.
Syntax 1
Define a script block with type attribute set to 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>
Syntax 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' }); }]);
Example
The following example below illustrates the use of all the above mentioned directives -
Create a file testAngularJS.html.
Create a file testAngularJS.html.
<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.html in any web browser to see the result -
AngularJS Sample Application
READ: AngularJS | Includes
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we are going to be studying about AngularJS Scopes.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.