What is the role of $routeProvider in AngularJS?

23 May, 2022
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  accepts either when() or otherwise() method.
We need to install the ngRoute module.
html
<html>   <head>      <title>GFG</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>             <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>
output
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:
templateUrlcontroller
templateUrl
controller
The $routeProvider can be used to define the page when the user clicks the link.
html
<!DOCTYPE html><html>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">  </script>    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js">   </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>
sweetyty
AngularJS-Misc
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Routing in Angular 9/10
Angular PrimeNG Dropdown Component
Angular 10 (blur) Event
How to make a Bootstrap Modal Popup in Angular 9/8 ?
How to create module with Routing in Angular 9 ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?