Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of service and dependency injection in Angular6, which is very detailed and has certain reference value. Friends who are interested must read it!

In development, components are generally used to write view-related functions, while services write some other logic, such as getting data from the server, verifying user input or writing logs directly to the console.

Let's first explain two concepts:

Providers (provider): it's an abstract term, and it's easier to understand if we think of it as' drawing'. For example, if we want to produce a car, we need to have a drawing of the car, which records the production process and material size, etc., so that the car can be produced. Provider is usually a service class written by itself.

Injector (injector): a tool that literally injects one kind of thing into another. An injector application is created automatically when it is started.

Imagine a process of going to the hospital to see a doctor:

Go to the doctor to judge the condition, and the doctor will write a prescription-- > give the prescription to the nurse-- > the nurse will inject you with medicine according to the prescription.

Here the doctor prescribes providers, and if you give the prescription to the nurse, you will register providers with injector. The nurse's sister is injector.

There are many ways to register providers with injector in angular:

@ Injectable decorator

In the @ Injectable decorator of the service class

/ / service @ Injectable ({providedIn: 'root',})

ProvidedIn: 'root' tells Angular to register the drawing in the root injector. Root can also be a specific module name.

By registering in this way, the rocking tree optimization can be performed when the code is compiled and packaged, which removes all services that have not been used in the application. Tree-shaking optimization will make the package smaller.

Providers in @ NgModule

In @ NgModule of the module

/ / service @ Injectable () / / module @ NgModule ({providers: [UserService, {provide: APP_CONFIG, useValue: HERO_DI_CONFIG}],})

By registering in this way, you can make some additional configurations for the drawings.

Note: for services registered in @ NgModule, the @ Injectable () decorator is also required in the drawings.

Register with the component

In @ Component of the component

@ Component ({selector: 'app-heroes', providers: [HeroService]

By registering in this way, each component instance is registered with its own injector. (multiple components will have multiple injectors)

Note: the service is singleton within the scope of each injector. In any injector, there will be at most one instance of the same service.

No drawings are provided

The most common drawing is class, but when configuring providers: [], instead of providing class drawings, you can return the factory function of the object, or the literal amount of the object [{provide: Logger, useClass: Logger}]

You can also use the useValue attribute to deliver an object instance directly, [{provide: Logger, useValue: silentLogger}]

The above is all the content of the article "sample Analysis of Services and dependency injection in Angular6". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.