Introduction:
Developers often come across scenarios where they need to create and use objects in another class. In the case of Angular applications, dependency injection is the technique that is used in such scenarios. Dependency injection is a design pattern in which one object supplies the dependencies of another object instead of the object creating its dependencies with new keyword.
Angular provides two fundamental ways to work with dependency injection: @Injectable and @Inject. The @Injectable decorator is used to define a service class, whereas the @Inject decorator is used to inject the dependency. In this article, we will see the use of both decorators in details.
@Injectable:
An @Injectable decorator in Angular is used to define a service class. A service in Angular is a class that provides some functionality to other parts of the application. For example, the http service in Angular provides methods to make http requests.
Syntax:
“`
@Injectable({
providedIn: ‘root’ // or any other module
})
export class MyService {
// functionality code here
}
“`
The @Injectable decorator takes an optional provider object that can be used to configure the service. The providedIn option specifies the module in which the service belongs. If the service is set to “root”, it means it is available in the entire application. The providedIn value can also be a module name, which means that the service is only available in that module.
@Inject:
The @Inject decorator in Angular is used to inject the dependency. It is used to tell the injector which service to use when injecting the dependency. For example, if we have two services: AuthService and UserService, and the UserService depends on the AuthService, we can use the @Inject decorator to specify that the AuthService should be used.
Syntax:
“`
@Injectable({
providedIn: ‘root’
})
export class UserService {
constructor(@Inject(AuthService) private authService: AuthService) {
}
}
“`
In the above code, we use the @Inject decorator to tell Angular to inject the AuthService in the UserService constructor. We also use the private keyword to make the authService property private to the UserService class.
FAQs:
1. What is dependency injection?
Dependency injection is a design pattern in which one object supplies the dependencies of another object instead of the object creating its dependencies with the new keyword.
2. What is @Injectable?
The @Injectable decorator in Angular is used to define a service class.
3. What is a service in Angular?
A service in Angular is a class that provides some functionality to other parts of the application.
4. What is the syntax of @Injectable decorator?
“`
@Injectable({
providedIn: ‘root’
})
export class MyService {
// functionality code here
}
“`
5. What is the syntax of @Inject decorator?
“`
@Injectable({
providedIn: ‘root’
})
export class UserService {
constructor(@Inject(AuthService) private authService: AuthService) {
}
}
“`
Conclusion:
In this article, we saw the use of @Injectable and @Inject decorators in Angular. The @Injectable decorator is used to define a service class, whereas the @Inject decorator is used to inject the dependency. By using these two decorators, we can easily take advantage of the dependency injection in Angular.