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?

You need to use $q.all()... it will wait for all resources before continue. — Joao Polo
– Joao Polo, Commented Nov 18, 2015 at 12:43

jjbskir · Accepted Answer · 2015-11-18 15:08:38Z

1

+50

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) {})

answered Nov 18, 2015 at 15:08

jjbskir

11.3k10 gold badges49 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Illiax Over a year ago

This is what i was looking for, i didn't know about either resolved data or promise. So i'd need to change things[0].id to things.data[0].idor use $q in things : function(REST) to return a new promise with processed things data.

andras.tim · Accepted Answer · 2015-11-18 13:37:16Z

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/

Collectives™ on Stack Overflow

AngularJs controller resolve dependency

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related