AngularJS: Passing Data to $http.get Request

This article will cover methods for passing data to HTTP GET requests using AngularJS.

In AngularJS, making HTTP GET requests with parameters is a common requirement when fetching data from a server. While HTTP GET requests traditionally don’t include a request body, AngularJS provides convenient ways to pass parameters via query strings or headers.

Using params Option in $http

This section introduces the first method of passing parameters in an HTTP GET request using AngularJS. It highlights the usage of the params option within the $http service.

Example

$http({
    url: user.details_path, 
    method: "GET",
    params: { user_id: user.id }
});

Explanation:

• The $http service is used to make HTTP requests in AngularJS.
• The params option is used to pass parameters as an object to the GET request.

Directly Passing Params to $http.get()

This part showcases a more concise way of passing parameters to an HTTP GET request by directly providing the parameters within the $http.get() method call.

Example

$http.get(user.details_path, {
    params: { user_id: user.id }
});

Explanation:

• Instead of using the $http service with an object containing parameters, parameters are directly included within the params property of the $http.get() method call.

Utilizing get(url, config) (AngularJS v1.4.8 and later)

Here, it’s mentioned that starting from AngularJS v1.4.8, a get(url, config) method is available for making GET requests. This method allows for a more structured approach by separating parameters and headers into a config object.

Example

var data = {
    user_id: user.id
};

var config = {
    params: data,
    headers: { 'Accept': 'application/json' }
};

$http.get(user.details_path, config).then(function(response) {
    // Process the response here.
}, function(response) {
    // Handle errors.
});

Explanation:

• The get() method is called with the URL and a config object containing parameters (params) and headers.
• This approach provides better readability and organization compared to directly passing parameters within the URL.

Sending Params and Headers in GET Request

This section demonstrates how to send both parameters and headers in an HTTP GET request using AngularJS. It’s useful for scenarios requiring additional customization in the request.

Example

$http.get('https://www.your-website.com/api/users.json', {
    params:  { page: 1, limit: 100, sort: 'name', direction: 'desc' },
    headers: { 'Authorization': 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==' }
})
.then(function(response) {
    // Request completed successfully.
}, function(x) {
    // Handle request errors.
});

Explanation:

• An HTTP GET request is made to a specified URL with parameters (params) and headers included in the config object.
• Success and error callbacks are provided to handle the response and potential errors.

Creating a Service for Reusability

Here, a service named UserService is created to encapsulate the logic for making HTTP GET requests to retrieve user data. Services in AngularJS are commonly used for code organization and reusability.

Example

var mainApp = angular.module("mainApp", []);

mainApp.service('UserService', function($http, $q) {
    this.getUsers = function(page = 1, limit = 100, sort = 'id', direction = 'desc') {
        var dfrd = $q.defer();
        $http.get('https://www.your-website.com/api/users.json', 
            {
                params: { page: page, limit: limit, sort: sort, direction: direction },
                headers: { Authorization: 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==' }
            }
        )
        .then(function(response) {
            if (response.data.success == true) { 
                // Handle success.
            } else {
                // Handle other cases.
            }
        }, function(x) {
            // Handle request errors.
            dfrd.reject(true);
        });
        return dfrd.promise;
    }
});

Explanation:

• A service named UserService is defined within the AngularJS module.
• Within the service, a method named getUsers is defined to fetch user data with parameters and headers.
• The method returns a promise for handling asynchronous operations.

Adding Parameters to the End of the URL

This section presents a simple method of adding parameters directly to the end of the URL in an HTTP GET request. While not as flexible as the other methods, it’s suitable for straightforward scenarios.

Example

$http.get('path/to/script.php?param=hello').success(function(data) {
    alert(data);
});

Explanation:

• Parameters are appended to the URL as query strings using the ? separator.
• This approach is straightforward but less flexible compared to using the params option or a config object.

Remember to choose the method that best fits your project’s requirements and follow any version-specific guidelines for AngularJS.