---
title: "Services and Dependency Injection in AngularJS"
description: "Services and Dependency Injection (DI) are two core concepts in software development, particularly in the context of building modular, maintainable, S"
author: "Anubhav Sharma"
published: 2024-05-15
updated: 2024-05-16
canonical: https://www.mindstick.com/articles/335832/services-and-dependency-injection-in-angularjs
category: "angular js"
tags: ["angular js", "javascript framework", "front-end development"]
reading_time: 8 minutes
---
# Services and Dependency Injection in AngularJS
#### Services:
In [software engineering](https://www.mindstick.com/forum/145574/what-are-coding-standards-in-software-engineering), a service is a **self-contained** unit of functionality that performs a specific task or provides a particular capability. It can be thought of as a module or component that encapsulates related functionality. **Services** can range from simple **utilities** like **logging** or **[data validation](https://answers.mindstick.com/qa/111795/how-do-i-implement-data-validation-and-sanitization-in-my-applications)** to [complex business](https://www.mindstick.com/forum/161972/is-sql-more-vital-for-solving-complex-business-problems-or-power-bi-tableau-for-insights) **logic components** or **external integrations** like **database access** or **API calls**. The use of services promotes **modularity**, **reusability**, and **separation** of concerns in [software architecture](https://www.mindstick.com/articles/337598/define-the-importance-of-microservices-in-modern-software-architecture).
#### Dependency Injection (DI):
**[Dependency Injection](https://www.mindstick.com/interview/1109/what-are-the-different-types-of-dependency-injection-explain-with-examples)** is a design pattern and a technique used to implement the **inversion of control** (IoC) principle in [software development](https://www.mindstick.com/services/erp-software-development). In **DI**, the dependencies of a component (e.g., a **class or a service**) are provided from outside rather than being created internally. This promotes **loose coupling** between **components** and makes them easier to test and maintain.
There are different forms of DI, including **constructor injection**, **setter injection**, and **method injection**. The key idea behind **DI** is that components should not create or manage their dependencies directly but should instead rely on an **external entity** (often called a container or injector) to provide those dependencies.
## Combining Services and Dependency Injection:
1. In many [modern software](https://answers.mindstick.com/qa/114575/what-role-does-artificial-intelligence-play-in-modern-software-applications) architectures, services are often instantiated and managed using **dependency injection** frameworks or containers.
2. Dependency injection allows services to declare their **dependencies**, and the DI container is responsible for providing those dependencies when a service is instantiated.
3. This approach simplifies the management of **dependencies**, **promotes modular design**, and enables easier unit testing and maintenance.
## There are some Built-in services and their usage
| **Service** | **Description** |
| --- | --- |
| **$http** | Used for making **XMLHttpRequest (XHR)** to the server and handling responses. |
| **$q** | Provides a framework for promise-based [asynchronous operations](https://www.mindstick.com/forum/160099/what-is-a-callback-function-in-javascript-and-how-is-it-used-in-handling-asynchronous-operations). |
| **$timeout** | Executes a function after a specified delay. |
| **$interval** | Executes a function repeatedly at specified intervals. |
| **$rootScope** | Represents the root scope of the AngularJS application and provides methods for event handling. |
| **$scope** | Represents the scope of a controller or directive. |
| **$location** | Provides access to the URL in the browser's address bar. |
| **$route** | Allows defining routes for the application and mapping them to controllers and templates. |
| **$routeParams** | Provides access to parameters passed in the URL when using $route. |
| **$filter** | Allows formatting and filtering data in templates using AngularJS filters. |
| **$log** | Provides a logging service for outputting messages to the console. |
| **$exceptionHandler** | Handles exceptions that occur within AngularJS code. |
| **$injector** | Manages dependencies and provides instances of services. |
| **$compile** | Compiles an HTML string or DOM into a template function. |
| **$templateCache** | Provides a cache for storing and retrieving HTML templates. |
## Use of $http Service:
In AngularJS, the **$http** service is used to make AJAX requests to fetch or send data to a server. It provides methods for all HTTP request types, such as **GET**, **POST**, **PUT**, **DELETE**, etc.
## Example -
```html
```
## Use of $timeout Service:
The **$timeout** service is AngularJS' version of the **window.setTimeout** function.
## Example -
```html
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});
```
**Use of $[interval Service](https://www.mindstick.com/forum/160657/how-to-use-interval-service-in-angularjs)**
The **$interval** service is AngularJS' version of the **window.setInterval** function.
## Example -
```html
```
## Use of $log Service
The **$log** service allows you to log messages to the console.
## Example -
```html
$log.debug('Debug message');
$log.log(message);
```
## Use of $filter Service
The **$filter** service formats data for display in views.
## Example -
```html
$scope.formattedDate = $filter('date')(new Date(), 'yyyy-MM-dd');
```
**[Creating custom](https://answers.mindstick.com/qa/102693/what-are-the-features-of-google-s-cloud-automl-for-creating-custom-machine-learning-models) services with DI (Dependency Injection)**
Create an **index.html file** and add HTML and AngularJS code.
**Step 1.**
Create an HTML file, add some necessary code like HTML, head, and body tag, and add the angular JS CDN and bootstrap cdn for better UI and paste this bellow code in the body tag to generate UI for the users list.
```html
```
**Step 2.**
Next, create a **script tag** in the body tag and paste the code below to generate the angular js **custom service**, **filter**, and **controller**.
Create ‘`myApp`’ module in this code.
```html
var app = angular.module('myApp', []);
```
Create `UserService` with **dependency injection** to get data from APIs.
```html
// Service to handle HTTP requests
app.service('UserService', ['$http', '$log', function ($http, $log) {
var baseUrl = 'https://jsonplaceholder.typicode.com/users';
this.getUsers = function () {
$log.log(baseUrl);
return $http.get(baseUrl);
};
}]);
```
Create `controller` with **dependency injection** to set data to HTM or UI part.
```html
// here '$scope', 'UserService' is dependency injection on controller
app.controller('myController', ['$scope', 'UserService', function ($scope, UserService) {
// Function to fetch data
$scope.getUserData = function () {
UserService.getUsers()
.then(function (response) {
$scope.users = response.data; // return the response data
}, function (error) {
console.error('Error fetching data:', error);
});
};
// Call the function to fetch data on controller load
$scope.getUserData();
}]);
```
Create a custom filter for searching any keyword in the user list.
```html
// create custom search filter like type any keyword in search box and display in the ui format
app.filter('customFilter', function () {
return function (items, searchText) {
if (!searchText) {
return items;
}
searchText = searchText.toLowerCase();
return items.filter(function (item) {
return Object.keys(item).some(function (key) {
if (typeof item[key] === 'object') {
return Object.keys(item[key]).some(function (subKey) {
return String(item[key][subKey]).toLowerCase().includes(searchText);
});
}
return String(item[key]).toLowerCase().includes(searchText);
});
});
};
});
```
**Step 3.**
## Bind all code in one file
```html
AngularJS Todo List