What is dependency injection (DI) in AngularJS?

Question

Ravi Vishwakarma · Answer

Dependency Injection (DI) in AngularJS is a software design pattern that deals with how components get hold of their dependencies. It allows the creation of dependent objects outside of a class and provides those objects to a class in various ways. DI is integral to AngularJS as it helps manage the dependencies of various components like services, controllers, and directives, making the code more modular, maintainable, and testable.

Key Concepts of Dependency Injection in AngularJS

Injector: The injector is a service locator that looks up and instantiates the required dependencies.
Provider: Configures how the dependency is created. AngularJS provides several built-in providers like $provide.
Service: The actual singleton objects or functions that provide a specific functionality.
Dependency Annotation: The way dependencies are declared so that the injector knows what to inject.

1. Inline Array Annotation

The most robust way to declare dependencies, especially when minification is involved.

var app = angular.module('myApp', []);

app.controller('MainController', ['$scope', 'MathService', function($scope, MathService) {
    $scope.result = MathService.add(5, 3);
}]);

app.service('MathService', function() {
    this.add = function(a, b) {
        return a + b;
    };
});

2. $inject Property Annotation

Another approach where dependencies are explicitly specified using the $inject property.

var app = angular.module('myApp', []);

var MainController = function($scope, MathService) {
    $scope.result = MathService.add(5, 3);
};
MainController.$inject = ['$scope', 'MathService'];

app.controller('MainController', MainController);

app.service('MathService', function() {
    this.add = function(a, b) {
        return a + b;
    };
});

How DI Works in AngularJS

Service Registration: Services are registered with the module using service, factory, provider, etc.
Dependency Declaration: Dependencies are declared in components (controllers, services, directives, etc.) using one of the annotation methods.
Injector Resolution: When AngularJS initializes the component, it uses the injector to find and inject the required dependencies based on the declared annotations.

Benefits of DI

Modularity: Encourages breaking down applications into smaller, manageable pieces.
Testability: Makes it easier to mock dependencies during unit testing.
Maintainability: Reduces tight coupling between components, making it easier to manage and update code.

forum

What is dependency injection (DI) in AngularJS?

Can you answer this question?

1 Answers

How DI Works in AngularJS

Benefits of DI