Post
Ask Question

Learn UI-Routing Series - Part One - Basics

Introduction

In the present scenario, AngularJS is the most trusted framework for the creation of Single Page Applications and for SPA (Single Page Application), and routing is one of the most important aspects. We want to keep our navigation feeling like a normal site and want to load the pages without refreshing the Browser. For this, we have to go through Angular routing i.e. ngRoute method.

Also, find my article to remove hash from URL here.

Overview

Before starting, you must have a basic knowledge about Angular UI.

What is Angular ui-Router?

ui-Router is a routing framework built by Angular UI team. It is different from ngRoute as it changes your views, which are based on the State of the Application and not by route URL.

It provides features such as States, Views, URLs, Parameter, Resolve Data and Transition.

States vs URL Route

Ui-router Applications behaves like a state machine. Let us take an example of an Application in which each feature is a set of the state for the Application. Only one State can be active at one time and the user must navigate from one State to another to activate a typical feature.

Some examples of States might be dashboard, messages, shopping cart or blog entry.

State will be further explained in a future article.

While using ngRoute, one has to write ngInclude or some other methods and this can be confusing to a user. This method is appropriate in top-down view of the Application as all the States, routing and views are handled in on .config().

Sample Application

  • Get UI-Router for AngularJS code, using your preferred mechanism.

    • Using npm: ‘npm install --save angular-ui-router@next’.
    • Using bower- ‘bower install [email protected]’.
    • Download directly from cdnjs.

  • Add the script file references in HTML page in the order given below.
    1. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" type="text/javascript"></script>  
    2. <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js" type="text/javascript"></script>  
    3. <script src="helloworld.js"></script>  

Note

Here, I have used online CDN reference for AngularJS and UI-routerJS. Also, the order of the file must be, as shown above. UiRouter file must be placed after AngularJS file, followed by placing other JS files.

Create Angular module

Add Angular module in helloworld.js

  1. var myApp = angular.module('helloworld', ['ui.router']);   

Here, we have added dependency for ui-router in our main module ‘helloworld’.

Creating State

State is a basic building-block for UI-Router Application. This script object is a simple object definition of State definition. 

  1. var helloState = {  
  2.     name: 'hello',  
  3.     url: '/hello',  
  4.     template: '<h3>hello world!</h3>'  
  5.   }   

This State definition has 3 properties, which are given below.

  • name
    The name of State. In this case, it is named hello

  • URL
    When the State is active, the Browser's URL will be /hello.

  • template
    The template, which is to be rendered when State is active will be loaded in the ViewPort.

Register States

Create another State ‘about’. Register both the $stateProvider in .config() block.

Because $stateProvider is an Angular Provider, you must inject it into a .config() block using the code. 

  1. myApp.config(function($stateProvider) {  
  2.   var helloState = {  
  3.     name: 'hello',  
  4.     url: '/hello',  
  5.     template: '<h3>hello world!</h3>'  
  6.   }  
  7.     
  8.   var aboutState = {  
  9.     name: 'about',  
  10.     url: '/about',  
  11.     template: '<h3>Its the UI-Router hello world app!</h3>'  
  12.   }  
  13.     
  14.   $stateProvider.state(helloState);  
  15.   $stateProvider.state(aboutState);  
  16. });   

ViewPort

Add <ui-view> tag i.e. ViewPort in your HTML file. The <ui-view> tag is a ui-router ViewPort. Whenever the State is activated, the State’s view i.e. template will be loaded in the ViewPort.

  1. <body ng-app="helloworld">   
  2.     <ui-view></ui-view>  
  3. </body>  

Links

Add some <ui-href> tag to show the links. When clicked, the links will be active in a State.

  1. <body ng-app="helloworld">  
  2.   <a ui-sref="hello" ui-sref-active="active">Hello</a>  
  3.   <a ui-sref="about" ui-sref-active="active">About</a>  
  4.     
  5.   <ui-view></ui-view>  
  6. </body>  

A ui-sref is a Directive, which behaves similar to HTML href. Instead of referencing a URL like HREF, it references a State and ui-sref Directive automatically builds a href attribute (<a href=...></a>), which is based on your State’s URL.

Active link

Add <ui-sref-active="active"> tag to the ui-sref links. This Directive will add the active CSS class to the link when the target State is active.

  1. <a ui-sref="hello" ui-sref-active="active">Hello</a>  
  2. <a ui-sref="about" ui-sref-active="active">About</a>  

Finally, add the style tag and the active class to style the active link as Red and bold.

Conclusion

Hence, we have created a simple demo for routing with UI-Router. In the next part, we will cover UI-Router States in detail.


Similar Articles