AngularJS 1.x ~ UI Router - rohit120582sharma/Documentation GitHub Wiki

It’s a routing framework that allows us to organize our interface by a state machine, rather than a simple URL route.

It provides a different approach than ngRoute in that it changes your application views based on state of the application and not just the route URL.

It supporrts nested views, multiple views on the same page.

• https://github.com/angular-ui/ui-router/wiki/Nested-States-and-Nested-Views
• http://www.ng-newsletter.com/posts/angular-ui-router.html

The basic building block of a UI-Router application is a UI-Router state.

A state is a javascript object which has specific properties. Those properties define the functionality of the application when that state is active.

When a state is activated, its templates are automatically inserted into the ui-view of its parent state's template. If it's a top-level state then its parent template is index.html.

• name – a name for the state, providing a way to refer to the state
• url – what the browser’s URL will be
• views – how the UI will look and behave
• component – it's a bonding of a template with a controller
• params – parameter values that the state requires (such as blog-post-id)
• resolve – the actual data the state requires (often fetched, asynchronously, from the backend using a parameter value)

You can use resolve to provide a controller with data that is custom to the state. resolve is an optional map of dependencies which should be injected into the controller or bound to a component.

If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $stateChangeSuccess event is fired.

The resolve property is a map object. The map object contains key/value pairs of:

• key – {string}: a name of a dependency to be injected into the controller.
• factory - {string|function}:
  • If string, then it is an alias for a service.
  • Otherwise if function, then it is injected and the return value is treated as the dependency. If the result is a promise, it is resolved before the controller is instantiated and its value is injected into the controller.

$stateProvider.state('myState', {
      resolve:{

         // Example using function with simple return value.
         // Since it's not a promise, it resolves immediately.
         simpleObj:  function(){
            return {value: 'simple!'};
         },

         // Example using function with returned promise.
         promiseObj:  function($http){
            // $http returns a promise for the url data
            return $http({method: 'GET', url: '/someUrl'})
               .then (function (data) {
                   return doSomeStuffFirst(data);
               });
         },

         // Example showing returning of custom made promise
         greeting: function($q, $timeout){
             var deferred = $q.defer();
             $timeout(function() {
                 deferred.resolve('Hello!');
             }, 1000);
             return deferred.promise;
         }
      },

      // The controller waits for every one of the above items to be completely resolved before instantiation.
      controller: function($scope, simpleObj, promiseObj, greeting){
          $scope.simple = simpleObj.value;

          // You can be sure that promiseObj is ready to use!
          $scope.items = promiseObj.data.items;

          $scope.greeting = greeting;
      }
   })

There are also optional 'onEnter' and 'onExit' callbacks that get called when a state becomes active and inactive respectively. The callbacks also have access to all the resolved dependencies.

$stateProvider.state("contacts", {
  template: '<h1>{{title}}</h1>',
  resolve: { title: 'My Contacts' },
  controller: function($scope, title){
    $scope.title = title;
  },
  onEnter: function(title){
    if(title){ ... do something ... }
  },
  onExit: function(title){
    if(title){ ... do something ... }
  }
})

States can be nested within each other using 'dot notation' or the parent property with the parent name as string.

You can use dot syntax to infer your hierarchy to the $stateProvider.

$stateProvider
  .state('contacts', {})
  .state('contacts.list', {});

Alternately, you can specify the parent of a state via the parent property.

$stateProvider
  .state('contacts', {})
  .state('list', {
    parent: 'contacts'
  });