How to user UI router in Angular js Application

Hi, Guys, Today I am telling you that how to use AngularUI Router
AngularUI Router  is basically used for routing in angularjs application. its work like angular ng-route, but AngularUI Router  has more features and power than ngRoute. If you are building a complex and large scale application than I am suggesting you to use UIRouter in your application for flexible routing and nested view.
AngularUI Router is also supports nested views.

Get Started

For use AngularUI router you need angularUi Router script. There are many methods to download script and you can also use cdn.

• via npm: by running $ npm install angular-ui-router from your console
• or via Bower: by running $ bower install angular-ui-router from your console
• or via cdn link to cdn

Include angular-ui-router.js in your index.html and than  Add 'ui.router' to your main module's list of dependencies 

so your index.html will look like following.

I have added  ui-sref directive to manage state transitions. this directive auto generate href attribute for given state.
I have also used ui-view Directive. in this directive our view will be loaded in the ui-veiw.
Now lets create some child templates which will be loaded according to given state in ui-sref.

Finally We use  $stateProvider to set up our states in the module config, as in the following:

In this code I have passed parameters in state which I have initialized in ui-sref. I can define controller and templates also.
Please let me know if you have any trouble in integrating ui-router.

Now see our code in action here

You can also download this code from here
Angular UI router Example Seed