AngularJS Service: $http

The $http service is included in the main AngularJS module and it is the primary means of sending and receiving external data.

Details of the $http service can be found here: https://docs.angularjs.org/api/ng/service/$http

GET Request

The following is an example of a get request using API that has been deprecated recently:

var myApp = angular.module('myApp', []);

myApp.controller('mainController', ['$scope', '$filter', '$http', function ($scope, $filter, $http) {
    $http.get('/api')
        .success(function (result) {
            $scope.rules = result;
        })
        .error(function (data, status) {
            console.log(data);
        });
}]);

Under the new API the request would be made as shown next. In this case the $http service (function) takes a configuration object as an argument. The API link above mentions all the properties in the configuration object. The resulting object has a then function that takes two callback functions as arguments: the first function handles successful requests and the second function handles request errors.

$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

POST Request

Here we have a POST request under the previous API:

var myApp = angular.module('myApp', []);

myApp.controller('mainController', ['$scope', '$filter', '$http', function ($scope, $filter, $http) {
    $scope.newRule = '';
    $scope.addRule = function () {
        $http.post('/api', { newRule: $scope.newRule })
            .success(function (result) {
                console.log(result);
                $scope.rules = result;
                $scope.newRule = '';
            })
            .error(function (data, status) {
                console.log(data);
            });
    };
}]);

In order to submit the request the newRule variable would be bound to an input element using the ng-model directive. The addRule() function would be linked to an anchor element using the ng-click directive:

Add rule: <input type="text" ng-model="newRule" />
<a href="#" class="btn btn-default" ng-click="addRule()">Add</a>

With the new API the POST request would be submitted as follows:

var req = {
    method: 'POST',
    url: 'http://example.com',
    headers: {
        'Content-Type': undefined
    },
    data: { test: 'test' }
}

$http(req).then(function(){...}, function(){...});

AngularJS Service: $http