Google News
logo
AngularJS Views
The AngularJS views are support Single Page Application (SPA) via multiple views on a single page.  AngularJS dividing the application into different views they are ng-view and ng-template directives and $route services.

ng-view 
The "ng-view" is a directive that complements the $route service into the main layout (index.html or index.php) file.

  ng-template

The AngularJS ng-template directive is used to create an html or php view using script tag. It contains "id" attribute which is used by $routeProvider to map a view with a controller.
<div ng-app="mainApp">
 
   <script type = "text/ng-template" id = "add-student.php">
      <h2> Add Student </h2>
      {{message}}
   </script>
 
</div>    

  $rootProvider

    $routeProvider is defined as a function under config of mainApp module using key as '$routeProvider'.

    $routeProvider.when defines a url "/addStudent" which then is mapped to "add-student.php". add-student.php should be present in the same path as main html or php page. If php page is not defined then ng-template to be used with id="add-student.php". We've used ng-template.

    "otherwise" is used to set the default view.

var mainApp = angular.module("mainApp", ['ngRoute']);
 
mainApp.config(['$routeProvider', function($routeProvider) {
   $routeProvider.
   
   when('/addStudent', {
      templateUrl: 'add-student.php', controller: 'AddStudentController'
   }).
   
   when('/viewStudents', {
      templateUrl: 'view-students.php', controller: 'ViewStudentsController'
   }).
   
   otherwise({
      redirectTo: '/addStudent'
   });
 
}]);
AngularJS Views Example :
<!DOCTYPE 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>Sample Application</h2>
      <div ng-app = "mainApp">
         <p><a href = "#add-student">Add Student</a></p>
         <p><a href = "#view-students">View Students</a></p>
         <div ng-view></div>
         
         <script type = "text/ng-template" id = "add-student.php">
            <h2> Add Student </h2>
            {{message}}
         </script>
         
         <script type = "text/ng-template" id = "view-students.php">
            <h2> View Students </h2>
            {{message}}
         </script>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", ['ngRoute']);
         mainApp.config(['$routeProvider', function($routeProvider) {
            $routeProvider.
            
            when('/add-student', {
               templateUrl: 'add-student.php',
               controller: 'AddStudentController'
            }).
            
            when('/view-students', {
               templateUrl: 'view-students.php',
               controller: 'ViewStudentsController'
            }).
            
            otherwise({
               redirectTo: '/add-student'
            });
         }]);
         
         mainApp.controller('AddStudentController', function($scope) {
            $scope.message = "First Add student details form.";
         });
         
         mainApp.controller('ViewStudentsController', function($scope) {
            $scope.message = "Display all the student details.";
         });
 
      </script>
      
   </body>
</html>
Output :