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 state provider 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, a 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.
Upskill for Higher Salary with Angular Certification Training Course
| Course Name | Upcoming Batches | Fees |
| Angular Certification Training | 11th May,2024 (Weekend Batch) | ₹19,995 |
| Angular Certification Training | 29th June,2024 (Weekend Batch) | ₹19,995 |
AngularUI Router
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.
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
| India | Other Countries |
| Flutter Training in Chennai | Flutter Course in Australia |
| Flutter Course in Bangalore | Flutter Course in Canada |
| Flutter Training in Hyderabad | Flutter 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('/');
});
Learn About
Error in node_modules/rxjs/internal/types.d.ts(90,44): error ts1005: ‘;’ expected
Error in node_modules/rxjs/internal/types.d.ts(90,44): error ts1005: ‘;’ expected
How to download file from assets folder in angular
How to Find All Mat Icons in Angular
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.