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

State:

WHAT IS A STATE:

 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>

</body>

 

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

 

HOW THE STATE ACTIVATED :

 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’

})

 

 

 

 

Templates:

 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);

}

})

 

Controllers: 

 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’

})

 

And

 

$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.
Advertisements

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