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

Posted by shaunlim on Stack Overflow See other posts from Stack Overflow or by shaunlim
Published on 2012-10-07T19:45:24Z Indexed on 2012/10/08 21:37 UTC
Read the original article Hit count: 123

Filed under:
|
|

Note: I also posted this question on the AngularJS mailing list here: https://groups.google.com/forum/#!topic/angular/UC8_pZsdn2U

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

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about angularjs