React JS Certification Training Course
- 10k Enrolled Learners
- Weekend
- Live Class
(4000)
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.
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/[email protected]/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.
