How do I call $http.get in AngularJS

Question

Attempting to learn angularjs because I need to modify some stuff at work and that is what they are using and I can't upgrade to Angular2+ at the moment. I have the following code where I'm trying to use the $http.get method but getting $http not defined error in the console.

// js code

var app = angular.module('app', []);

app.controller('HelloWorldCtrl', function($scope){

  var onUserComplete = function(response){
    $scope.user = response.data;
  };

  $http.get("https://api.github.com/users/robconery")
      .then(onUserComplete);

  $scope.message = "Hello, AngularJS";
});

// HTML

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@*" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="HelloWorldCtrl">

    <h1>{{message}}</h1>

    <div>
      Name: {{user.name}}
    </div>
    <div>
      Location: {{user.location}}
    </div>

  </body>

</html>

Currently using 1.4.0

rizzo
– rizzo

2018-07-28 11:41:50 +00:00
Commented Jul 28, 2018 at 11:41 — rizzo
– rizzo, Commented Jul 28, 2018 at 11:41

Sajeetharan · Accepted Answer · 2018-07-28 11:39:46Z

You need to pass $http as a dependency to your controller,

app.controller('HelloWorldCtrl', function($scope,$http){
});

DEMO

var app = angular.module('app', []);

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

  var onUserComplete = function(response){
    $scope.user = response.data;
  };

  $http.get("https://api.github.com/users/robconery")
      .then(onUserComplete);

  $scope.message = "Hello, AngularJS";
});

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@*" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="HelloWorldCtrl">

    <h1>{{message}}</h1>

    <div>
      Name: {{user.name}}
    </div>
    <div>
      Location: {{user.location}}
    </div>

  </body>

</html>

Collectives™ on Stack Overflow

How do I call $http.get in AngularJS

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related