Angularjs vs jQuery – Use http provider to make ajax request

Sam Deering Sam Deering providers

Inside of a directive you will need to inject the $http service. Angularjs use http provider to make ajax request

Before (jQuery way):

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
var ajaxRequest = $.ajax({
    type: "POST",
    url: "user/isEmailAvailable",
    data: {
        "email": $elem.val(),
        "dbField": attrs.ngUnique
    }
});
 
ajaxRequest.done(function(data) {
    console.log('ajax success...');
    ctrl.$setValidity('unique', data.status);
});
 
ajaxRequest.fail(function(jqXHR, textStatus) {
    console.log("ajax fail...(" + textStatus + ").");
});
 

After (Angular way):

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
$http({
    method: 'POST',
    url: '/user/isEmailAvailable',
    data: {
        "email": $elem.val(),
        "dbField": attrs.ngUnique
    }
}).
success(function(data, status, headers, config) {
    console.log('ajax success...');
    console.log(data);
    ctrl.$setValidity('unique', data.status);
}).
error(function(data, status, headers, config) {
    console.log("ajax fail...(" + status + ").");
});
 

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

Leave a Reply

Your email address will not be published. Required fields are marked *