How do we work with UI-Router in AngularJS

Question

I want to know what are the steps to be followed in order to work with UI-Router in AngularJS?

Answer 1

Hello @kartik,

 As you know Ui-Router is more flexible and provide more features than ngRouter, so there is a bit different in working with UI-Router for which you can follow the steps below:

1. Include Ui-Router module.

    

2. Use UI-Router as module dependency.

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

 3.Use $stateProvider to configure state and routes like:

       3.1 states

       3.2 Routinh URL(Location)

       3.3 Views 

       3.4 Controller associated with views

       3.5 Nested views/states

 4. Declare ui-view in order to inject(hold) the content(view). You can have multiple ui-view or nested view

      <div ng-view>

       </div>