Factory in angularJS

Question

Im trying to use a factory in angularJS, but I don't work as expected.

Here is my controller:

as.controller('Test', ['testFactory', function($scope, $http, $rootScope)
{   

    $http.get($rootScope.appUrl + '/nao/test/test')
        .success(function(data, status, headers, config) {
            $scope.test = data;
    });

    $scope.form = {};

    $scope.submitForm = function(isValid) {
        if(isValid) 
        {   
            testFactory.testFactoryMethod(function($http) {
                $scope.test = data;
            });
        }
    };
}]);

As you can see, I "include" my factory to the controller.

Here is my factory:

.factory('testFactory', function($http) {
    return {
            testFactoryMethod: function(callback) {
                return $http('http://127.0.0.1:81/test/test', data).success(function(data) { callback(data);
            });
        }
    };
});

When I run this, I get this error message:

Error: $http is undefined
@http://127.0.0.1:82/nao/js/controllers.js:82:3

Anyone who can help me?

Answer 1

This happens because of Angular $injector . When you provide an array as 2nd argument for .controller , the $injector tries to find all dependencies listed on it by their name and then inject them to the array's last element (which must be a function ), so in your case, this is what happens:

'testFactory' -> $scope
undefined -> $http
undefined -> $rootScope

Your code should be either like this:

as.controller('Test', ['$scope', '$http', '$rootScope', 'testFactory', function($scope, $http, $rootScope, testFactory)
{
    // ...

... or like this:

as.controller('Test', function($scope, $http, $rootScope, testFactory)
{
    // ...

Edit: As @sp00m stated, the second example should not be used if you are going to uglify (minify) your code, because the uglifier algorithm will replace those identifiers with something like:

function(a, b, c, d)

And then AngularJS will not be able to find those dependencies anymore, whereas the first example would look like this:

['$scope', '$http', '$rootScope', 'testFactory', function(a, b, c, d)

Which is valid, because you are explicitly telling Angular which dependencies it must inject.

Answer 2

There is a problem with the dependencies in your controller. The names you have as strings in the array don't match the arguments to your factory function.

This should work:

as.controller('Test', ['$scope', '$http', '$rootScope', 'testFactory', function($scope, $http, $rootScope, testFactory)
{   
    $http.get($rootScope.appUrl + '/nao/test/test')
        .success(function(data, status, headers, config) {
            $scope.test = data;
        });

    $scope.form = {};

    $scope.submitForm = function(isValid) {
        if(isValid) 
        {   
            testFactory.testFactoryMethod(function($http) {
                $scope.test = data;
            });
        }
    };
}]);

Answer 3

You should declare your controller like this

as.controller('Test', ['$scope', '$http', '$rootScope', 'testFactory', function($scope, $http, $rootScope, testFactory)
{
    ....
}

Answer 4

I think you're forgetting the $http.post:

$http(url, data) should be $http.post(url, data)

And what others have said before, you need the testFactory injected in the controllers function.