Angular JS is not a function error

Question

I am quite new to Angular and I cant make this factories work, im just consuming a web service in another instance of visual studio. here is the code:

main factory:

nngmodule.factory('generaldataFactory', ['$http', function ($http, $httpProvider) {
var dataFactory = {};

dataFactory.getMethodWebService = function (pMethod, pUrl, pCache, pTimeout, pParams, pFunctionSuccess, pFunctionError) {
    $http({
        method: pMethod, url: pUrl, cache: pCache, timeout: pTimeout, params: pParams
    }).then(pFunctionSuccess, pFunctionError);
};

return dataFactory;

}]);

personal factory (uses above one)

  ngmodule.factory('miFactory', ['$http', function (generaldataFactory) {

var miFact = {};

miFact.GetNoticiasList = function (functionSuccess, functionError) {
    return generaldataFactory.getMethodWebService("GET", 'http://localhost:40900/Noticias/GetNoticiasList', false, 25000, {}, functionSuccess, functionError);
};
miFact.FiltrarNoticias = function (id, functionSuccess, functionError) {
    return generaldataFactory.getMethodWebService("GET", 'http://localhost:40900/Noticias/GetNoticiaById/', false, 25000, { 'id': id }, functionSuccess, functionError);
};

return miFact;

}]);

Controller:

ngmodule.controller('miController', function(miFactory) { var scope = this;

var registerSuccess = function (response) {

}
var registerError = function (response) {  

}

scope.noticiasList = {}
scope.noticiasList =    miFactory.GetNoticiasList(registerSuccess,registerError);

});

Error:

TypeError: generaldataFactory.getMethodWebService is not a function at Object.miFact.GetNoticiasList (MiFactory.js:6) at new <anonymous> (controllers.js:13) at Object.invoke (angular.js:4478) at extend.instance (angular.js:9136) at nodeLinkFn (angular.js:8248) at compositeLinkFn (angular.js:7680) at compositeLinkFn (angular.js:7684) at publicLinkFn (angular.js:7555) at angular.js:1662 at Scope.$eval (angular.js:15989)

General comment when you sort out the injections: don't use success/failure callbacks. Get into the habit of returning promises instead of callbacks and you'll find your code quickly becomes a lot cleaner. So getMethodWebService can just do: return $http(...); and GetNoticiasList becomes return generaldataFactory.getMethodWebService("GET", 'http://localhost:40900/Noticias/GetNoticiasList', false, 25000, {}); and you call that like: miFactory.GetNoticiasList().then(function(response) { scope.noticiasList = {}; }).catch(registerError); All the callbacks just melt away. — Duncan
– Duncan, Commented Jan 15, 2016 at 13:49

Henry Zou · Accepted Answer · 2016-01-15 13:36:34Z

3

You are NOT injecting the necessary dependencies ( this is happening in multiple files). The parameters in the array needs to match the arguments in your factory function.

ngmodule.factory('miFactory', ['$http', function (generaldataFactory) {

If you want to use generaldataFactory, you need to inject it like:

ngmodule.factory('miFactory', ['generaldataFactory', function (generaldataFactory) {

edited Jan 15, 2016 at 13:36

answered Jan 15, 2016 at 13:31

Henry Zou

1,9271 gold badge14 silver badges19 bronze badges

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

1 Comment

Henry Zou Over a year ago

He's passing in successCallback and errorCallback, in his dataFactory.getMethodWebService. I would have returned the promise, but I think he's implementation doesn't require the promies to be returned.

Gonzalo Pincheira Arancibia · Accepted Answer · 2016-01-15 14:22:58Z

Some corrections

General Data Factory

//Notice that in the factory, the providers don't are availables. 
//Don't inject Providers in the factories/services
//Don't set callback for manage the responses of $http in the factory, instead
//return the result of the $http method

nngmodule.factory('generaldataFactory', ['$http', function ($http) {
    var dataFactory = {};

    dataFactory.getMethodWebService = function (pMethod, pUrl, pCache, pTimeout, pParams) {
        return $http({
                method: pMethod, 
                url: pUrl, 
                cache: pCache, 
                timeout: pTimeout, 
                params: pParams
              });
    };

return dataFactory;
}]);

Personal Factory

//Inject generaldataFactory instead $http.
//The better approach in this case it's use the $q service for resolve/reject the http responses 
ngmodule.factory('miFactory', ['generaldataFactory','$q', function (generaldataFactory,$q) {

var miFact = {};

miFact.GetNoticiasList = function (functionSuccess, functionError) {
    var d = $q.deferred();

    return generaldataFactory
           .getMethodWebService("GET",'http://localhost:40900/Noticias/GetNoticiasList', false, 25000, {})
           .then(function(response){
              d.resolve(response);
              return d.promise;
            }, function(err){
              d.reject(err);
              return d.promise;
           });


};

Controller

//Inject your factory and resolve the responses
ngmodule.controller('miController',['miFactory', function(miFactory) { 
    var scope = this;

    var registerSuccess = function (response) {
       scope.noticiasList = response;
    }
    var registerError = function (response) {  
       alert("Error!");
    }

    scope.noticiasList = {}
    miFactory.GetNoticiasList.then(registerSuccess,registerError);
});

Collectives™ on Stack Overflow

Angular JS is not a function error

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related