Dj Techblog

A blog on web development

State based routing with ui-router for single page angular-js web application

Last modified on Jan 15, 2021
State based routing using ui-router in single page web application
A single page angular web application is more or less like a state machine in which application state shifts from one to another. This transition in the state is triggered by the user activity.

A state in an angularjs web application is like a web-page in multiple page traditional websites. In multipage websites user is redirected from one page to another but in single page angular web application state transtion occurs. This is called state based routing which helps application to change its view component without even reloading or redirecting the current webpage. Since user is never redirected to another page but all changes are brought in by the state transition in a single webpage only, it is also called a single web page application.

Also read, Angular web-application with ng-click AngularJS directive to create Like/Dislike Button

The ui-router is the module which must be included as a dependency for state based routing within a web application. This main module conatains different sub modules which is automatically included in the application along with main module.

              
  var routerApp = angular.module('routerApp', ['ui.router']);
  routerApp.config(function($stateProvider, $urlRouterProvider) {
  
  //HANDLE UNDEFINED STATE USING OTHERWISE METHOD 
  $urlRouterProvider.otherwise('/home');
  
  $stateProvider
      
      // HOME STATES 
      .state('home', {
          url: '/home',
          templateUrl: 'partial-home.html'
      })
      .state('about', {
          url: '/about',
          templateUrl: 'partial-about.html'
      })
      .state('contact-us', {
          url: '/contact-us',
          templateUrl: 'contact-us.html'
      })        

      .state('products.g3', {
          url: '/motorola-g3',
          views: {
              '': {  templateUrl: 'motorola-g3.html'},
              'columnThree@products':{
                  templateUrl: 'motorola-g3.html',
                  controller: 'mobilesController'
              }
          }
        
      })
      .state('products.g4', {
          url: '/motorola-g4',
          views: {
              '': {  templateUrl: 'motorola-g4.html'},
              'columnThree@products':{
                  templateUrl: 'motorola-g4.html',
                  controller: 'mobilesController'
              }
          }
        
      })
      .state('products.e4', {
          url: '/motorola-e4',
          views: {
              '': {  templateUrl: 'motorola-e4.html'},
              'columnThree@products':{
                  templateUrl: 'motorola-e4.html',
                  controller: 'mobilesController'
              }
          }
        
      })

      // PRODUCTS PAGE AND NESTED VIEWS
      .state('products', {
          url: '/products',
          views: {
              '': { templateUrl: 'products.html' },
              'columnTwo@products': { template: 'Click on the model to view the mobile.' },
              'columnOne@products': { 
                  templateUrl: 'table-data.html',
                  controller: 'mobilesController'
              }
          }
          
      });
      
              });
          
The ui-router contains different directives, but here we will discuss only the two which is needed to build a basic single page application with state based routing.

  • ui-sref
  • ui-view


The ui-sref directive maps the href link(<a> tag) to an application state. It is defined using ui-sref="string", where string is the application state. The directive will automatically generate & update the href attribute via the $state.href() method. Clicking the link will trigger a state routing within the aplication. Here $state is a service provided by the ui-router, responsible for representing states as well as transitioning between them.

            
        <li ui-sref-active="active"><a ui-sref="home">Home</a></li>
        <li ui-sref-active="active"><a ui-sref="about">About Us</a></li>
        <li ui-sref-active="active"><a ui-sref="products">Products</a></li>
        <li ui-sref-active="active"><a ui-sref="contact-us">Contact Us</a></li>
    


ui-sref-active another directive working along with ui-sref which adds classes to a link element when certain link is active and removes it when inavtive.

A ui-view is a viewport component provided by ui-router. When a state is activated, its corresponding template is rendered into the appropriate viewport. So, basically every link within an angular application is associated with a state and for every state there is a view component. Clicking on the link will activate the state transition which in turn will bring the appropriate view component into the application window.

  <div class="container">
  <div ui-view></div>
  </div>
          


Also read, Build single page web application in AngularJS with state bases routing

Want to see a demo?    
If you face any issue while implementing the code, you can mail me. Thanks for patient reading.
If you like this article, share with your friends. It will inspire me to write more.

Published on Jan 15, 2021

Intro

Debabratta Jena

I mainly write about HTML5, CSS3, Javascript, Angular JS, Ajax, PHP, Mysql, On page SEO, Google Ads, Tag manager, Universal Analytics, Google My Business, SERP, Apache server configuration etc, Yoga is my passion.

Reach to me in the contact us form below

Follow me on

Contact us

Subscribe

Tags

Php HTML5 Javascript CSS Ajax Angular JS Google My bisiness Listing Google tag Manager Google Universal Analytics Search Engine Optimization On page SEO Off page SEO Google Marketing platform Digital Marketing Google Ads Mysql Apache Server