TypeError: Service is not a function when calling API by angular js

Question

Whenever I run the app implemented by angularjs 1.4.3.

BannerService.js

app.service('BannerService',function ($http) {

    this.save = function saveBanner(banner) {
        return $http({
              method: 'POST',
                url: 'http://localhost:8081/api/banners'
            });
    }

});

BannerController.js

app.controller('BannerAddCtrl', ['$scope','$log','BannerService',
    function ($scope,$log, BannerService) {
        $scope.save = function() {
            BannerService.saveBanner(myBanner)
                .success(function (result) {
                    $log.debug('RESULT', result);
                }, function (reason) {
                    $log.debug('REASON', reason);
                });
        }

}]);

And index.html

 <div class="modal-footer">
    <button type="button" class="btn btn-primary btn-block" ng-click="save()">Save Banner</button>

  </div>

It throws an exception as below:

TypeError: BannerService.saveBanner is not a function
at ChildScope.$scope.save (bannerControllers.js:64)
at fn (eval at compile (angular.js:13145), <anonymous>:4:203)
at callback (angular.js:23298)
at ChildScope.$eval (angular.js:15846)
at ChildScope.$apply (angular.js:15945)
at HTMLButtonElement.<anonymous> (angular.js:23303)
at HTMLButtonElement.dispatch (jquery.js:4435)
at HTMLButtonElement.elemData.handle (jquery.js:4121)

Can someone help me why I get the error. Greatly appreciate your time.

Aer0 · Accepted Answer · 2017-01-23 10:32:00Z

8

Take a look at the error message:

BannerService.saveBanner is not a function

Basically, your app is looking for the property saveBanner assigned to your Service. But currently you haven't declared such a property. Instead your Service contains a property called save which defines a function (called saveBanner).

AngularJS doesn't care about a named function which is assigned to a property. So instead, you've to adjust the propertyname itself. So your Service's function/property should be like this.

this.saveBanner = function () { ... }

answered Jan 23, 2017 at 10:32

Aer0

3,91720 silver badges35 bronze badges

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

2 Comments

Peter T Over a year ago

Thanks it is useful to me.

Aer0 Over a year ago

Glad I could help. Getting marked as correct answe would be nice though. :)

Manikandan Velayutham · Accepted Answer · 2017-01-23 10:36:38Z

0

Write your service like below.

var self = this;
self.saveBanner = function () { ... }

answered Jan 23, 2017 at 10:36

Manikandan Velayutham

2,2281 gold badge17 silver badges22 bronze badges

Comments

Jon D · Accepted Answer · 2017-01-23 10:40:20Z

0

You're save function in the controller isn't actually calling the function in your service.

app.service('BannerService',function ($http) {
        return {
          saveBanner: function(banner) {
                return $http({
                      method: 'POST',
                        url: 'http://localhost:8081/api/banners'
                    });
                  }
               }
});

answered Jan 23, 2017 at 10:40

Jon D

2541 silver badge10 bronze badges

Collectives™ on Stack Overflow

TypeError: Service is not a function when calling API by angular js

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related