AngularJS Services

AngularJS Services are objects or functions designed to perform specific tasks and share data or logic across the application. They promote code reuse, modularity, and separation of concerns. Services in AngularJS are singleton, meaning they are instantiated only once during the application's lifecycle and shared across components.

Built-in Services in AngularJS

1. $http Service

• Used to perform AJAX calls to communicate with the backend server.
• Example:

$http.get('/api/data')
  .then(function(response) {
    $scope.data = response.data;
  });

2. $location Service

• Reads or changes the URL in the browser.
• Example:

$location.path('/new-path');

3. $timeout Service

• Executes code after a specific delay.
• Example:

$timeout(function() {
  $scope.message = "Time's up!";
}, 2000);

4. $interval Service

• Executes a function repeatedly at specified intervals.
• Example:

$interval(function() {
  $scope.counter++;
}, 1000);

5. $log Service

• Logs messages to the browser console.
• Example:

$log.info('This is an info message.');

Custom Services

Creating a Custom Service

Custom services can be created using the .service, .factory, or .provider methods.

Using .service

• Example:

app.service('MathService', function() {
  this.square = function(num) {
    return num * num;
  };
});

Using .factory

• Example:

app.factory('DataFactory', function() {
  let data = [];
  return {
    addData: function(item) {
      data.push(item);
    },
    getData: function() {
      return data;
    }
  };
});

Using .provider

• Example:

app.provider('ConfigProvider', function() {
  let configValue = '';
  this.setConfig = function(value) {
    configValue = value;
  };
  this.$get = function() {
    return {
      getConfig: function() {
        return configValue;
      }
    };
  };
});

app.config(function(ConfigProviderProvider) {
  ConfigProviderProvider.setConfig('App Config');
});

Injecting Services

AngularJS services can be injected into controllers, directives, or other services using dependency injection.

• Example:

app.controller('MainController', function($scope, MathService) {
  $scope.result = MathService.square(5);
});

Key Benefits of AngularJS Services

1. Reusability: Code logic can be shared across the application.
2. Maintainability: Promotes cleaner and modular code.
3. Efficiency: Singleton nature reduces memory overhead.
4. Customizable: Allows creating tailored services to suit specific needs.

 

Summary

AngularJS Services are a powerful mechanism to encapsulate logic, handle data, and share functionality across the application. With built-in services like $http and $timeout and the ability to create custom services, AngularJS offers a flexible and modular approach to application development.