React JS Training Course Online
- 21k Enrolled Learners
- Weekend
- Live Class
(7200)
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.
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']);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.
