Sunday, April 19, 2015

$http service in AngularJS

$http service in AngularJS is used to send AJAX request.

var promise = $http(config);

Here the config parameter is a JavaScript object which can contain the following properties

1. Method
2. URL
3. Params
4. Headers
5. Data
6. Timeout
7. Cache
8. TransformRequest
9. TransformResponse
10. Withcredentials

1. Method : The method property can be GET, POST, PUT, DELETE. The method property type is String.

2. URL : URL of AJAX call. The URL property type is String.

3. Params : The Params property is used to set any additional request parameters to be appended to the URL query string. The Params property is a JavaScript object.

4. Headers : The header property is used to set any additional HTTP headers you want to sent to the server. The header property is a JavaScript object.

5. Data : The data property contains data to be sent to the server. Only PUT and POST request contains data property. The data property type is a object.

6. Timeout : The timeout property is used to set the timeout  for the AJAX call, when the timeout limit is reached, the AJAX call is aborted. The timeout is specified in milliseconds

7. Cache : The cache property is used to enable XHR GET request caching.

8. TransformRequest : The transformRequest property is used to set a function which can transform the request object before it is sent to the server.

9. TransformResponse : The transformResponse property is used to set a function which can transform the response sent back from the server, before it is passed to your application.


$http(config) return a "promise" object. This promise object has two functions success() and error(). Each of these two functions take a callback function as parameter. If the AJAX request succeeds, the callback function passed to the success() function is executed. if the AJAX request fails, the callback function passed to the error() function is executed.

Both functions take the following parameters :

1. Data
2. Status
3. Headers
4. Config

1. Data : The data parameter is the JSON object returned by the server.

2. Status : The status parameter is the HTTP status code returned by the server.

Format is

$http({
method : string, // GET, POST, PUT, DELETE etc
url : string, // URL of resource being requested
params : object, // Query parameters
headers : object,
data : object,
timeout : number,
cache : boolean,
transformRequest : function,
transformResponse : function,
withCredentials : boolean
})
.success(function(data, status, headers, config) {
// success
})
.error(function(data, status, headers, config) {
// error
})
view raw gistfile1.js hosted with ❤ by GitHub
GET Request Example

$http({
method : 'GET',
URL : '/getAddress'
param : { addressId : '55140073de3ae69038514625' }
})
.success(function(data, status, headers, config) {
$scope.address = data;
})
.error(function(data, status, headers, config) {
console.log('error in fetching address');
})
view raw gistfile1.js hosted with ❤ by GitHub
PUT Request Example

$http({
method : 'PUT',
URL : '/updateAddress/' + addressId
data : {
building: 'tower 18',
houseNo: '1202',
landmark: 'civic center',
society: 'amanora',
};
})
.success(function(data, status, headers, config) {
console.log('address updated successfully');
})
.error(function(data, status, headers, config) {
console.log('error in updating address');
})
view raw gistfile1.js hosted with ❤ by GitHub
POST Request Example

$http({
method : 'POST',
URL : '/createAddress/'
data : {
building: 'tower 18',
houseNo: '1202',
landmark: 'civic center',
society: 'amanora',
};
})
.success(function(data, status, headers, config) {
console.log('address created successfully');
})
.error(function(data, status, headers, config) {
console.log('error in creating address');
})
view raw gistfile1.js hosted with ❤ by GitHub

DELETE Request Example

$http({
method : 'DELETE',
URL : '/deleteAddress/' + addressId
})
.success(function(data, status, headers, config) {
console.log('address deleted successfully');
})
.error(function(data, status, headers, config) {
console.log('error in deleteing address');
})
view raw gistfile1.js hosted with ❤ by GitHub

2 comments:

  1. very informative & different one....
    I would like to share the information to get jobs easily
    Angularjs Training In Hyderabad

    ReplyDelete
    Replies
    1. Thank you, I am glad that you find this article useful :)

      Delete