Using Shared Service(with $resource) to share data between controllers, but how to define callback functions?

[shaunt...@gmail.com]

Hi All,

I'm building my first AngularJS app and am not very familiar with Javascript to begin with so any guidance will be much appreciated :)

My App has two controllers, ClientController and CountryController. In CountryController, I'm retrieving a list of countries from a CountryService that uses the $resource object. This works fine, but I want to be able to share the list of countries with the ClientController. After some research, I read that I should use the CountryService to store the data and inject that service into both controllers.

This was the code I had before:

CountryService:

services.factory('CountryService', function($resource) {

return $resource('http://localhost:port/restwrapper/client.json', {port: ':8080'});

});

CountryController:

//Get list of countries

//inherently async query using deferred promise

$scope.countries = CountryService.query(function(result){

        //preselected first entry as default

$scope.selected.country = $scope.countries[0];

});

And after my changes, they look like this:

CountryService:

services.factory('CountryService', function($resource) {

var countryService = {};

var data;

var resource = $resource('http://localhost:port/restwrapper/country.json', {port: ':8080'});

var countries = function() {

data = resource.query();

return data;

}

  return {

  getCountries: function() {

  if(data) {

  console.log("returning cached data");

  return data;

  } else {

  console.log("getting countries from server");

  return countries();

  }

 

  }

  };

  });

CountryController:

$scope.countries = CountryService.getCountries(function(result){

console.log("i need a callback function here...");

});

---

The problem is that I used to be able to use the callback function in $resource.query() to preselect a default selection, but now that I've moved the query() call to within my CountryService, I seemed to have lost what.

What's the best way to go about solving this problem?

Thanks for your help,

Shaun

[Shaun Lim]

Ok..so looks like I solved the problem by passing a callback function all the way up to the resource.query() call. Still not sure if this is the best way to do this.

For reference, this is what I did:

CountryController:

$scope.countries = CountryService.getCountries(function(){

//preselected default

$scope.selected.country = $scope.countries[0];

});

CountryService:

//Country Service. Will contain all relevant rest methods here

services.factory('CountryService', function($resource) {

var countryService = {};

var data;

var resource = $resource('http://localhost:port/restwrapper/country.json', {port: ':8080'});

var countries = function(callback) {

data = resource.query(callback);

return data;

}

  return {

  getCountries: function(callback) {

  if(data) {

  console.log("returning cached data");

  return data;

  } else {

  console.log("getting countries from server");

  return countries(callback);

  }

 

  }

  };

  });