how to create synchronous using $http in angular.js?

Question

I am beginner in java script and does not understand how to create synchronous Ajax call using $http object if anybody have idea please guide me, how i can make Ajax call by $http sychronously

my code as follow -

var AjaxModule = angular.module('AjaxModule',[]);
AjaxModule.controller('AjaxController',function($scope,$http){
    var path ="http://localhost/services_ajax/";
    var serviceName = 'customers'; 
    var response = $http.get(path+serviceName);
    response.success(function(data){
        $scope.list = data;
    });
});

Answer 1

You can not make a synchronous request using $http service. It is hard coded to be asynchronous in the service code. You can, however, make your own synchronous service.

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

myApp.service('synchronousService', [function () {
    var serviceMethod = function (url) {
        var request;
        if (window.XMLHttpRequest) {
            request = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            request = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            throw new Error("Your browser don't support XMLHttpRequest");
        }

        request.open('GET', url, false);
        request.send(null);

        if (request.status === 200) {
            return request.responseText;
        }
    };
    return serviceMethod;
}]);

myApp.controller('AppCtrl', function ($scope, synchronousService) {
    var url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20%28%22AAPL%22%29&env=store://datatables.org/alltableswithkeys";
    alert(synchronousService(url));
});

Here is working jsfiddle: http://jsfiddle.net/zono/uL0e1j3e/18/

Just to say that the synchronous request is a very bad idea.

Answer 2

you can use the promise concept of angular. promise provide the synchronous facility. i demonstrate you to by giving the demo example

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

app.controller("ctrl",function($scope,$q,$timeout){

var task1 = $q.defer();
task1.promice.then(function(value){
       // write a code here for your task 1 success
} ,function(value){
       // write a code here for your task 1 error
});

var task2 = $q.defer();
task2.promice.then(function(value){
      // write a code here for your task 2 success
} ,function(value){
     // write a code here for your task 2 error
});

$q.all([task1.prpmice,task2.promice])
     .then(function(){
             // write a code which is executed when both the task are completed
    } ,function(){
            // write a code which is executed when some of the task are rejected
});

}

the above code will help you to understand the promice concept of angular