angularjs $http.get $http.post $http.put $http.delete $http.jsonp $http.patch

$http.get $http.post and $http.put in angularjs

The $http service is provide the communication over the browsers using to XMLHttpRequest object or JSONP object.

The types of $http service

    $http.get()
    $http.head()
    $http.post()
    $http.put()
    $http.delete()
    $http.jsonp()
    $http.patch()

The General usage of $http service.

    $http.get('/putUrl').success(callback);
    $http.post('/putUrl', data).success(callback);
    $http.put('/putUrl', data).success(callback);

//The $http.post() and $http.put() methods accept any object value or a string value in the place of data.

The $http service is an asynchronous call.
The $http() service returns a $promise that we can add handlers .then() method

for example:
 $http({
        url: 'licalhost://8080/api/updateEmployee/ids',
        method: "POST",
        data: { 'id': 1 }
    })
    .then(function (response) {
        // if success then todo here
    },
    function (response) {
        // if failed then todo here
    }
 );

We can set the default Content Type as given below.
$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

Types of HTTP Headers

The $http service add HTTP headers automatically for all requests.

1. The default headers for all request.

The code look like : $httpProvider.defaults.headers

2. The common headers for all request.
The code look like : $httpProvider.defaults.headers.common

3. The POST headers for all request.
The code look like : $httpProvider.defaults.headers.post

4. The PUT headers for all request.
The code look like :  $httpProvider.defaults.headers.put


Example for $http.get()

    var app = angular.module('myapp', []);
    app.controller('MainCtrl', function ($scope, $http) {
        //This is the GET request.
    $http.get('licalhost://8080/api/getEmployee/id1').
        success(function (data, status, headers, config) {
            // when success the get response data.
            // The callback will be called asynchronously.
            $scope.employee = data;
        }).
        error(function (data, status, headers, config) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
            alert(status);
        });
    });

Example for $http.post()

    var app = angular.module('myapp', []);
    app.controller('MainCtrl', function ($scope, $http) {
   
    //This is the  POST request.
    $http.post('licalhost://8080/api/updateEmployee/', {
            id: 'emp01',
            name: 'Anil Singh',
            city: 'Noida'
        }).
        success(function (data, status, headers, config) {
            // when success the get response data.
            // The callback will be called asynchronously.
        }).
        error(function (data, status, headers, config) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
            alert(status);
        });      
    });


ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.