Skip to content
Related Articles

Related Articles

Improve Article

What is the role of $routeProvider in AngularJS?

  • Last Updated : 10 Sep, 2020
Geek Week

Routing is allows us create Single Page Applications.To do this, we use ng-view and ng-template directives, and $routeProvider services.

We use $routeProvider to configure the routes.

The config() takes a function which takes the $routeProvider as parameter and the routing configuration goes inside the function.

$routeProvider is a simple API which which accepts either when() or otherwise() method.

We need to install the ngRoute module.






<html>
   <head>
      <title>GFG</title>
      <script src
       </script>
      <script src
      </script>
   </head>
     
   <body>
        
      <div ng-app = "mainApp">
         <p><a href = "#addStudent">
              Add Student</a></p>
         <p><a href = "#viewStudents">
              Display Student</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> Display Student </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 The Students";
         });
           
         mainApp.controller(
'ViewStudentsController', function($scope) {
            $scope.message = "Display all the students";
         });
      </script>
        
   </body>
</html>

Explanation:

  • $routeProvider is a function under config (mainApp module) using the key as ‘$routeProvider’.
  • $routeProvider.when defines the URL “/addStudent”.
  •  The default view is set by “otherwise”.
  • “controller” is used for the view.

How To Configure The $routeprovider?

The $routeProvider is creates the $route service.

By configuring the $routeProvider before the $route service we can set routes in HTML templates which will be displayed.

The $routeProvider is configured with the help of calls to the when() and otherwise() functions.

when() function takes route path and a JavaScript object as parameters.

otherwise() takes a JavaScript object as parameters.

Syntax to configure the routes in AngularJS:

var app = angular.module("appName", ['ngRoute']);  
 
app.config(function($routeProvider) {  
$routeProvider  
 .when('/1stview', {  
  templateUrl: '1stview.html',  
  controller: 'Controller1'  
 })  
 .when('/view2', {  
  templateUrl: '2ndview.html',  
  controller: 'Controller2'  
 })  
 .otherwise({  
  redirectTo: '/1stview'  
 });  
}); 

Path is the URL after the hash(#) symbol.

Route contains two properties:

  1. templateUrl
  2. controller

The $routeProvider can be used to define the page when the user clicks the link.




<!DOCTYPE html>
<html>
    <script src=
  </script>
    <script src=
   </script>
  
    <body ng-app="myApp">
        <p><a href="#/!"> GFG</a></p>
        <p>Click on the links below.</p>
  
        <a href="#!C">Code 1</a>
        <a href="#!C++">Code 2</a>
  
        <div ng-view></div>
  
        <script>
            var app = angular.module("myApp", ["ngRoute"]);
            app.config(function ($routeProvider) {
                $routeProvider
                    .when("/", {
                        templateUrl: "main.htm",
                    })
                    .when("/C", {
                        templateUrl: "C.htm",
                    })
                    .when("/C++", {
                        templateUrl: "C++.htm",
                    });
            });
        </script>
    </body>
</html>




My Personal Notes arrow_drop_up
Recommended Articles
Page :