ReferenceError: $http is not defined in angularJs

Question

I have a angular app with following structure

masterApp.js :

var masterApp = angular.module('masterApp', []);
masterApp.factory("organizationFactory", ["$http", organizationFactory(http)]);
masterApp.controller("organizationCtrl", ["$scope", "organizationFactory",organizationCtrl(scope,organizationFactory)]);

organizationFactory.js:

function organizationFactory(http) {
    return {

        getDefaultOrganization:function() {
            http.get(organizationRestUrl);
        },
        registerOrganization:function(organization) {
            http.post(organizationRestUrl, organization);
        },
        updateOrganization:function(organization) {
            http.put(organizationRestUrl, organization);
        },
        deleteOrganization:function() {
            http.delete(organizationRestUrl);
        }
    };
}

OrganizationCtrl.Js

function organizationCtrl($scope,organizationFactory) {

    alert(scope);
    scope.organization = organizationFactory.getDefaultOrganization();
}

When app runs i got an error

ReferenceError: http is not defined

masterApp.factory("organizationFactory", ["$http", organizationFactory(http)])

I changed to injecting http to $http and scope to $scope ( i think it will not cause the error because i am using appropriate minfication safe guidelines) .but still i am stuck with that error NB: I am sure that angular.js loading before the script

Answer 1

You should pass a reference to the function instead of invoking the function and getting it returned value.

With this code:

organizationFactory(http)

You're invoking the function passing in http which does not exist in that context.

To pass a function reference, just organizationFactory is enough.

Replace:

masterApp.factory("organizationFactory", ["$http", organizationFactory(http)]);
masterApp.controller("organizationCtrl", ["$scope", "organizationFactory",organizationCtrl(scope,organizationFactory)])

With:

masterApp.factory("organizationFactory", ["$http", organizationFactory]);
masterApp.controller("organizationCtrl", ["$scope", "organizationFactory",organizationCtrl])