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

Answer 1

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

Answer 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?