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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <html ng-app="angularRoutingEx">...<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:
1 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // app.jsapp.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}}.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | // app.jsapp.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.
