Every thing need to know about Angular UI-Rouiter (part 1)



 A state is a “place” in the applicatoin, that corresponds to the overall application UI  and navigation

Often states have some things in common, these commonthings can be identified by state hirarchy.

A Simple state can be defined as follows


Ex :  $stateProvider.state(‘state’,{

Template : ‘<h1>my contacts </h1>’



<!– in index.html –>

<body ng-controller=”MainCtrl”>

<section ui-view></section>



When the state is executed the template is inserted into ui-view.



 State can be activeated in 2 ways

Usig $state.go()

EX:  $state.go(‘contact.detail’)will go to the ‘contact.detail’ state

$state.go(‘^’)will go to a parent state.

$state.go(‘^.sibling’)will go to a sibling state.

$state.go(‘.child’)will go to a child state.

$state.go(‘.child.grandchild’)will go to a grandchild state.


Clicking the link containing ui-sref

<a ui-sref=”home”>Home</a> | <a ui-sref=”about”>About</a>


Navigate to the url associated with it

$stateProvider .state(‘contacts’, {

url: “/contacts”,

templateUrl: ‘contacts.html’







 There are several methods to link the template to states

  1. template configuration property

Ex: $stateProvider.state(‘contacts’, {

template: ‘<h1>My Contacts</h1>’


  1. templateUrl :

Ex: $stateProvider.state(‘contacts’, {

templateUrl: ‘contacts.html’


  1. TemplateUrl can return a function

Ex: $stateProvider.state(‘contacts’, {

templateUrl: function ($stateParams){

return ‘/partials/contacts.’ + $stateParams.filterBy + ‘.html’;



  1. We can user templateProvider

Ex: $stateProvider.state(‘contacts’, {

templateProvider: function ($timeout, $stateParams) {

return $timeout(function () {

return ‘<h1>’ + $stateParams.contactId + ‘</h1>’

}, 100);





 We can attach controller by using the below ways

$stateProvider.state(‘contacts’, {

template: ‘<h1>{{title}}</h1>’,

controller: function($scope){

$scope.title = ‘My Contacts’;




Or if you already have a controller defined on the module, like this:


$stateProvider.state(‘contacts’, {

template: …,

controller: ‘ContactsCtrl’



Alternatively using the “controller as” syntax the above becomes:


$stateProvider.state(‘contacts’, {

template: ‘<h1>{{contact.title}}</h1>’,

controller: function(){

this.title = ‘My Contacts’;


controllerAs: ‘contact’





$stateProvider.state(‘contacts’, {

template: …,

controller: ‘ContactsCtrl as contact’



Or for more advanced needs you can use the controllerProvider to dynamically return a controller function or string for you:


$stateProvider.state(‘contacts’, {

template: …,

controllerProvider: function($stateParams) {

var ctrlName = $stateParams.type + “Controller”;

return ctrlName;





N0TE :

  1. The controller will not be instatiated if the template is not defined
  2. Controllers can use the $scope.$on() method to listen for events fired by state transitions.

About sivateja

I am a professional graduate..I am passionate about Latest Technology.
This entry was posted in angularjs. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s