CodesJava

Easy learning with example program codes

Angularjs routing tutorial


AngularJS Routing:

In AngularJS we can create Single Page Application which loads a single HTML page via multiple views i.e. dynamically updates that page as the user interacts with the web app. AngularJS provides ng-view and ng-template directives and $routeProvider services to achieve this.

ng-view directive:

It creates a place holder where a corresponding view (html or ng-template view) can be placed based on the configuration.

<div ng-app = "testApp">
   ...
   <div ng-view></div>
 
</div>

ng-template directive:

It creates an html view using script tag. Its id attribute is used by $routeProvider to map a view with a controller.

<div ng-app = "mainApp">
   ...
 
   <script type = "text/ng-template" id = "addStudent.htm">
      <h2> Add Student </h2>
      {{message}}
   </script>
 
</div>

$routeProvider service:

The $routeProvider service sets the configuration of urls. Map the urls with the corresponding html page or ng-template and attach a controller.

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:

<html>   
   <head>
      <title>AngularJS Routing Example</title>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
   </head>
 
   <body>
      <h2>AngularJS Routing Example</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 = "Add Student page will be used to display add student form";
         });
 
         mainApp.controller('ViewStudentsController', function($scope) {
            $scope.message = "View Students page will be used to display all the students";
         });
 
      </script>
 
   </body>
</html>

Try it:

AngularJS Routing Example on jsbin.com



Industrial Training

We offers Placement Oriented Training on Java, Spring, JSF, Hibernate, PHP, AngularJS, Angular 4, PLSQL, Oracle BI Publisher etc. We also provides Online training, please mail us at hr@codesjava.com.

Development

We also provides the Development services for Website Development , Java Development, PHP Development, Android App Development etc. You can contact us on hr@codesjava.com.

Copyright © 2019 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki