Error: Not a function - Angular Service

Question

I tried to call function defined in a service.

var app = angular.module('title', ['flash', 'ngAnimate', 'ngRoute'], 
    function ($interpolateProvider) {

        $interpolateProvider.startSymbol('[[');
        $interpolateProvider.endSymbol(']]');
    })

.service('getWidgets', function (globalServices, $http) {

    var getData = function() {

        var getWidgetUrl = globalServices.baseUrl + "admin/widget/list-text-widget";
        return $http({method:"GET", url:getWidgetUrl})
            .then(function(result){

                return result.data;
            });
    };

    return { getData: getData };
});

Calling section

var widget = getWidgets.getData()
    .then(function (result) {

        $scope.widgets = result;
        $scope.$apply();
    });

But it return an error getWidgets.getData is not a function.

What would be the root cause?

can you post the whole code ? angular.module('...').service(....) — hpfs
– hpfs, Commented Aug 30, 2016 at 14:05
can you post your definition of the controller (where you use this service) — gianlucatursi
– gianlucatursi, Commented Aug 30, 2016 at 14:10
angular.module('dss').controller('widgetCtrl', ['$scope', '$compile', '$window', '$location', '$http', 'globalServices', 'Flash', '$timeout', '$sce', '$routeParams', 'getWidgets', widgetCtrl]); function widgetCtrl($scope, $compile, $window, $location, $http, globalServices, getWidgets, Flash, $timeout, $sce, $routeParams) { var widget = getWidgets.getData(); widget.then(function (result) { $scope.widgets = result; $scope.$apply(); }); } — Girish Sasidharan
– Girish Sasidharan, Commented Aug 30, 2016 at 14:20
oh thanks. The problem it's the order. you have this dependencies 'globalServices', 'Flash', '$timeout but the controller function have: globalServices, getWidgets, Flash, — gianlucatursi
– gianlucatursi, Commented Aug 30, 2016 at 14:21

gianlucatursi · Accepted Answer · 2016-08-30 14:28:14Z

Change with this:

angular.module('dss')
  .controller('widgetCtrl', 
    ['$scope', '$compile', '$window', '$location', '$http', 'globalServices', 'getWidgets', 'Flash', '$timeout', '$sce', '$routeParams', widgetCtrl]); 

   function widgetCtrl($scope, $compile, $window, $location, $http, globalServices, getWidgets, Flash, $timeout, $sce, $routeParams) { 

   var widget = getWidgets.getData(); 
   widget.then(
      function (result) { 
          $scope.widgets = result; $scope.$apply(); 
      });     
}

EDIT: if you want an advice, use this syntax:

widgetCtrl.$inject = ['$scope', '$compile', '$window', '$location', '$http', 'globalServices', 'getWidgets', 'Flash', '$timeout', '$sce', '$routeParams'];

angular.module('dss').controller('widgetCtrl', widgetCtrl);

function widgetCtrl($scope, $compile, $window, $location, $http, globalServices, getWidgets, Flash, $timeout, $sce, $routeParams) { 

    var widget = getWidgets.getData(); 
    widget.then( 
        function (result) { 
            $scope.widgets = result; $scope.$apply(); 
        });     
}

Joel Hernandez · Accepted Answer · 2016-08-30 14:26:12Z

0

You are using a service and returning an object on its constructor. Services get initialized as new yourFunction and factories as yourFunction().

Switch it from service to factory and it will work.

EDIT: If you want to keep using a service, try this. Note I changed the name of the service

function GetWidgetsService($http, globalServices){
    this._$http = $http;
    this._globalServices = globalServices;
}

GetWidgetsService.prototype.getData = function() {
    var getWidgetUrl = this._globalServices.baseUrl + "admin/widget/list-text-widget";
    // Angular $http() and then() both return promises themselves
    return this._$http({method:"GET", url:getWidgetUrl}).then(function(result){

        // What we return here is the data that will be accessible
        // to us after the promise resolves
        return result.data;
    });
};

angular.module('yourModule').service('getWidgetsService', GetWidgetsService);

EDIT 2: For completeness, here is your fixed factory

angular.module('yourModule').factory('getWidgetsFactory', function ($http, globalServices) {
    return {
        getData: function () {
            var getWidgetUrl = globalServices.baseUrl + 'admin/widget/list-text-widget';
            // Angular $http() and then() both return promises themselves
            return $http({method: 'GET', url: getWidgetUrl}).then(function (result) {

                // What we return here is the data that will be accessible
                // to us after the promise resolves
                return result.data;
            });
        }
    };
});

EDIT 3: HERE is a JSBin with your code working with my first solution.

edited Aug 30, 2016 at 14:26

answered Aug 30, 2016 at 14:07

Joel Hernandez

1,9474 gold badges18 silver badges27 bronze badges

3 Comments

Girish Sasidharan Over a year ago

Same issue. I am not trying to return its constructor

Joel Hernandez Over a year ago

Did you try the factory? Can you add the place where you are injecting the service?

Joel Hernandez Over a year ago

@Girish added a JSBin with my solution working. Please check EDIT 3

hpfs · Accepted Answer · 2016-08-30 14:09:57Z

-1

Try this way

    .service('getWidgets', function (globalServices, $http) {
    return { getData: function() {
        var getWidgetUrl = globalServices.baseUrl + "admin/widget/list-text-widget";
        // Angular $http() and then() both return promises themselves
        return $http({method:"GET", url:getWidgetUrl}).then(function(result){

            // What we return here is the data that will be accessible
            // to us after the promise resolves
            return result.data;
        });
    }; 
};
});

answered Aug 30, 2016 at 14:09

hpfs

5049 silver badges16 bronze badges

Collectives™ on Stack Overflow

Error: Not a function - Angular Service

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related