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"); 
    }
});

Community · Accepted Answer · 2020-06-20 09:12:55Z

23

+50

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, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 31, 2013 at 19:01

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Run Over a year ago

Thanks. Can I know what are ** for?

Ramesh Rajendran Over a year ago

@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.

Run Over a year ago

THanks. I do find jquery method is easier and more straight forward. don't you think?

Ramesh Rajendran Over a year ago

@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 :)

psp Over a year ago

could you improve the english grammar in your answer a little bit, would be easier to understand

Jeff Hubbard · Accepted Answer · 2013-12-31 16:28:10Z

2

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, 2013 at 16:28

Jeff Hubbard

9,9123 gold badges33 silver badges29 bronze badges

2 Comments

Run Over a year ago

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(); }.

Jeff Hubbard Over a year ago

So... yeah, you should instead use a request and response interceptor and show/hide that based on the number of pending HTTP requests.

Collectives™ on Stack Overflow

Angularjs $http VS jquery $.ajax

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related