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 stackoverflow.com/questions/14994391/… it will give you some hints to answer this question yourself ;) — DotDotDot
– DotDotDot, Commented Sep 3, 2013 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
– Shai UI, Commented Sep 3, 2013 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. — user400654
– user400654, Commented Sep 3, 2013 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
– Shai UI, Commented Sep 3, 2013 at 16:10

Daniel · Accepted Answer · 2013-09-19 17:05:04Z

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, 2013 at 17:05

answered Sep 3, 2013 at 16:07

Daniel

3,1315 gold badges39 silver badges53 bronze badges

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

4 Comments

Joseph Silber Over a year ago

Shorter? $.get('/url').then(success).

Michael Benford Over a year ago

$http also runs success and error callbacks within the Angular context, so you don't need to manually trigger a digest cycle.

Daniel Over a year ago

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

charino Over a year ago

The first one is enhough to realize that have to be used $http instead of jquery.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related