• We Code
  • We Design
  • We Develope
  • We Write
  • We Share


Monday, September 1, 2014

AngularJS ui-router tutorial from scratch - Part 1

AngularJS is very powerful framework and provide the solution for almost every challenge without integrating any outside libraries. Angular UI library is broken in many parts so you can pick the feature and include only that in your angularJS application.
But still we can add libraries and make the angular application more powerful.
ui-router is one of most powerful ui library of the angularJS . Instead for just providing the url route it plays with the state. ui-router provide many extra and more powerful feature. We can have nested views , multiple views on one page or the multiple view wich have common controller .

INSTALLATION : For installing ui-router in your application you can install it through the bower
$ bower install angular-ui-router --save 

and then include the it in your HTML file
<script src="phoneCatApp/bower_components/angular-ui-router/release/angular-ui-router.js" type="text/javascript"></script>   

you can save the source code  from the GITHUB .

For using the ui-route you need to ui-router as a dependency in your module

<html ng-app="phoneCatApp">


<script src="script/angular.js"></script>

<!-- Include the ui-router script -->

<script src="script/angular-ui-router.min.js"></script>


    // ...and add 'ui.router' as a dependency

    var phoneCatApp= angular.module('phoneCatApp', ['ui.router']);






If you used ng -router  then you most probably came across the ng-view directive . So here instead of using the ng-view we use ui-view ,the  views will get change inside this ui-view

<div ng-controller="mainController">

<div ui-view="">



Now we will write the config of the app for routing . It is very simmiler to the ng-route but instead of playing upon $routeProvider we deal with $stateProvider.

.config(function($stateProvider, $urlRouterProvider) {


.state('first', {

url: '/first',

templateUrl: 'template/first.html',

controller :firstController



template  templateUrl and  templateProvider 

 These three are used  for setting the views .You can use any of them according to your needs .

  1. template - template is a  string of HTML content or a function that returns HTML
  2. templateUrl - templateUrl is a  string of a URL path to a template or a function that returns a URL path string
  3. templateProvider - templateProvider is a  function that returns an HTML content string


 controller is used to bind the controller to the view. Which can operate over the view 


 This work very simmiler to the ng-route  but have many upgrades in it .Which we will discuss in future.

How to route ?

1 . ui-sref 

 ui-sref work smiler to the href but it have more capability . It takes the stateName as the the parameter .

<a  ui-sref="first">First</a> 

2 . $state.go

  If you want to change the view from controller then you need to use $state.go . The syntax is

go(to, params, options)

  • $state.go('first') will take it to first state.
  • $state.go('^') - will take it to a parent state
  • $state.go('^.sibling') - will take it to a sibling state
  • $state.go('.child.grandchild') - will take it to grandchild state

This is the first part of ui-router. I will discuss many other parts in next series of it.


Post a Comment