Angularjs $http VS jquery $.ajax

Question

Can I set context in Angularjs $http just like we can do it in jQuery's $.ajax?

define([
    'app'
], function(app) {

    app.controller("controller1", function($scope, $route, $http) {

        return $http({
            method: 'GET',
            url: 'server.php'
        }).then(function(response) {
            $scope.contacts = response.data;
        });
    });
});

Also, there are more callbacks in jQuery's $.ajax, like .done, .promise which I can use them to manipulate the context like this below, I wonder if I can do the same in Angularjs?

$.ajax({
    type:       "GET",
    dataType:   "HTML",
    url:        'server.php',
    context:    $("#container"),
    async:      true,
    beforeSend: function() {

        $(this).html('loading...');
    },
    success: function (returndata, status, jqxhr) {
        $(this).html(returndata).hide().fadeIn();
    },
    }).fail(function() { 
        alert("error"); 
    }).done(function(returndata) {
    },
    .always(function() { 
        alert("complete"); 
    }
});

score 24 · Answer 1 · edited Jun 20 '20 at 09:12

24

Both are same

$http is referred from angular.js script

$.ajax is referred from jquery script

and $http does not support async:false
$.ajax supports async:false

You can do it by using angular.js in this way

$http.get('server.php').success(function(response) {
            $scope.contacts = response.data;
        }).error(function(error)
    {
//some code    
});

but async: true, is not supported in angular.js.

If you need stop asynchronous callback, then you must use $.ajax way

More details please see this discussion : from jquery $.ajax to angular $http

Edit:

How to show hide in angular js

<div ng-show="IsShow">xx</div>



  $http.get('server.php').success(function(response) {
                $scope.contacts = response.data;
                $scope.IsShow=true;
                $scope.$apply();
            }).error(function(error)
        {
           $scope.IsShow=false; 
           $scope.$apply(); 
    });

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 31 '13 at 19:01

Ramesh Rajendran

37,412
45
153
234

Thanks. Can I know what are `**` for? – Run Jan 01 '14 at 07:03
@lauthiamkok `**` is nothing. it's SO bold line mark. `$scope.$apply()` means `$scope.IsShow=true` apply for the Html. But it's maybe don't need. – Ramesh Rajendran Jan 01 '14 at 07:06
THanks. I do find jquery method is easier and more straight forward. don't you think? – Run Jan 01 '14 at 07:18
2

@lauthiamkok , Yep you can do it jquery. So why you use angular.js? you can do it by using jquery or angular.js . both are best. but angular.js helps to binding fast than jquery. Happy coding :) – Ramesh Rajendran Jan 01 '14 at 07:22
could you improve the english grammar in your answer a little bit, would be easier to understand – psp May 09 '14 at 03:31

score 3 · Answer 2 · answered Dec 31 '13 at 16:28

3

Just use Function.bind() on the function you hand to promise.then to maintain the context you want. For example:

return $http({
    method: 'GET', 
    url:'server.php'
}).then(function(response) {
    $scope.contacts = response.data;
}.bind(this));

However, I'm noticing that your callbacks are all manipulating elements--things you don't need to do in Angular. Is there something specific you're trying to do but unable to with a callback?

answered Dec 31 '13 at 16:28

Jeff Hubbard

9,822
3
30
28

thanks Jeff. I only need to do two things like I do in `$.ajax` - 1. `beforeSend: function() { $(this).html('loading...'); }` and 2 - `success: function (returndata, status, jqxhr) { $(this).hide().fadeIn(); }`. – Run Dec 31 '13 at 16:31
So... yeah, you should instead use a request and response interceptor and show/hide that based on the number of pending HTTP requests. – Jeff Hubbard Dec 31 '13 at 16:44

Angularjs $http VS jquery $.ajax

2 Answers2

Linked