AngularJS (54 Blogs) Become a Certified Professional

All You Need to Know About Stateprovider in AngularJS

Last updated on Sep 14,2023 19.9K Views


Routing is an important aspect that must be kept in mind while creating single-page applications using AngularJS. In this article, we will be familiarising ourselves with the concept of routing by using UI-Router and see how stateprovider in AngularJS works in the following sequence:

 

Methods using Stateprovider in AngularJS

$stateProvider is used to define different states of one route. You can give the state a name, different controller, different view without having to use a direct href to a route. There are different methods that use the concept of $stateprovider in AngularJS.

Angular Logo - stateprovider in angularjs - edureka

So, let’s move on and discuss the different methods.

 

AngularUI Router

The UI-Router is a routing framework built by the AngularUI team for AngularJS. It is used to create routes for AngularJS applications and provides an approach that is different than ngRoute. UI-Router boasts of extra features and proves to be more suitable for complex projects and applications.

Check out the Angular training by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework which is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities. The Angular Certification Training aims at covering all these new concepts around Enterprise Application Development.

Initiating the Project

In this step, we embed the angular files in the head.

<html ng-app="angularRoutingEx">
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script src="https://unpkg.com/@uirouter/angularjs@1.0.19/release/angular-ui-router.min.js"></script>
<script src="app.js"></script>
...
// Navigation Menu
<ul class="uk-nav uk-nav-default">
<li class="uk-active">
<a ui-sref="main">Menu</a>
</li>
<li>
<a ui-sref="main" ui-sref-active="active">Main</a>
</li>
<li>
<a ui-sref="info" ui-sref-active="active">Info</a>
</li>
</ul>
// Content
<ui-view></ui-view>

 

The main logic of our application is present in app.js:

var app = angular.module('angularRoutingEx', ['ui.router']);

Find out our Flutter Course in Top Cities

IndiaOther Countries
Flutter Training in Chennai Flutter Course in Australia
Flutter Course in BangaloreFlutter Course in Canada
Flutter Training in HyderabadFlutter Course in London

Routing

To manage the routing, we need to add $stateProvider. In the code given below, the routing between the main page and the info page is shown.

// app.js
app.config(function($stateProvider, $urlRouterProvider){
var states = [
{
name: 'main',
url: '/',
template: '<h1>This is Main</h1>'
},
{
name: 'info',
url: '/info',
template: '<h1>This is Info</h1>'
}
];
states.forEach((state) => $stateProvider.state(state));
$urlRouterProvider.otherwise('/');
});

 

 

Take your coding skills to the next level with our hands-on Best Web Development course.

Getting params from the URL

In the code given below, the parameter is dynamically populated through {{id}}.

// index.html
<ul class="uk-nav uk-nav-default">
<li class="uk-active">
<a ui-sref="main">Menu</a>
</li>
<li>
<a ui-sref="main" ui-sref-active="active">Main</a>
</li>
<li>
<a ui-sref="info" ui-sref-active="active">Info</a>
</li>
<li>
<a ui-sref="params({id: 1})" ui-sref-active="active">Params</a>
</li>
</ul>


 

To config the routing in app.js, we make usage of ParamsController to get the parameter:

 

// app.js
app.config(function($stateProvider, $urlRouterProvider){
var states = [
{
name: 'main',
url: '/',
template: '<h1>This is Main</h1>'
},
{
name: 'info',
url: '/info',
template: '<h1>This is Info</h1>'
},
{
name: 'params',
url: '/params/{id}',
template: '<h1>Param value: {{ paramId }}</h1>',
controller: function($scope, $stateParams) {
$scope.paramId = $stateParams.id;
}
}
];
states.forEach((state) => $stateProvider.state(state));
$urlRouterProvider.otherwise('/');
});

 

These are some of the concepts that utilize $stateProvider. With, this, we have come to the end of our article.

Join a Flutter Certification Training and learn how to develop high-performance and scalable mobile applications.

Got a question for us? Please mention it in the comments section of “Stateprovider in AngularJS” blog and we will get back to you.

Upcoming Batches For Angular Certification Training Course
Course NameDateDetails
Angular Certification Training Course

Class Starts on 30th March,2024

30th March

SAT&SUN (Weekend Batch)
View Details
Comments
0 Comments

Join the discussion

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

All You Need to Know About Stateprovider in AngularJS

edureka.co