AngularJS framework is a best way to create single page applications. In our application routing is an important concept and when it comes to a single page application we need to ensure that UI-Routing should behave like navigation.
Different Types of Routing
We can do routing in AngularJS by two ways,
- ng Route method
- UI-Router method
Let’s understand how UI-Router method is different from normal ng-Route method.
Overview – UI Router
AngularJS provides a UI Routing inbuilt within the framework. UI Router approach is different from the normal ng-Route method where navigation of application is based on route URL. In UI Route navigation of application is based on the State of the application.
We have to think user action as state to implement UI-Route State Management approach. In Navigation Menu each link is a state, Subscribe button click can be a state; Modal Pop-up in our application can be a state.
Understand UI-Route Implementation
Let’s start with creating a small application, and configure UI-Route for our Navigation Menu. In UI-Router we link to a State not to a URL.
Files required,
- Index.html
- jquery.min.js
- angular.min.js
- angular-ui-router.min.js
- app.js
Create Index file.
Create a HTML file; I have my file named – index.html. In my index file I will be having header with navigation menu.
<!doctype html>
<html>
<head>
<title>State provider and Ui-Router example </title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<header>
<nav><ul>
<li><a ui-sref="home" ui-sref-active="active">Home</a></li>
<li><a ui-sref="about" ui-sref-active="active">About</a></li>
<li><a ui-sref="services" ui-sref-active="active">Services</a></li>
<li><a ui-sref="contact" ui-sref-active="active">Contact</a></li>
</ul> </nav>
</header>
</body>
</html>
Apart from our regular AngularJS files, we need app.js to define the UI-route configurations.
<a ui-sref="home">Home</a>
Notice how the above code will be changed in our browser, and href will be generated with a URL value.
<a href="/ home" ui-sref="home">Home</a>
Configure State in Angular app
We will be configuring the states required for our application in app.js. We should remember that we are configuring STATES not with URL.
Let’s create a Navigation Menu; we have 4 navigation links – Home, About, Services and Contact. In this scenario each link will be a state.
In our app.js you will be able to understand how states are mapped for each navigation link.
// app.js
var routerApp = angular.module('stateRouterApp', ['ui.router']);
'stateRouterApp'.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: index.html'
})
.state('about', { //nested link in home page
url: '/about,
templateUrl: ‘/about.html’
})
.state('services', { //nested link in home page
url: '/ services’,
templateUrl: ‘/services.html’
})
.state('contact', { //nested link in home page
url: '/ contact’,
templateUrl: ‘/contact.html’
})
Understanding the parameters of app.js UI-Route,
state('home') – State parameter is mapped in navigation link using ui-sref="home"
url: '/index’ - URL parameter is a URL which will be changed in anchor link ‘href’ attribute.
templateUrl: ‘/home.html’ – templateUrl parameter is a important parameter which will provide the actual content for each state.
Inject Angular App in Page
We have to inject the state content when we click on each navigation link, which can achieved using below tag,
Ui-view - <div ui-view></div>.
We will be using ui-view instead of ng-route - <div ng-view></div>
<body ng-app="stateRouterApp" >
<header>
<nav><ul>
<li><a ui-sref="home" ui-sref-active="active">Home</a></li>
<li><a ui-sref="about" ui-sref-active="active">About</a></li>
<li><a ui-sref="services" ui-sref-active="active">Services</a></li>
<li><a ui-sref="contact" ui-sref-active="active">Contact</a></li>
</ul> </nav>
</header>
<div class="container">
<!—Our content will be injected below -->
<div ui-view></div>
</div>
When we click on each navigation link (Home, About, Services, Contact) relevant content will be loaded in ‘<div ui-view></div>’.
Wrapping up
So we understand UI-Router works with states not with URL. This will help you to build better AngularJS applications. If you have a moment, please share your feedback/comments or any queries about UI-Router.
I will be sharing more articles on advantages of Staterpovider in AngularJS ,
- URL Parameters with States
- Classes Based on Current State
- Creating Modal Pop-up
- Multiple Views
To Know more about the AngularJS Course, Visit our Main Website - Best AngularJS Training
Hey Gopi,
ReplyDeleteThank you! Thank you! Thank you! Your blog was a total game changer!
I have biggest confusion to choose my career.
any help me ..
i'm a new to asp.net mvc development.
I have some questions regarding that.
1.Use of Entity Framework.?
2.Why do use jquery .?
3.AngularJS Development.?
Can anyone suggest a couple of example.?
Very useful article, if I run into challenges along the way, I will share them here.
Many Thanks,
what are the differences between $stateProvider and $urlRouterProvider ?
ReplyDeletewhat is the use of directive "ui-sref-active" ?
ReplyDeletewhat is the use of directive "ui-sref-active" ?
ReplyDeletewhat are the differences between $stateProvider and $urlRouterProvider ?
ReplyDelete