What is the role of $routeProvider in AngularJS ?
Last Updated :
21 Apr, 2025
In this article, we will see the role of the $routeProvider in AngularJS, along with understanding the basic implementation through the examples. Routing allows us to 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 that takes the $routeProvider as a parameter and the routing configuration goes inside the function. The $routeProvider is a simple API that accepts either when() or otherwise() method. We need to install the ngRoute module.
Example 1: This example describes the basic usage of the $routeProvider in AngularJS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Detecting the route change in AngularJS
</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 style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Detecting the route change in AngularJS
</h3>
<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.Â
Output: From the output, notice the URL & the content that changes while clicking on the given links:
Â
How To Configure The $routeprovider?
The $routeProvider 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 a parameter.
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'
});
}); Here, Path is the URL after the hash(#) symbol.
The route contains two properties:
Example 2: In this example, the $routeProvider is used to define the page when the user clicks the link.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Detecting the route change in AngularJS
</title>
<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>
</head>
<body ng-app="myApp">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Role of $routeProvider in AngularJS</h3>
<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>
Output: From the output, notice the URL that changes while clicking on the given links:
Â
Similar Reads
What is the purpose of providedIn in Angular services?
When building Angular applications, you'll often need to share data and logic across different components. This is where services come into play. Services are an easy way to encapsulate functionality and make it available wherever it's needed in your app. But as your application grows, managing the
3 min read
Explain the purpose of Router services in Angular.
The Router service in Angular is an important component that enables navigation within our single-page application (SPA). It involves mapping URLs to different components or views within the application and rendering the appropriate content based on the requested URL. When a user interacts with navi
6 min read
What is RouterProvider in React Router ?
The RouterProvider in React Router is similar to the traffic controller of our React apps. It helps us monitor how users move between pages and objects in a single-page application (SPA). Essentially, it’s the backbone of React Router, handling all the routing magic behind the scenes. Table of Conte
5 min read
What is the Purpose of base href Tag in Angular ?
In this article, we will see what is base href tag in Angular, along with understanding their basic implementation with the help of examples. Base href TagThe base href is important for generating correct routes, in -case you are deploying your project in a subfolder. The base href element has the a
2 min read
What is View in AngularJS ?
In AngularJS, the View is what the user can see on the webpage. In an application (as per the user’s choice), the chosen view is displayed. For this purpose, the ng-view directive is used, which allows the application to render the view. Any changes made in the view section of the application are re
7 min read
What is scope in AngularJS ?
In this article, we will see what the scope is in AngularJS and how to use Scope, along with understanding its implementation through the examples. The Scope in AngularJS is the binding part between HTML (view) and JavaScript (controller) and it is a built-in object. It contains application data and
4 min read
What is the Difference Between $routeProvider and $stateProvider in AngularJS ?
In AngularJS, as we create Single-Page Applications, we need to implement the routing of components to view those images without having full page reloads. This can be achieved with the most popular routing methods, i.e., $routeProvider (ngRoute) and $stateProvider (ui-router).In this article, we wil
5 min read
What is Angular Router?
Angular Router is an important feature of the Angular framework that helps you to build rich and interactive single-page applications (SPAs) with multiple views. In this article, we'll learn in detail about Angular Router. PrerequisitesNPM or Node jsBasics of AngularBasics of RoutingCode editor ( e.
5 min read
What is router-outlet in Angular, and where is it used?
In Angular, a router-outlet is a directive that acts as a placeholder in a component's template. It's used to dynamically load different components based on the current URL route. Router-outlet is a crucial part of Angular's routing system, enabling you to build single-page applications where differ
5 min read
What is the use of Angular 2 hashtags in template ?
Angular2 hashtag is a syntax used to declare DOM element as variable and these templates render as an HTML file. #: variable declaration(): event binding[]: property binding[()]: two-way property binding{{}}: interpolation Template reference variables are a little gem that allows getting a lot of ni
1 min read