CODEWITHSUNDEEP
javascriptangularjs
Girish Sasidharan
Girish Sasidharan

Reputation: 588

Error: Not a function - Angular Service

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?

Upvotes: 1

Views: 693

Answers (3)

gianlucatursi
gianlucatursi

Reputation: 680

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(); 
        });     
}

Upvotes: 2

Joel Hernandez
Joel Hernandez

Reputation: 1897

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.

Upvotes: 0

hpfs
hpfs

Reputation: 506

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;
        });
    }; 
};
});

Upvotes: -1

Related Questions