Is there an equivalent of Angular's ngRoute's "resolve" in ui-router

Question

In ngRoute, I've seen code that passes a resolved value to a controller of a certain state.

The code is:

.config(['$routeProvider', 'securityAuthorizationProvider', function ($routeProvider, securityAuthorizationProvider) {
  $routeProvider.when('/projects', {
    templateUrl:'projects/projects-list.tpl.html',
    controller:'ProjectsViewCtrl',
    resolve:{
      projects:['Projects', function (Projects) {
        //TODO: fetch only for the current user
        return Projects.all();
      }],
      authenticatedUser: securityAuthorizationProvider.requireAuthenticatedUser
    }
  });
}])

I want to do something very similar in ui-router, kind of like this:

...
$stateProvider.
     $state('home', {
          url: '/home',
          templateUrl: 'myhome.html',
          controller: 'HomeCtrl'
     })
     ...

But I'd like to pass HomeCtrl some services that gets data from an API for display in myhome.html.

How can I do that with ui-router?

I came across a nice demo here: https://www.youtube.com/watch?v=QETUuZ27N0w#t=1058 — CodyBugstein, Dec 08 '14 at 09:34

score 3 · Accepted Answer · edited May 23 '17 at 12:21

This is there as well:

Resolve

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

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.

If you want to see that in action check it here:

angular ui-route state parent and resolve (nested resolves) (includes plunker)

A snippet formt hat Q & A, showing that resolve could be even inherited among states:

.state('layout', {
    url: "",
    templateUrl: 'partials/layout.html',
    controller:'LayoutController',
    abstract:true, 
    resolve : {
        result_data: function ($q, $timeout)//,CommonService)
        {
             //return resolve_homepage($q,CommonService)
             var deferred = $q.defer();
             $timeout(function(){
                deferred.resolve("from a parent");
             }, 500);
            return deferred.promise;
        } 
    }
})
.state('homepage', {
    url: "/homepage",
    templateUrl: 'partials/homepage.html',
    parent: 'layout',
    controller:'HomepageController',
    resolve : {
        result_data_child: function ($q, $timeout)//,CommonService)
        {
             //return resolve_homepage($q,CommonService)
             var deferred = $q.defer();
             $timeout(function(){
                deferred.resolve("from a child");
             }, 500);
            return deferred.promise;
        }
    }

Link to working plunker

score 0 · Answer 2 · answered Dec 05 '14 at 07:45

yes same for ui-router

$stateProvider.
     $state('home', {
          url: '/home',
          templateUrl: 'myhome.html',
          controller: 'HomeCtrl',
     resolve:{
       projects:['Projects', function (Projects) {
        //TODO: fetch only for the current user
        return Projects.all();
      }],
      authenticatedUser: securityAuthorizationProvider.requireAuthenticatedUser
    }
     })
 ...

Is there an equivalent of Angular's ngRoute's "resolve" in ui-router

2 Answers2

Resolve