Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I have an Angular service/provider that serves json data to my controller which works great:

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

But I also need to serve json data to the same controller from another file counties.json.

Where can I find out how to I write a service that serves both files to my controller?

like image 776
Henry Zhu Avatar asked Jun 18 '13 04:06

Henry Zhu


People also ask

What is $resource in AngularJS?

Overview. A factory which creates a resource object that lets you interact with RESTful server-side data sources. The returned resource object has action methods which provide high-level behaviors without the need to interact with the low level $http service. Requires the ngResource module to be installed.

What is an Angular hybrid application?

In a hybrid application you run both versions of Angular at the same time. That means that you need at least one module each from both AngularJS and Angular. You will import UpgradeModule inside the NgModule, and then use it for bootstrapping the AngularJS module.

How to use Angular component in AngularJS?

Angular Js ComponentTo create a component, we use the . component() method of an AngularJS module. We must provide the name of the component. The name of the component is in camelCase (e.g. myDataComponent), but we will use kebab-case (e.g. my-data-component) when referring to it in our HTML.

Can AngularJS and Angular coexist?

During the process of migration you will run both AngularJS and Angular in the same application, at the same time. This concept is known as dual booting, and in this lecture we will see how we can get both the legacy and modern Angular frameworks to co-exist and work together within the same application.


2 Answers

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.

like image 153
Dmitry Evseev Avatar answered Sep 28 '22 20:09

Dmitry Evseev


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 }); 
like image 44
Karen Zilles Avatar answered Sep 28 '22 19:09

Karen Zilles