AngularJS #12 - Ajax($http)

✔ AngularJS AJAX - $http

 > $http is an AngularJS service for reading data from remote servers

 

1. AngularJS $http

 > AngularJS $http service makes a request to the server, and returns a response

<div ng-app="myApp" ng-controller="myCtrl">
 <p>Today's welcome message is:</p>
 <h1>{{myWelcome}}</h1>
</div>

<script>
 var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope, $http){
  $http.get("welcome.htm")
  .then(function(response){
   $scope.myWelcome = response.data;
  });
 });
</script>

 

 

2. Methods

 > There are several shortcut methods

  - .delete()

  - .get()

  - .head()

  - .jsonp()

  - .patch()

  - .post()

  - .put()

  These methods are all shortcuts of calling the $http service

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http){
 $http({
  method: "GET",
  url: "welcome.htm"
 }).then(function mySuccess(response){
  $scope.myWelcome = response.data;
 }, function myError(response) {
  $scope.myWelcome = response.statusText;
 });
});

 

 

3. Properties

 > The response from the server is an object with these properties

  - .config : the object used to generate the request

  - .data : a string, or an object, carrying the response from the server

  - .headers : a function to use to get header information

  - .status : a number defining the HTTP status

  - .statusText : a string defining the HTTP status

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http){
 $http.get("welcome.htm")
 .then(function(response){
  $scope.content = response.data;
  $scope.statuscode = response.status;
  $scope.statustext = response.statusText;
 });
});

 > to handle errors, and one more functions to the .then method

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("wrongfilename.htm")
  .then(function(response) {
    // First function handles success
    $scope.content = response.data;
  }, function(response) {
    // Second function handles error
    $scope.content = "Something went wrong";
  });
});

 

 

4. JSON

 > The data you get from the response is expected to be in JSON format

 > JSON is a great way of transporting data, and it is easy to use within AngularJS, or any other JavaScript

<div ng-app="myApp" ng-controller="myCtrl">
 <ul>
  <li ng-repeat="x in myData">
   {{x.Name + ', ' + x.Country}}
  </li>
 </ul>
</div>

<script>
 var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope, $http){
  $http.get("customer.php").then(function(response){
   $scope.myData = response.data.records;
  });
 });
</script>

: On the server we have a file that returns a JSON objt containing 15 tmp data, all wrapped in array called records