AngularJS HTTP & Services – Data Communication & Dependency Injection

Introduction – Manage APIs and Services in AngularJS

AngularJS provides robust tools for interacting with backends via its $http service and Dependency Injection (DI) system. This empowers you to send requests (GET, POST, PUT, DELETE, JSONP), manage shared business logic, and create modular, testable services. Whether you’re building CRUD operations or simple fetches, AngularJS’s DI and $http simplify it all.

What You’ll Learn:

• Making HTTP requests using $http
• Handling diverse methods: GET, POST, PUT, DELETE, and JSONP
• Building CRUD operations in controllers
• Leveraging AngularJS DI system
• Crafting custom, injectable services and factories

Topics Covered

AngularJS HTTP Client

Inject $http to communicate with REST APIs:

angular.module('app').controller('MainCtrl', function($scope, $http) {
  $http.get('/api/users').then(response => {
    $scope.users = response.data;
  });
});

You can configure headers, params, and callbacks via promise-based API.

HTTP Methods

AngularJS supports multiple HTTP methods:

$http.post('/api/users', newUser)
$http.put('/api/users/' + id, updatedUser)
$http.delete('/api/users/' + id)
$http.jsonp('/api/data?callback=JSON_CALLBACK')

You can pass config objects to set headers, query params, timeouts, and more.

CRUD Operations

Example flow inside a controller:

$scope.users = [];
$http.get('/api/users').then(r => $scope.users = r.data);

$scope.addUser = user => {
  $http.post('/api/users', user).then(r => $scope.users.push(r.data));
};

$scope.deleteUser = id => {
  $http.delete('/api/users/' + id).then(() => {
    $scope.users = $scope.users.filter(u => u.id !== id);
  });
};

This pattern covers full lifecycle from Create to Delete.

Dependency Injection & Injectable Services

AngularJS DI allows sharing logic via services or factories:

angular.module('app')
  .factory('UserService', function($http){
    return {
      list: () => $http.get('/api/users'),
      create: user => $http.post('/api/users', user)
    };
  })
  .controller('MainCtrl', function($scope, UserService) {
    UserService.list().then(r => $scope.users = r.data);
  });

Services are singletons, ideal for caching, global state, or shared business logic.

Summary – Next Steps

AngularJS’s $http and DI system are fundamental for building data-centric, maintainable applications. Structure your API calls well and encapsulate common logic into services for cleaner code and easier testing.

Key Takeaways:

• Use $http for all HTTP interactions
• Apply different HTTP methods based on action (GET, POST, etc.)
• Automate CRUD workflows in your controllers/services
• Leverage AngularJS’s DI to share logic via services or factories

Real-World Use Cases:
User management, dashboards, analytics, content editors, and any app needing robust backend integration.

Frequently Asked Questions (FAQs)

How do I handle HTTP errors in AngularJS?

Use promise catch: $http.get(...).then(...).catch(err => ...); for handling server errors gracefully.

Can I set global headers or interceptors?

Yes—configure $httpProvider.interceptors in a config block to manage tokens or logging across all requests.

What’s the difference between services and factories?

A factory returns an object directly; a service is a constructor function used with new. Both are singletons via DI.

How do I handle JSONP with AngularJS?

Use $http.jsonp(url + '?callback=JSON_CALLBACK') and AngularJS handles wrapping and callback for you.

Are services singleton instances?

Yes—injecting the same service returns the same instance app-wide, perfect for shared state or caching.