Interesting thing about ui router "resolve"

What is resolve

Many angluar applications use  ui.router. This plugin makes the job of changing views easier and code responsible for view managing - more accurate. Also it makes the view accessible from the  url (deep linking) - which means application users can bookmark the certain view or send it by email.

This post is about one interesting feature of the ui.router (and also ng-router) - the resolve.
You can pass some data to the view when it initiated, by putting the service call into the "resolve" block:

var List  = ['itemsSvc', function(itemsSvc){
  return itemsSvc.get();
}],

$stateProvider
.state('app.items', {
  url: '/items',  views: {
    'tabpanel': {
      templateUrl: 'views/items.html',      
      controller: 'itemsCtrl'    
     }
  },
  resolve:{
    items: List
  }
})

after loading the resolve item can be accessed inside the controller - as any other of injectables:

angular.module('My')
  .controller('ItemsCtrl', function ($scope, items) {
    $scope.list =  items;
    ...

Using resolve ensures that view will not be rendered until the request specified inside the resolve will return back.

You can update the collection cached inside the resolve.
Consider you have following UX scenario:
The "add item" form is located on different  child view:

var List  = ['itemsSvc', function(itemsSvc){
  return itemsSvc.get();
}],

$stateProvider
.state('app.items', {
  url: '/items',  views: {
    'tabpanel': {
      templateUrl: 'views/items.html', 
      controller: 'itemsCtrl'    
    }
  }, 
  resolve:{
    items: List
  }
})
.state('app.items.new', {
  url: '/new',  views: {
    'details@app': {
      templateUrl: 'views/itemForm.html', 
      controller: 'itemCtrl'    
    }
  }
})

After successfully adding new item user should be redirected to the parent list view. But how to make the list view to show the newly added item?

You can do it by updating items collection you get from resolve:

angular.module('My')
  .controller('AddEditItemCtrl', function ($scope, items) {
   $scope.list =  items;
   $scope.add=function(e){

      $scope.newItem = { Id: '111', name:'some item'};
      $scope.list.push(angular.copy($scope.newItem));
      $state.go('app.items')
   };
};

After redirecting to "items" view you will see the new items is already here!