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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.