What is the Difference Between $routeProvider and $stateProvider in AngularJS ?
Last Updated :
24 Jul, 2024
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 will explore the $routeProvider and $stateProvider in AngularJS and understand their basic implementation with the help of examples, along with knowing the difference between these two methods
$routeProvider
The $routeProvider is part of the ngRoute module, which is an official AngularJS module used for basic routing in AngularJS applications. It provides a simple and straightforward way to define routes using a configuration object. With $routeProvider, we can specify the URL pattern and associate it with a template and controller, making it a suitable choice for small to medium-sized projects with relatively simple routing requirements.
Syntax
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/routePath', {
templateUrl: 'template.html',
controller: 'ControllerName'
})
.otherwise({
redirectTo: '/defaultPath'
});
});Example: The below example demonstrates the usage of $routeProvider in AngularJS. Here, when the user clicks on the NavBar links, the application renders the associated route page and displays the content accordingly.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<base href="/">
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js">
</script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
nav {
background-color: #333;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline;
margin-right: 20px;
}
li a {
text-decoration: none;
color: #fff;
font-weight: bold;
font-size: 18px;
}
.container {
text-align: center;
margin-top: 20px;
}
h1 {
color: #4CAF50;
font-size: 36px;
}
h3 {
color: #333;
font-size: 24px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#!/">Home</a></li>
<li><a href="#!/about">About</a></li>
</ul>
</nav>
<div ng-view class="container">
</div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "home.html",
})
.when("/about", {
templateUrl: "about.html",
})
.otherwise({
redirectTo: "/"
});
});
</script>
</body>
</html>
<div class="container">
<h1>GeeksforGeeks</h1>
<h3>$routeProvider Example</h3>
<p>
GeeksforGeeks is a technology education
platform offering a wide range of
tutorials and articles on various
programming topics.
</p>
</div>
<div class="container">
<h1>About GeeksforGeeks</h1>
<p>
GeeksforGeeks is a computer science
portal and is known for its quality
content and problem-solving expertise.
We cover a variety of programming
languages, data structures, algorithms,
and more.
</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png"
alt="GeeksforGeeks Logo"
width="300"
height="300" />
</div>
Output
$stateProvider
The $stateProvider is part of the ui-router library, which offers more advanced routing features compared to ngRoute. It allows for complex and nested routing configurations, enabling the creation of State-Based Routing Hierarchies. This is particularly useful for large and complex applications where routes can have multiple views and states. The $stateProvider provides a powerful and flexible way to manage different states of your application, making it a better choice when you need more advanced routing capabilities and state management.
Syntax
var app = angular.module('myApp', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/defaultPath');
$stateProvider
.state('stateName', {
url: '/statePath',
templateUrl: 'template.html',
controller: 'ControllerName'
});
});Example: The below example demonstrates the usage of $stateProvider in AngularJS. Here, we have defined three states ('dsa', 'fullstack', and 'ai') and display content for each state in a <div ui-view> element when the user clicks on the respective images.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<base href="/">
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.22/angular-ui-router.min.js">
</script>
</head>
<body>
<header style="background-color: #ffffff;
text-align: center;
padding: 20px 0;">
<h1 style="color: green;
font-size: 40px;
margin: 0;">
Welcome to GeeksforGeeks
</h1>
<h3 style="color: rgb(0, 0, 0);
font-size: 34px;">
$stateProvider Example
</h3>
</header>
<nav style="text-align: center;">
<div class="image-link" ui-sref="dsa"
style="display: inline-block;
margin: 20px;
cursor: pointer;
background-color: #fff;
border-radius: 10px;
transition: transform 0.2s;">
<img src=
"https://media.geeksforgeeks.org/img-practice/banner/dsa-to-development-coding-guide-thumbnail.png?v=19659"
alt="DSA"
style="width: 300px;
height: 200px;
border: 3px solid #4CAF50;
border-radius: 10px;">
<p style="color: rgb(0, 0, 0);
font-size: 20px;
padding: 10px;">
Data Structures and Algorithms
</p>
</div>
<div class="image-link"
ui-sref="fullstack"
style="display: inline-block;
margin: 20px;
cursor: pointer;
background-color: #fff;
border-radius: 10px;
transition: transform 0.2s;">
<img src=
"https://media.geeksforgeeks.org/img-practice/banner/full-stack-node-thumbnail.png?v=19659"
alt="Full Stack"
style="width: 300px; height:
200px; border: 3px solid #4CAF50;
border-radius: 10px;">
<p style="color: rgb(0, 0, 0);
font-size: 20px;
padding: 10px;">
Full Stack Development
</p>
</div>
<div class="image-link"
ui-sref="ai"
style="display: inline-block;
margin: 20px;
cursor: pointer;
background-color: #fff;
border-radius: 10px;
transition: transform 0.2s;">
<img src=
"https://media.geeksforgeeks.org/img-practice/banner/gate-data-science-and-artificial-intelligence-da-2024-thumbnail.png?v=19659"
alt="AI"
style="width: 300px;
height: 200px;
border: 3px solid #4CAF50;
border-radius: 10px;">
<p style="color: rgb(0, 0, 0);
font-size: 20px;
padding: 10px;">
Artificial Intelligence
</p>
</div>
</nav>
<div ui-view class="content"
style="background-color: rgb(147, 251, 152);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);">
</div>
<script>
var app = angular.module("myApp", ["ui.router"]);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('dsa', {
url: '/dsa',
template:
'<h1>Data Structures and Algorithms</h1>'+
'<p>This program is designed to take you'+
' on a transformative journey from mastering'+
' Data Structures and Algorithms (DSA) to '+
'becoming a proficient developer. Whether'+
'you aspire to become a full-stack developer'+
' or specialize in a specific technology stack, '+
'this program provides the essential building '+
'blocks for your coding journey starting right'+
' from basic programming to building applications.</p>'
})
.state('fullstack', {
url: '/fullstack',
template:
'<h1>Full Stack Development</h1>'+
'<p>Looking to become a full-stack developer?;'+
' This live, online course with a focus on the '+
'popular JS library React for front-end and Node.js'+
' for back-end along with APIs and deployment is'+
' a must-have program for any aspiring developer.</p>'
})
.state('ai', {
url: '/ai',
template:
'<h1>Artificial Intelligence</h1>'+
'<p>Unlock success with our GATE Data Science'+
' and Artificial Intelligence 2024. Specially '+
'curated by experts, our courses in Machine Learning'+
' and Artificial Intelligence are your gateway to'+
' academic excellence. Fast-track your career and '+
'unleash your potential - Enroll now!</p>'
});
});
</script>
</body>
</html>
Output:
Difference between $routeProvider and $stateProvider
Basis | $routeProvider | $stateProvider |
|---|
| AngularJS Module Dependency | This method implements the ngRoute as a dependency. | This method implements the ui.router as a dependency. |
|---|
| URL Path | URL path is set directly in the when method. | URL path is set using the URL property within the state method. |
|---|
| Template URL | templateUrl property specifies the HTML template for the route. | template property specifies the HTML template for the state. |
|---|
| Controller | controller property specifies the controller for the route. | controller property specifies the controller for the state. |
|---|
| Nested Views and States | Not natively supported. | Fully supports nested views and states for complex applications. |
|---|
Similar Reads
What is the Difference Between Promises and Observables in Angular ?
Angular is a TypeScript-based Single-Page Application framework used to create dynamic and responsive web applications. It is one of the most popular and robust frameworks. One of its key features is to handle Asynchronous Operations effectively. In Asynchronous, code is not executed sequentially ra
5 min read
What is the difference between $watch and $observe in AngularJS ?
AngularJS provides different methods to observe/watch the changes in its elements and variables. The $observe and $watch are two different methods that serve this purpose. $observe is a method that is responsible to observe/watch the changes in the DOM attribute. We use $observe when we want to obse
3 min read
What is the Difference Between factory and service in AngularJS ?
AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. In this article, we will explore the differences between t
4 min read
What is the Difference Between required and ng-required in AngularJS ?
In web application development, AngularJS is one of the most favorite dynamic JavaScript frameworks that has HTML through script tags, enabling us to augment the HTML attributes using the directives and facilitating the data binding through the expressions. In AngularJS, we can use certain Directive
4 min read
What is the difference between Service Directive and Module in Angular ?
Angular is a Typescript framework used to build dynamic and Single-Page Applications. This has a strong focus on modularity and reusability of code which helps in creating complex and maintainable applications. At the core, Angular has 3 fundamental building blocks, i.e., Service, Directive and Modu
6 min read
What Is Difference Between Style And StyleUrl In Angular?
When you create a component in Angular, you sometimes want to style it to look good and match your application's design. Angular provides two ways to add styles to a component: style and styleUrls. They might look similar but they have different purposes. We know that the decorator functions of @Com
5 min read
What's the difference between ng-pristine and ng-dirty in AngularJS ?
AngularJS supports client-side form validation. AngularJS keeps track of all the form and input fields and it also stores the information about whether anyone has touched or modified the field or not. The two different classes ng-dirty and ng-pristine that are used for form validation, are described
2 min read
What is the difference between '@' and '=' in directive scope in AngularJS ?
AngularJS is a popular JavaScript framework, that provides powerful features for building dynamic web applications. When creating custom directives in AngularJS, you may come across the need to define a scope for your directive. The two most common methods to do this are by using the @ and = symbols
4 min read
Difference between views and templateUrl in AngularJS
In this article, we will see what is Views and TemplateUrl in AngularJS, along with understanding their basic usage through the code snippets & finally see some differences between them. A Views is anything that a user sees on a screen and is used to set up multiple views or to target views manu
4 min read
What is the Difference Between $evalAsync and $timeout in AngularJS?
AngularJS is a JavaScript framework, which may be utilized by including it in an HTML web page the usage of a <script> tag. AngularJS enables in extension the HTML attributes with the assistance of directives and binding of data to the HTML with expressions. It provides various tools for handl
5 min read