Skip to main content

Archive

Show more

Angular.js AJAX

by Rustcode

Angular.js AJAX

Angular.js AJAX allows developers to make asynchronous HTTP requests to fetch data from a server and update the application dynamically without refreshing the page.

1. Overview

Angular.js AJAX provides several features:

  • Asynchronous Requests: Angular.js allows developers to perform AJAX requests asynchronously, preventing the UI from blocking while waiting for the response.
  • HTTP Methods: Developers can use various HTTP methods such as GET, POST, PUT, DELETE, etc., to interact with RESTful APIs and retrieve or manipulate data.
  • Promise-based API: Angular.js uses promises to handle asynchronous operations, allowing developers to handle success and error responses gracefully.

2. Using AJAX in Angular.js

In Angular.js, AJAX requests can be made using the $http service:

// Inject $http service into controller
app.controller('MainController', function($scope, $http) {
    // Make a GET request
    $http.get('/api/data')
        .then(function(response) {
            // Success callback
            $scope.data = response.data;
        })
        .catch(function(error) {
            // Error callback
            console.error('Error fetching data:', error);
        });
});

In this example, a GET request is made to /api/data endpoint. The response data is assigned to the $scope.data variable.

3. Example

Here's an example demonstrating AJAX usage in an Angular.js application:


<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Angular.js AJAX Example</title>
</head>
<body ng-controller="MainController">
    <h1>Data from Server</h1>
    <ul>
        <li ng-repeat="item in data">{{ item }}</li>
    </ul>

    <!-- Angular.js scripts -->
    <script src="angular.js"></script>
    <script src="app.js"></script>
</body>
</html>

In this example, the fetched data is displayed using Angular.js's data binding features.

4. Conclusion

Angular.js AJAX simplifies the process of making asynchronous HTTP requests in Angular.js applications. By leveraging the $http service and promises, developers can fetch data from servers efficiently and update the UI dynamically, enhancing the user experience.

Comments

Post a Comment