Injecting a resolved promise into service

Question

I need to get some information (a schema) from the server before I set up a bunch of services that depend on that information.

My server provides a schema that defines various properties of a model. In my angular code, I have a service that gets this schema:

services.factory('schema', function($q, $http) {
    var deferred = $q.defer();
        $http.get('schema/').then(function(response) {
        schema = // some function of response.data
        deferred.resolve(schema);
    }, function() {
        deferred.reject('There was a problem fetching the schema');
    }); 
        return deferred.promise;
});

I would like to inject the schema object, and not the promise, into other services that depend on the schema. $routeProvider lets us do this for controllers:

app.config(function($routeProvider) {
    $routeProvider.
        when('/', {
            controller: 'SomeCtrl',
            resolve: {
                schema: 'schema'
            },
            ...
        });
});

and this allows me to define SomeCtrl like this:

controllers.controller('SomeCtrl', function($scope, schema) {
    // schema is an object
    ...
});

But for services, I have to do:

services.factory('SomeService', function(schema) {
    // schema is a promise
    schema.then(function(schema) {
        ...
    });
});

Is there any way I can do this?

The angular router waits for the values within `resolve` to resolve/reject before instantiating the controller. Then it uses local values to inject into the controller (the angular injector prefers locals). TL;DR: you're working with two different `schema`s. — James Kyle, Feb 11 '14 at 20:15

score 5 · Answer 1 · answered Jul 25 '14 at 04:44

What you want is deferred bootstrap. There is already a plugin written for this purpose - https://github.com/philippd/angular-deferred-bootstrap.

I create an example at plunkr - http://plnkr.co/edit/VfISHNULXRLe52NeAsn1?p=preview

*You must replace existing ng-app with deferred bootstrap

Code Snippet -

angular.element(document).ready(function() {
    deferredBootstrapper.bootstrap({
        element: document.body,
        module: 'plunker',
        resolve: {
            schema: ['$http',
                function($http) {
                    return $http.get('schema.json');
                }
            ]
        }
    });
});

Then, you can use schema anyway in controller, services or factory just like route resolve.

Sample Code for Factory

app.factory('SomeService', function(schema){
    return {
        getTitle: function() {
            return schema.title;
        }
    }
});

Exactly what I was looking for as well, thanks - the deferred bootstrapping works like a charm with that component! — conceptdeluxe, Aug 22 '15 at 19:54

score -1 · Answer 2 · answered Sep 27 '13 at 16:10

You get a promise because your service function immediately evaluates its body when you call it (as functions do). Normally, a service should return an object so that the consumer (another service, controller, whatever) may then call the functions on that object when it needs to.

services.factory('schema', function($q, $http) {
return {
  get: function() {
    var deferred = $q.defer();
    $http.get('schema/').then(function(response) {
      schema = // some function of response.data
      deferred.resolve(schema);
    }, function() {
      deferred.reject('There was a problem fetching the schema');
    });
    return deferred.promise;
  }
}

});

In your example the method `get` still returns a promise, not the promise's resolution, which is what the question is asking. — Carl G, Oct 28 '14 at 19:09

Injecting a resolved promise into service

2 Answers2

Linked