What Are @Injectable providers?
The @Injectable decorator identifies services and
other classes that are intended to be injected. It can also be used to
configure a provider for those services.
To inject the service into a component, Angular
provides an Injector decorator: @Injectable().
A provider defines the set of injectable objects
that are available in the injector of this module.
The @Injectable decorator marks a class as
available to an injector for instantiation. An injector reports an error when
trying to instantiate a class that is not marked as @Injectable.
Injectors are also responsible for instantiating
components. At the run-time the injectors can read class metadata in the
JavaScript code and use the constructor parameter type information to determine
what things to inject.
Injectable decorator and metadata -
@Injectable({
providedIn?: Type<any> | 'root' | null
factory: () => any
})
To inject the service into a component, Angular
provides an Injector decorator: @Injectable().
Here we configure a provider for CustomerService
using the @Injectable decorator on the class.
We have the following steps to create a Service-
1. Create
the service class
2. Define
the metadata with a decorator
3. Import
what we need.
In the above example, providedIn tells Angular
that the root injector is responsible for creating an instance of the
CustomerService.
The Angular CLI sets up provider automatically
when you generating a new service.
Why @Inject()?
The @Inject is a special technique for letting
Angular knows that a parameter must be injected.
Inject decorator and metadata-
@Inject({
token: any
})
When @Inject () is not present, Injector will use
the type annotation of the parameter.
import { Component, OnInit, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-customer',
templateUrl: './customer.component.html',
styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {
constructor(@Inject(HttpClient) private http) {
// use this.http which is the Http
provider.
}
ngOnInit(){ }
}
At this point, @Inject is a manual way of
specifying this lookup token, followed by the lowercase http argument to tell
Angular what to assign it against.
What Is Hierarchical Dependency Injectors?
Angular has a Hierarchical Dependency Injection
system. There is actually a tree of injectors that parallel an application's
component tree. You can reconfigure the injectors at any level of that
component tree.
Explore in detail by using above questions -
I hope enjoy this post. Thank you very much
reading this post.