AngularJS - SPLessons

AngularJS Ajax

Chapter 31

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

AngularJS Ajax

AngularJS Ajax

shape Description

Any application data is fetched from web server, and web server need to communicate with the database to send back the data required.

These requests are sent in various ways, such as:

$http control is provided by AngularJS, which functions as a service to read data from the server. The database is called by the server to get the required records in JSON format.

shape Conceptual
figure

shape Built-in
Functions

HTTP is a service and is just an object with methods to make HTTP calls. The $http service provides several built-in functions to send AngularJS AJAX requests. The functions are as follows:

  1. $http.get(url, config)
  2. $http.post(url, data, config)
  3. $http.put(url, data, config)
  4. $http.delete(url, config)
  5. $http.head(url, config)

$http.get(url, config): is commonly used to read information from the server and is the shortcut method of $http service.

$http.post(url, data, config)and $http.put(url, data, config) : are considered as data parameters, which contains the data to be sent to server in JSON string.

$http.delete(url, config) : deletes the information from a database.

To access $http service in a controller, $scope is used. It has to have the $ sign in front and letters should be represented in lowercase, because JavaScript is a case-sensitive language.

shape Examples

The following code can be used to get the data from the web server.

index.html

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="Controller.js"></script>
  
  </head>

  <body ng-app="spApp">
      <h1>AJAX Http</h1>
      <div ng-controller="SPController">
        <p>Today's welcome message is:</p>
        <h1>{{message}}</h1>
      </div>
      <p>The $http service requests a page on the server, and the response is set as the value of the "message" variable.</p>
  </body>

</html>

Controller.js

var MyApp = angular.module('spApp', []);
MyApp.controller("SPController", function($scope, $http) {
  var url="message.php";
  $http.get(url)
  .success(function(response) {
      $scope.message = response;
  });
});

message.php

SPLessons AngularJS Tutorial

Output:

From the above example, response is a parameter to success() and error() functions depending on the Ajax request. If the Ajax request is successful, response parameter is passed to success() function or error() function in the case of failure.

Properties

shape Description

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

.config – {Object} – this object generates the request.
.data – {string/object} – carries the response from the server.
.headers – {function} – brings the header information.
.status – {number} – defines the HTTP status.
.statusText – {string} – defines the HTTP status.

shape Example

Below is an example demonstrating the functionality of $http service properties.

index.html

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.3.14" data-semver="1.3.14" src="https://code.angularjs.org/1.3.14/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="Controller.js"></script>
  </head>

  <body>
    <div ng-app="spApp" ng-controller="SPController">
      <p>Data : {{content}}</p>
      <p>Status : {{statuscode}}</p>
      <p>Response Headers: {{headers}}</p>
    </div>
    <p>The response object has many properties. This example demonstrate the value of the data, status, and header properties.</p>
    <script>

    </script>
  </body>

</html>

Controller.js

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

welcome.htm

Hello!! Welcome to SPLessons

Output:

Summary

shape Key Points

  • $http control is provided by AngularJS, which functions as a service to read data from the server.
  • $http service returns a promise object. success() and error()are the two functions of promise object.
  • The response from the server is an object with config, data, status, statusText and headers properties.