React.js Training Course With Certification
- 17k Enrolled Learners
- Weekend
- Live Class
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:
$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.
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.
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 |
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.
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.
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.
Course Name | Date | Details |
---|---|---|
Angular Certification Training Course | Class Starts on 30th March,2024 30th March SAT&SUN (Weekend Batch) | View Details |
edureka.co