AngularJS Service not working

Question

I have been developing a simple AngularJS App. I need to implement a custom service named 'countryservice' for it. Following is my code.

var countryApp = angular.module('countryApp', []);

countryApp.service('countryservice', function ($http) {
this.getallcountries = function ($http) {
    $http.get('js/countries.json').success(function (data) {
        return data;
    });
}
});

countryApp.controller('CountryCtrl', function ($http, $scope, countryservice) {
$scope.countries = countryservice.getallcountries($http);
});

Unfortunately this code doesn't work for some reason. But cannot figure out why. When I do the same thing without creating my own custom service it works fine. Following is the code without implementing a custom service. This one works fine.

var countryApp = angular.module('countryApp', []);

  countryApp.controller('CountryCtrl', function ($scope, $http) {
  $http.get('js/countries.json').success(function (data) {
    $scope.countries = data;
  });
});

Can anybody help me with what I'm doing wrong with my custom service?

kulak · Accepted Answer · 2015-12-04 14:29:50Z

4

The getallcountries service method should return the promise generated by $http.get like this:

var countryApp = angular.module('countryApp', []);

countryApp.service('countryservice', function ($http) {
this.getallcountries = function () {
    return $http.get('js/countries.json');
}
});

countryApp.controller('CountryCtrl', function ($scope, countryservice) {
   countryservice.getallcountries().success(function(data) {
      $scope.countries = data;
   });
});

Also, notice that you don't have to inject $http service to the controller.

answered Dec 4, 2015 at 14:29

kulak

8827 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yukuan · Accepted Answer · 2015-12-04 14:36:15Z

2

Try should try this:

countryApp.service('countryservice', function ($http) {
this.getallcountries = function () {
    return $http.get('js/countries.json');
}
});

in controller:

countryApp.controller('CountryCtrl', function ($scope, countryservice) {
    countryservice.getallcountries().then(function(resp) {
        $scope.countries = resp.data;
    })
});

answered Dec 4, 2015 at 14:36

yukuan

5615 silver badges18 bronze badges

Comments

AlainIb · Accepted Answer · 2015-12-04 14:38:44Z

1

try with a return before $http

countryApp.service('countryservice', function ($http) {
    this.getallcountries = function ($http) {
        return $http.get('js/countries.json').success(function (data) {
            return data;
        });
    }
});

and a then in controller

countryApp.controller('CountryCtrl', function ($scope, countryservice) {
    countryservice.getallcountries().then(function(resp) {
        $scope.countries = resp.data;
    })
});

edited Dec 4, 2015 at 14:38

answered Dec 4, 2015 at 14:27

AlainIb

4,6157 gold badges42 silver badges67 bronze badges

Comments

Gianmarco · Accepted Answer · 2015-12-04 14:27:50Z

0

countryApp.service('countryservice', function ($http) {

var service = {};
service.getallcountries = function ($http) {
    var response;
    $http.get('js/countries.json').success(function (data) {
        response = data;
    });
    return response;
}

return service;
});

This is something similar at what I would do.

answered Dec 4, 2015 at 14:27

Gianmarco

2,55027 silver badges58 bronze badges

Collectives™ on Stack Overflow

AngularJS Service not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related