Monday , January 22 2018
Home / angularjs / Angular http (AJAX) Example Tutorials

Angular http (AJAX) Example Tutorials

In this tutorials, we are going to learn about how to make AJAX calls in AngularJs Framework. In Angular http service is used to make the AJAX calls. In the previous tutorials we have discussed all predefined services and custom services, if you are not coming from those tutorials, it is recommended to see once.

What is AJAX ?

AJAX stands for Asynchronous Javascript And Xml.

AJAX is a client side programming technique, used to communicate with server asynchronously.

This technique is initially identified and used by google team.

Advantages of AJAX :

  • Quick Response.
  • Reduced the burden on server.
  • Reduce the network traffic.
  • Comfortable for the userd, no need to wait more time for response.
  • Partial page updates.

Implementing AJAX in programming :

  • AJAX is a client side programming technique.
  • It is implemented with the help of Java script
  • If we implement AJAX calls with basic Java script, it will be a difficult and time consuming.
  • In order to make AJAX programming easy, there are several Javascript libraries are available.

                MooTools Etc.,

AJAX as Angular http :

AngularJs Framework provides special service called $http to implement AJAX programming.

By using Angular http service, we can communicate with server asynchronously.

How to use Angular http service :

The following is the sytax to use the angular $http service;

                    url: “resourceurl”,
                    method: “GET/POST”
                }).then(function Succes(response) {
                    // Handling Success Data
                }, function Error(response) {
                   // Handling Error Data

Angular http Example :

<!DOCTYPE html>
    <script src=""></script>

            height: 30px;
            width: 200px;
            padding: 5px;
            border:1px solid green;

        <div ng-app="myApp" ng-controller="ajaxController"> 
            <h3>AngularJs AJAX With JSON Calls</h3>
                <li ng-repeat="x in myData">

            var app = angular.module('myApp', []);
            app.controller('ajaxController', function ($scope, $http) {
                    url: "books.php",
                    method: "GET"

                }).then(function Succes(response) {
                    $scope.myData =;
                }, function Error(response) {



Resource file : books.php

$booksArray = array();
array_push($booksArray, "Java");
array_push($booksArray, "C");
array_push($booksArray, "C++");
array_push($booksArray, "Spring");
array_push($booksArray, "Hibernate");
array_push($booksArray, "AngularJS");
array_push($booksArray, "JQuery");
echo json_encode($booksArray);

Output :

AngularJs AJAX With JSON Calls

  • Java
  • C
  • C++
  • Spring
  • Hibernate
  • AngularJS
  • JQuery


About chandrashekhar

you have reach this so far, that shows you like what you are learning. Then why don’t you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,


AngularJs Custom Service Example

In the previous tutorials we have discussed about what is AngularJs service, what are all …

Leave a Reply

Your email address will not be published. Required fields are marked *