Angularjs: a Service that serves multiple $resource urls / data sources? Angularjs: a Service that serves multiple $resource urls / data sources? angularjs angularjs

Angularjs: a Service that serves multiple $resource urls / data sources?


You can update service to return a hash of resources, not a single one:

angular.module('myApp.services', ['ngResource']).  factory("geoProvider", function($resource) {    return {      states: $resource('../data/states.json', {}, {        query: { method: 'GET', params: {}, isArray: false }      }),      countries: $resource('../data/countries.json', {}, {        query: { method: 'GET', params: {}, isArray: false }      })    };  });

You will be able to use it adding .query() at the end your function name i.e. geoProvider.states.query() and geoProvider.countries.query() and myApp.services has to be injected into your controller, then inject geoProvider service into controller itself as well.


I'm assuming you want to execute some code when both files have loaded. Promises work really well for this. I don't think resources return promises, but you can use the $http service for simple ajax calls.

Here I define one service each for the two data files, and a third service that returns a promise that gets fulfilled when both files are done loading.

factory('states',function($http) {    return $http.get('../data/states.json');}).factory('countries',function($http) {    return $http.get('../data/countries.json');}).factory('statesAndCountries', function($q, states, countries) {    return $q.all([states, countries]);});

Then in your controller:

statesAndCountries.then(function(data) {    var stateData = data[0];    var countryData = data[1];    // do stuff with stateData and countryData here});