angularJS service not getting called

Question

I'm very new to AngilarJS. I am trying to write a service in angularJS.

<script>
var module = angular.module("myapp", []);

module.service('BrandService', function ($http) {

    var brands = [];

    this.getBrands = function()
    {
        return $http.get('http://admin.localhost/cgi-bin/brand.pl')
            .then(function(response) 
            {
                brands = response.brands;
                alert (brands);
            });
    }

    //simply returns the brands list
    this.list = function () 
    {
        return brands;
    }


});

module.controller("brandsController", function($scope, BrandService) {
    $scope.brandlist = BrandService.list();
    alert ($scope.brandlist);
});

</script>

The statement "alert (brands);" is not getting called. What is the issue with this code. Is m missing any thing in implementation?

Is your controller called somewhere ? (like in a ng-controller directive for example) — Riron, Nov 24 '14 at 15:11
Can you try injecting $window into service and calling $window.alert instead of alert? — Gregor Petrin, Nov 24 '14 at 15:12
i have never heard of `$http.get(..) .then(..)` are you sure that's right? I would expecting `.success(..)` — Giwwel, Nov 24 '14 at 15:12
@Riron Yes Controller is called. and getting empty alert for controller. — Devesh Agrawal, Nov 24 '14 at 15:16
@Giwwel I have taken the code from this SO link. http://stackoverflow.com/questions/17646034/what-is-the-best-practice-for-making-an-ajax-call-in-angular-js — Devesh Agrawal, Nov 24 '14 at 15:23
do you have interceptors? can you do a console.log(response)? — rahpuser, Nov 24 '14 at 15:26
@all. Do i need to call BrandService.getBrands() function in my controller. or it will be called automatically when we load the HTML page — Devesh Agrawal, Nov 24 '14 at 15:33

score 0 · Answer 1 · edited Jan 07 '17 at 03:33

0

In service:

this.getBrands = function() {
  $http.get('http://admin.localhost/cgi-bin/brand.pl').then(function(response) {
    brands = response.brands;
    alert(brands);
    return brands;
  });
}

In controller:

   $scope.brandlist = BrandService.getBrands();
alert($scope.brandlist);

edited Jan 07 '17 at 03:33

CozyAzure

8,280
7
34
52

answered Jan 07 '17 at 02:13

Sreehari S

388
1
12

score 0 · Answer 2 · answered Jan 07 '17 at 02:20

$http calls are always async. Meaning, even you do a .then at your service, there is no way it will properly the resolved data back into your controller. You will have to write it in your controller.

Your Service:

module.service('BrandService', function($http) {
  var brands = [];
  this.getBrands = function() {
    //do not need the dot then.
    return $http.get('http://admin.localhost/cgi-bin/brand.pl')
  }
  //simply returns the brands list
  this.list = function() {
    return brands;
  }
});

In your controller:

module.controller("brandsController", function($scope, BrandService) {
  BrandService.list()
    .then(function(response) {
      $scope.brandlist = response.brands;
      alert($scope.brandlist);
    });
});

angularJS service not getting called

2 Answers2