AngularJS: Unable to access a service method

Question

I am just learning how to use services to slim down my controllers.

I created a plunker and I am returning this error: Error -- TypeError: undefined is not a function pointing to this line ".then(function(crops){"

Here is my index.html (pretty simple)

<body ng-controller="MainController">
    <pre>{{selectedCrops | json}}</pre>
</body>

and here is script.js

(function(){
  angular.module('app',[]);

  angular.module('app')
    .service('LoanSvc', function($http, $q){
      this.getSelectedCrops = function(){
        return {
          show_corn: true,
          show_beans: true,
          show_sorghum: true,
          show_wheat: true,
          show_cotton: true,
          show_rice: true,
          show_peanuts: true,
          show_sugarcane: true
        };
      }
    });

  angular.module('app').controller('MainController', function($scope, LoanSvc){
    LoanSvc.getSelectedCrops()
      .then(function(crops){
        $scope.selectedCrops = crops;
      })
  });
}());

Any guidance is coveted!

Thanks in advance.

Sunil D. · Accepted Answer · 2014-10-15 05:30:48Z

Since your service doesn't make any HTTP queries and just returns an object with data, you do not need to use the .then() with the return value for LoanSvc.getSelectedCrops().

Instead, you can just use the value directly in your controller:

$scope.selectedCrops = LoanSvc.getSelectedCrops();

Eventually, you will probably want to modify your service to get the data from the server. This is why you inject $http into the service. So you might modify your LoanSvc.getSelectedCrops() function to use $http.get() which returns a $promise. When you do that, you will be able to use the then() function to handle the asynchronous response from the server.

You might modify your service something like this to query a server:

angular.module('app')
    .service('LoanSvc', function($http, $q){
      this.getSelectedCrops = function(){
          return $http.get('some_url/get_crops');
});

Collectives™ on Stack Overflow

AngularJS: Unable to access a service method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related