Thursday, 26 January 2017

AngularJS – State Management using State Providers



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

No comments:

Post a Comment