AngularJS (44 Blogs) Become a Certified Professional

All You Need to Know About Stateprovider in AngularJS

Published on Sep 13,2019 1.7K 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.

 

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']);

 

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('/');
});

 

 

 

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.

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.

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

Comments
0 Comments

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.