Can't send a POST request with $http in Angular - ReferenceError: $http is not defined

Question

So I keep getting this ReferenceError: $http is not defined, even though I have included $http in the controller, which seems to be the most common cause of this error message. I've tried also passing $http into the function itself, but that doesn't solve it.

I feel like I am missing something SUPER obvious, so any help would be much appreciated, thank you!

I've included the entire script, just for clarity's sake. You can see the post request towards the end of the script, inside the finaliseDay function.

Thanks!

Here is the error:

ReferenceError: $http is not defined
    at l.$scope.finaliseDay (http://localhost:8888/goalzy.js:69:12)
    at ib.functionCall (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:198:303)
    at Dc.(anonymous function).compile.d.on.f (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:214:485)
    at l.$get.l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:125:305)
    at l.$get.l.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:126:6)
    at HTMLAnchorElement.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:215:36)
    at HTMLAnchorElement.c (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:32:389)angular.js:11607 (anonymous function)angular.js:8557 $getangular.js:14502 $get.l.$applyangular.js:21440 (anonymous function)angular.js:3014 c

Here is the HTML first

<!doctype html>
<html ng-app="goalzy">
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
      <script src="goalzy.js"></script>
   </head>
   <body>
      <div class="container">
         <div class="well">
            <h2>Goalzy</h2>

            Dev TODO
            <ul>
               <li>Hook up the API to persist data</li>
            </ul>

            <div ng-controller="TodoController">
               <span>{{remaining()}} of {{todos.length}} remaining today</span>
               <span>You're at {{percentComplete()}}% completion</span>
               [ <a href="" ng-click="finaliseDay(percentComplete())">finalise day</a> ]
               <ul class="unstyled">
                  <li ng-repeat="todo in todos">
                     <input type="checkbox" ng-model="todo.done">
                     <span class="done-{{todo.done}}">{{todo.text}}</span>
                  </li>
               </ul>
               <form ng-submit="addTodo()">
                  <input type="text" ng-model="todoText"  size="30"
                     placeholder="add new todo here">
                  <input class="btn-primary" type="submit" value="add">
               </form>
               <hr>
               <div class="historial" ng-repeat="h in historicalDailyPercentages">
                  <ul>
                    <li>Date: {{h.date}}</li>
                    <li>Percentage of Daily Tasks Completed: {{h.percent}}%</li>
                    <li><div>Tweet it!</div></li>
                  </ul>

               </div>
            </div>
         </div>
      </div>
      </div>
   </body>


</html>

And here is the JS:

//Goalzy.js

angular.module('goalzy', [])

 .config(['$httpProvider', function($httpProvider) {
      $httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
   });

  .controller('TodoController', ['$scope','$http', function($scope, $http) {
$scope.todos = [];

$scope.historicalDailyPercentages = [];

$scope.addTodo = function() {

  if ($scope.todoText != "") {
    if ($scope.todos.length < 3) {
        $scope.todos.push({text:$scope.todoText, done:false});
        $scope.todoText = '';   

      //Save to DB

    }
    else {
        alert("You can only have 3 todos per day!");
      $scope.todoText = '';
    }   
  } else {
    alert("you must write something");
  }

};

$scope.remaining = function() {
  var count = 0;
  angular.forEach($scope.todos, function(todo) {
    count += todo.done ? 0 : 1;
  });
  return count;
};

$scope.percentComplete = function() {
    var countCompleted = 0;
    angular.forEach($scope.todos, function(todo) {
      countCompleted += todo.done ? 1 : 0; //Simply calculates how many tasks have been completed
    console.log(countCompleted);
    });

  var totalCount = $scope.todos.length;
  var percentComplete = countCompleted / totalCount * 100;
  return percentComplete;
}


$scope.finaliseDay = function(percentComplete) {
    alert("You're finalising this day with a percentage of: " + percentComplete);
    var today = new Date();
    var alreadyPresent = $scope.historicalDailyPercentages.some(function (item) { 
        return item.date.getFullYear() === today.getFullYear() &&
               item.date.getMonth() === today.getMonth() &&
               item.date.getDate() === today.getDate();
    });

    //Confirm that nothing has alreayd been posted for today
    if (!alreadyPresent) {
        $scope.historicalDailyPercentages.push({
            percent: percentComplete,
            date: today
        });

        // Simple POST request example (passing data) :
        $http.post('/api/postDailyPercentage.php', {msg:'hello word!'}).
          success(function(data, status, headers, config) {
            // this callback will be called asynchronously
            // when the response is available
            console.log("data" + data);
          }).
          error(function(data, status, headers, config) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
            console.log("data" + data);
          });

    }
    else {
      alert("You're all set for today - see you tomorrow!");
    }

    console.log($scope.historicalDailyPercentages);
}


  }]);

