AngularJs controller resolve dependency

Question

I'm having trouble with this way of resolving multiple parameters in a modal controller such as:

controller   : 'MyController',
controllerAs : 'vm',
resolve      : {
  resolveInfo : function(REST){
     var resolveInfo = {}
     return REST.doGet('/things/').then(
      function(thingsResponse){
        resolveInfo.things = thingsResponse.data;
        return REST.doGet('/stuff1/' + '/mystuff/' + resolveInfo.things[0].id).then(
          function(stuff1Response){
            resolveInfo.stuff1 = stuff1Response.data;
            return REST.doGet('/stuff2/' + '/mystuff/' + resolveInfo.stuff1[0] + '/' + resolveInfo.things[0].id).then(
              function(stuff2Response){
                resolveInfo.stuff2 = stuff2Response.data;
                return resolveInfo;
              }
            );
          }
        );    
      }
    )
  }

then in 'MyController' i take out these three objects from resolveInfo. But i would expect something like this would work:

controller   : 'MyController',
controllerAs : 'vm',
resolve      : {
  things : function(REST){
    return REST.doGet('/things/').then(
      function(thingsResponse){
        return thingsResponse.data;
      }
    )
  },
  stuff1 : function(REST, things){
    return REST.doGet('/stuff1/' + '/mystuff/' + things[0].id).then(
      function(stuff1Response){
        return stuff1Response.data
      }
    );
  },
  stuff2 : function(REST, stuff1, things){
    return REST.doGet('/stuff2/' + '/mystuff/' + stuff1[0] + '/' + things[0].id).then(
      function(stuff2Response){
        return stuff2Response.data;
      }
    );
  }

But this yells unknown provider at 'things'

Is there a way to achieve this?

Answer 1

When you want to wait for multiple promises, you can use $q.all([promise1, promise2, ...]) , however you want to use results of previous promise.

A basic restructuring can solve your problem:

function resolveInfo(REST) {
    function getThings() {
        return REST.doGet('/things/').then(
            function (resp) {
                return getStuff1(resp.data);
            });
    }

    function getStuff1(things) {
        return REST.doGet('/stuff1/mystuff/' + things[0].id).then(
            function (resp) {
                return getStuff2(things, resp.data);
            });
    }

    function getStuff2(things, stuff1) {
        return REST.doGet('/stuff2/mystuff/' + stuff1[0] + '/' + things[0].id);
    }

    return getThings();
}

So, you returns with promise in a promise handler then for chaining promises. Here are a proper docs about this topic: http://solutionoptimist.com/2013/12/27/javascript-promise-chains-2/

Answer 2

When using ngRoute or ui-router, resolve parameters should either return it's values immediately or return a promise. The issue with your code is that you are waiting for the promise to end before returning back a value, which will not resolve correctly.

Javascript Route

Here is updated route code that returns promises.

controller   : 'MyController',
controllerAs : 'vm',
resolve      : {
  things : function(REST){
    return REST.doGet('/things/');
  },
  stuff1 : function(REST, things){
    return REST.doGet('/stuff1/' + '/mystuff/' + things[0].id);
  },
  stuff2 : function(REST, stuff1, things){
    return REST.doGet('/stuff2/' + '/mystuff/' + stuff1[0] + '/' + things[0].id);
  }
}

Javascript Controller

Here is a example controller that could then used the resolved parameters.

.controller('MyController', function(things, stuff1, stuff2) {})