Why use $http in Angular instead of jquery's ajax?

Question

I don't understand when to use Angular over jquery for ajax requests.

For example, why should I use:

function ItemListCtrl ($scope, $http) {
    $http.get('example.com/items').success(function (data) {
    $scope.items = data;
  }
}

Instead of

  function ItemListCtrl ($scope) {
        $.ajax({type: "GET", url: 'example.com/items',
        success: function (result) {                    
                             $scope.items = data;
                    }
    });
   }

??

You can read http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background it will give you some hints to answer this question yourself ;) — DotDotDot, Sep 03 '13 at 16:05
I don't get why I'm getting minuses. I'm not manipulating the DOM here. I'm asking why does angular have it's own versions of ajax calls that's all. — Shai UI, Sep 03 '13 at 16:06
@foreyez Angular has it's own version of ajax calls because angularjs doesn't require jQuery to function, therefore if you weren't using jQuery, you would still be able to easily send cross-browser ajax requests using angularjs's ajax method. — Kevin B, Sep 03 '13 at 16:08
I see, I guess people are touchy to include both jquery and angular because jquery implies dom manipulations. I just always include jquery in my pages.. — Shai UI, Sep 03 '13 at 16:10

Daniel · Accepted Answer · 2013-09-19T17:05:04.113

9

My understanding is that there are a couple reasons the first is preferred:

$http is testable. It's actually possible to stub out the backend that it uses and test $http requests without actually sending requests.
$http does some common "stuff" for you, such as setting the content type to 'application/json' for you on POST requests.
$http returns a "promise" similar to other areas in angular, which means .success, .done are consistent with angular. jquery also allows for similar, but the syntax is slightly different.
$http success and error callbacks will execute inside of angular. If you use jQuery, then it might be necessary to call $apply, which can be tricky in some cases.
$http works without jQuery. So if you don't have some other reason to include jQuery, you could possibly save a few k by using $http.
$http is shorter. Subjective, but personally, it reads better to me.

Aside from those, though, you generally should be able to do either.

edited Sep 19 '13 at 17:05

answered Sep 03 '13 at 16:07

Daniel

3,021
5
35
50

Shorter? `$.get('/url').then(success)`. – Joseph Silber Sep 03 '13 at 16:11
2

`$http` also runs `success` and `error` callbacks within the Angular context, so you don't need to manually trigger a digest cycle. – Michael Benford Sep 03 '13 at 16:14
@JosephSilber not what the OP had, but that would be as short. It's annoyed me though that jQuery doesn't have similar shortcuts for put and delete also, though. I like the consistency of get/put/post/delete all being similarly concise. But like I said, subjective... – Daniel Sep 03 '13 at 16:32
The first one is enhough to realize that have to be used $http instead of jquery. – charino Sep 04 '13 at 12:16

Why use $http in Angular instead of jquery's ajax?

1 Answers1

Linked