can you post your html?

StarsSky
– StarsSky

2015-03-07 11:05:01 +00:00
Commented Mar 7, 2015 at 11:05 — StarsSky
– StarsSky, Commented Mar 7, 2015 at 11:05
Post the complete message and stack trace of the exception.

JB Nizet
– JB Nizet

2015-03-07 11:12:07 +00:00
Commented Mar 7, 2015 at 11:12 — JB Nizet
– JB Nizet, Commented Mar 7, 2015 at 11:12
Added to the post @JBNizet

user2656127
– user2656127

2015-03-07 11:16:57 +00:00
Commented Mar 7, 2015 at 11:16 — user2656127
– user2656127, Commented Mar 7, 2015 at 11:16
$httpProvider.defaults.headers - does this work for you?

Omri Aharon
– Omri Aharon

2015-03-07 11:18:47 +00:00
Commented Mar 7, 2015 at 11:18 — Omri Aharon
– Omri Aharon, Commented Mar 7, 2015 at 11:18
remove ; after config block end

Pankaj Parkar
– Pankaj Parkar

2015-03-07 11:29:00 +00:00
Commented Mar 7, 2015 at 11:29 — Pankaj Parkar
– Pankaj Parkar, Commented Mar 7, 2015 at 11:29

Pankaj Parkar · Accepted Answer · 2015-03-07 12:03:08Z

2

Provider won't be available inside controller with suffix 'Provider', you can do access them by provider name only here it would be $http only, also remove ; after config initialization

$httpProvider setting should be done inside the angular config phase

CODE

angular.module('goalzy', [])
.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
}]);
 .controller('TodoController', ['$scope', '$http', function($scope, $http) {
    //controller code here
}]);

Note: For sure you should remove $httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8'; line from controller

Working Plunkr

edited Mar 7, 2015 at 12:03

answered Mar 7, 2015 at 11:18

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

12 Comments

user2656127 Over a year ago

Same issue, even if I set place that config before the controller.

Pankaj Parkar Over a year ago

@user2656127 check now

user2656127 Over a year ago

Yes, stil the same $http is not defined reference error, when I try execute $http post inside the finaliseDay function.

JB Nizet Over a year ago

@user2656127 have you removed the code using $httpProvider from the controller? Is it the first error you see in the console?

Pankaj Parkar Over a year ago

@JBNizet you are correct, he should remove those line from controller for sure.

|

Mahesh · Accepted Answer · 2015-03-07 11:52:51Z

0

You don't have to use "$httpProvider" in controller, use $http instead.

e.g.

$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

As best practice, do not configure provider ($http) in controller. Do it in config section. as below

    var app = angular.module('goalzy', []);
    app.config(function ($httpProvider) {
        $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
    });

    app.controller('TodoController', ['$scope','$http', function($scope, $http) {

        $scope.title="scope title";
        //$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
}]);

see working plunk at http://run.plnkr.co/plunks/4mY4izqc48P8wVQFumZ8/ with your html.

edited Mar 7, 2015 at 11:52

answered Mar 7, 2015 at 11:28

Mahesh

1,0329 silver badges22 bronze badges

2 Comments

user2656127 Over a year ago

I actually get the same error in my console on your Plunk (dropbox.com/s/8wyqs0l31fbtvxk/…) @Mahesh

Mahesh Over a year ago

sorry I sent you wrong plunker link. Just updated correct one

Collectives™ on Stack Overflow

Can't send a POST request with $http in Angular - ReferenceError: $http is not defined

2 Answers 2

12 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related