---
title: "What is dependency injection (DI) in AngularJS?"  
description: "What is dependency injection (DI) in AngularJS?"  
author: "Sandra Emily"  
published: 2024-06-24  
updated: 2024-06-25  
canonical: https://www.mindstick.com/forum/160774/what-is-dependency-injection-di-in-angularjs  
category: "angular js"  
tags: ["web development", "angular js", "front-end development"]  
reading_time: 2 minutes  

---

# What is dependency injection (DI) in AngularJS?

What is dependency injection (DI) in AngularJS?

## Replies

### Reply by Ravi Vishwakarma

[Dependency Injection (DI) in AngularJS](https://www.mindstick.com/forum/157876/what-is-dependency-injection-and-how-is-it-used-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

1. **Injector**: The injector is a service locator that looks up and instantiates the required dependencies.
2. **Provider**: Configures how the dependency is created. AngularJS provides several built-in providers like `$provide`.
3. **Service**: The actual singleton objects or functions that provide a specific functionality.
4. **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.

```javascript
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.

```javascript
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

1. **Service Registration**: Services are registered with the module using `service`, `factory`, `provider`, etc.
2. **Dependency Declaration**: Dependencies are declared in components (**controllers**, **services**, **directives**, etc.) using one of the annotation methods.
3. **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.


---

Original Source: https://www.mindstick.com/forum/160774/what-is-dependency-injection-di-in-angularjs

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.