Angular async http request

Question

I am trying to do a http ququest in angular. Somehow it seems am missing out on something which i cannot figure out what it is? On Page load i get this error:

Error: [$injector:undef] http://errors.angularjs.org/1.4.5/$injector/undef?p0=%24formServices

My Service:

app.factory('$formServices',['$http','$q',function ($http, $q) {

                function postSubmit (fData) {
                    return $http({
                        url: 'forms/Form1.php',
                        method: "POST",
                        data: { items: JSON.stringify(fData) }
                    });
                }
        }
    ]
);

And the controller that calls the service:

$formServices.postSubmit($scope.Parameters).then(function (response) {
                    console.log(response);
                    $scope.Results = response;
                });

What am i missing out on?

Oops, scratch that last comment you need to return a function with your factory. — EvilZebra
– EvilZebra, Commented Jan 13, 2016 at 15:31

EvilZebra · Accepted Answer · 2016-01-13 15:41:02Z

2

$injector:undef

Try adding a return to your factory. Also, if you wish to call the function with dot notation you need to place the function inside of an object.

app.factory('$formServices',['$http','$q',function ($http, $q) {

                return {
                    postSubmit: function(fData) {
                        return $http({
                            url: 'forms/Form1.php',
                            method: "POST",
                            data: { items: JSON.stringify(fData) }
                        });
                    }
                }
        }
    ]
);

edited Jan 13, 2016 at 15:41

answered Jan 13, 2016 at 15:32

EvilZebra

1,0728 silver badges18 bronze badges

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

3 Comments

jhon dano Over a year ago

When adding the return i get: TypeError: $formServices.postSubmit is not a function

EvilZebra Over a year ago

Well your code only shows the function postSubmit. And it would need to be structured differently if that is how you wish to call it. The code shown would simply be called via $formServices(). Please update your question with all of your code if you need more help.

EvilZebra Over a year ago

I think I understand what you want, hold on I'll update my answer.

Pankaj Parkar · Accepted Answer · 2016-01-13 15:35:28Z

1

Factory must return object from factory, so that will be exposed via to factory consumer via injecting its dependency.

Code

app.factory('$formServices', ['$http', '$q', function($http, $q) {
    function postSubmit(fData) {
        return $http({
            url: 'forms/Form1.php',
            method: "POST",
            data: {
                items: JSON.stringify(fData)
            }
        });
    }
    // should object
    return {
        postSubmit: postSubmit //link post submit to function
    }
}]);

answered Jan 13, 2016 at 15:35

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

2 Comments

Pankaj Parkar Over a year ago

@Xgongiveittoya this is refactoring of your code..which looks better to read and understand :)

Xgongiveittoya Over a year ago

Ah I see, its just taking the collection of objects and functions and returning them all together, instead of adding them to an object one at a time then returning the object.

Xgongiveittoya · Accepted Answer · 2016-01-13 15:36:50Z

The issue is that your factory does not return an object. To learn more about this I suggest reading https://docs.angularjs.org/guide/providers

Evilzebra's answer would work I believe, but if you ever wanted to have more functionality in your factory, a good way to structure factories is:

app.factory('$formServices',['$http','$q',function ($http, $q) {
            var service = {};
            service.postSubmit = function (fData) {
                return $http({
                    url: 'forms/Form1.php',
                    method: "POST",
                    data: { items: JSON.stringify(fData) }
                });
            }
            return service;
    }]);

This would allow you to add more features, appending them to the service object.

Collectives™ on Stack Overflow

Angular async http request

3 Answers 3

3 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Related