Monday , February 27 2017
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.

                AngularJs
                JQuery
                DOJO
                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;

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

Angular http Example :


<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <style>

        li{
            height: 30px;
            width: 200px;
            padding: 5px;
            border:1px solid green;
        }
    </style>
    <body>

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

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

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

            });
        </script>

    </body>
</html>

Resource file : books.php


<?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

Hi Folks, 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+ ,

Check Also

AngularJs Custom Service Example

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

Leave a Reply

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