Dependency Injection and Services

What are Angular Services?

In Angular, a service is a class that encapsulates a specific piece of functionality or business logic that can be shared across multiple components. They act as singletons within the Angular dependency injection system, ensuring that there is only instance of a service throughout the application.

A service in Angular is a re-usable TypeScript class that can be used in multiple components across our Angular application.

Intuition

Suppose you have three components in your angular application as header, footer, and popup dialog box. Each of them has a button in common named as subscribe which does the subscription of mailing by the user. For this we have a function subscribe() which contains the business logic for this. In order to use this button in all three components we need to define the function subscribe() in all three. This will cause the code redundancy, which is the violation of DRY principle (DRY = Do not Repeat Yourself).

Disadvantages of this approach:

Violating DRY principle (Do not Repeat Yourself).
Component class should only be responsible for representing UI to the user.
Presentation logic must be separated from the business logic to make components more maintainable.

To avoid all these disadvantages, we need to write subscription logic in a separate centralized file which can be accessed by all the components. So whichever components need the subscription logic it can directly call the subscription logic written in the centralized file.

We can achieve this using Services in Angular.

For our example we can create a service (subscribeService). In this we will write the subscription logic and whichever component would want to use that subscription logic, can use the subscribe service for that.

In this way, we have single copy of that subscription logic which would be used throughout the application.

Advantages of this approach:

Services allows us to re-use a piece of code in multiple components, wherever it is required. In this way we avoid repeating a piece of code.
It allows us to separate business logic from UI logic. We write UI logic in component class and business logic in a service class. In this way it provides separation of concern.
We can unit test the business logic written in a service class separately without creating a component. Testing and debugging is easier with services.

Why are Services Important?

Services are essential in Angular development for several reasons:

Modularity: Services promote modularity by encapsulating functionality into reusable units, making it easier to manage and maintain code.
Separation of Concerns: Services help separate business logic from presentation logic, improving code organization and readability.
Code Reusability: Services can be injected into multiple components, directives, or other services, enabling code reuse across different parts of an application.
Dependency Injection: Angular's dependency injection system makes it easy to inject services into components and other services, promoting loose coupling and testability.

Best Practices for Using Services:

Single Responsibility Principle (SRP): Keep services focused on a single responsibility or functionality to improve maintainability and reusability.
Dependency Injection: Use Angular's dependency injection system to inject services where they are needed rather than creating instances manually.
Immutable Services: Design services to be immutable whenever possible to prevent unintended side effects and ensure predictability.
Singleton Pattern: Design services as singletons to ensure that there is only one instance of each service throughout the application.