current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 8 down vote favorite
1

I'm trying out AngularJS for the first time. When using the $http.post("url", data) function, I'm getting a Error: $http is not defined console message.

At the top of my HTML page I am including AngularJS after all other JS imports.

I have also included other JavaScript libraries due to widget dependencies etc. My script imports section looks like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>

I have a controller which I'm using to send some data to the server:

function FormCtrl($scope) {
  $scope.sendData = function(){
        var data = "firstName=" + $scope.firstName + "&" +
            "lastName=" + $scope.lastName + "&" +
            "address=" + $scope.address + "&" +
            "postcode=" + $scope.postcode;

        $http.post("/data/person/put", data);
     };
}

The sendData function is attached to a button. All works fine until the call to $http.post(...) at which point the console outputs the error.

The full error listing is:

Error: $http is not defined
$scope.sendData@http://localhost:8080/angularjs/:96
Mc/x/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js:71
ec[c]</</</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js:142
e.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js:87
e.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js:87
ec[c]</</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js:142
c.event.handle@http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js:63
c.event.add/o@http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js:57

https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js
Line 61

Do I have to do something else to configure AngularJS to use the $http.post function?

I lifted the usage straight from the AngularJS Shortcut Methods section of the documentation here: http://docs.angularjs.org/api/ng.$http

Can anyone help?

Thanks Adam

share|improve this question

1 Answer 1

up vote 15 down vote accepted

function FormCtrl($scope) { should be function FormCtrl($scope, $http) {.

You need to inject all the services required to the controller, in this case you are using $scope and $http service, but you have injected only $scope that is the cause of the error.

Ex:

function FormCtrl($scope, $http) {
    ....
}
FormCtrl.$inject = ['$scope', '$http'];

You can read a note about complications in injection with minification here, read A Note on Minification

share|improve this answer
    
Tried it out and fully working now. Thank you for quick response. So quick that I can't even accept your answer yet. But I will. Thanks again! –  Adam Davies Feb 27 '13 at 12:46
1  
You can read a note about complications in injection with minification at docs.angularjs.org/tutorial/step_05 –  Arun P Johny Feb 27 '13 at 12:47

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.