Angular Service (Service)

Officials believe the component should not get or save data directly, they should focus on the present data, data access and delegate responsibilities to a service. The service acts as the data access logic processing functions. To separate the components and services area, in order to improve the modularity and reusability. By assemblies and view related functions separated from other types of processing, component class may make more streamlined and efficient, which is the official definitions. Very identity, personal development experience I vulgar point of view, the real development and not fully to separate components and services area. And do not provide specialized services for the component, or the logic processing are placed in service, showing only the data components. A module usually has many components, each of our business there is only one service module, the data access module, data processing judgment, common approach on service only. Components still have some judgment data, demonstrating logical pages and so on. Of course we also have services available to each component uses, some common services such as httpService logService uiServic and so on. I might say is fine for the business service can not be completely stripped of it.

1. Dependency injection

The injector is the main mechanism. Angular creates a full application-level injector and the required other injectors for you during startup. You do not have to create your own injectors.
The injector creates dependency, maintaining a container to manage these dependencies, and reuse them as much as possible.
Provider is an object that is used to tell the injectors how to get or create dependency.

2. Service Provider

We use the command ng gs servicename create a service, in the new service, we can see @Injectable () decorator, which marks this class as one of the participants dependency injection system. How to use the service components it must be service dependency injection systems, components or modules, to be able to use the service. We can use registered providers and root injector achieve .

The service itself is a class CLI to create and add a @Injectable() decorator. By default, the decorator is used providedIn to configure the property, it will create a provider for that service. In this example, providedIn: 'root' specify the root Angular should provide the service in the injector, in order to achieve root injector service is injected, it can be used throughout the application .

testService.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class TestService {
}

You can also specify that only provide a service in a particular module, service module is similar to a college belonging to the service of this module will only be applied to this module, we can do it.

import { Injectable } from '@angular/core';
import { TestModule } from './test.module';

@Injectable({
  providedIn: TestModule,
})
export class TestService {
}

import { NgModule } from '@angular/core';
import { TestService } from './test.service';

@NgModule ({
  providers: [TestService],
})
export class TestModule {
}

Services can also be injected directly in a component.

@Component({
/* . . . */
  providers: [TestService]
})

3. Scope of Services

Why is it a service, there are several ways of injecting Is there any difference there. This is the service acting on where the boundaries defined for use of the service. When we inject a service means that the root can be used throughout the application, injected into a module, a module can only be applied, injected into the assembly, applies only to this component. We function according to the definition of the service, to select the appropriate injection method to improve performance.

Example 4. Single Service

Providing singleton service method:

To @Injectable() the providedIn property declared root.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class TestService {
}

This is included in the service AppModule or will only be a AppModule module imported.

@NgModule ({
  ...
  providers: [TestService],
  ...
})

forRoot () mode

If the module defines both providers (service), when you load this module in multiple feature modules, these services will be registered in multiple places. This will lead to more service instances appear, and the behavior of the service is no longer the same as a single case. There are several ways to prevent this phenomenon:

By way providedIn syntax instead of in the module registration services.
Separating your services into their own modules.
ForRoot are defined in the module () and forChild () method.

Use forRoot () separated from the provider to the module out of the module so that you can import the root module when the tape providers, and providers without introducing it in the sub-module.

ps: RouterModule no forRoot()

GreetingModule.ts

static forRoot(config: TestServiceConfig): ModuleWithProviders {
  return {
    ngModule: GreetingModule,
    providers: [
      {provide: TestServiceConfig, useValue: config }
    ]
  };
}

Import GreetingModule, and called once it's forRoot () method only in AppModule in. Register it like this once you can prevent multiple instances appear.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

/* App Root */
import { AppComponent } from './app.component';

/* Feature Modules */
import { ContactModule } from './contact/contact.module';
import { GreetingModule } from './greeting/greeting.module';

/* Routing Module */
import { AppRoutingModule } from './app-routing.module';

@NgModule ({
  imports: [
    BrowserModule,
    ContactModule,
    GreetingModule.forRoot({userName: 'Miss Marple'}),
    AppRoutingModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

working principle:

In the GreetingModule.ts middle, we can see that, add a configuration for UserService the forRoot() method, optional implant Test ServiceConfig expanded Test Service. If Test ServiceConfig exist, set the user name from this configuration.

test.service.ts (constructor)

content_copyconstructor(@Optional() config: TestServiceConfig) {
  if (config) { this._userName = config.userName; }
}

How to effectively prevent the repeated import:

Only root module AppModule to import GreetingModule. If a load module also inert introduced it will generate a plurality of instances of the application for the service.

To GreetingModule add a constructor, the constructor requires Angular the GreetingModule inject it themselves. If Angular looks in the current implanter GreetingModule, the injection will result in an infinite loop, but @SkipSelf () decorator means "tree in the injector level higher than my ancestors injector Find GreetingModule.", Can effectively prevent the introduction of repeated.

greeting.module.ts

import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GreetingComponent } from './greeting.component';
import { UserServiceConfig } from './user.service';

@NgModule ({
  imports:      [ CommonModule ],
  declarations: [ GreetingComponent ],
  exports:      [ GreetingComponent ]
})
export class GreetingModule {
  constructor (@Optional() @SkipSelf() parentModule: GreetingModule) {
    if (parentModule) {
      throw new Error(
        'GreetingModule is already loaded. Import it in the AppModule only');
    }
  }

  static forRoot(config: UserServiceConfig): ModuleWithProviders {
    return {
      ngModule: GreetingModule,
      providers: [
        {provide: UserServiceConfig, useValue: config }
      ]
    };
  }
}

This is the essay I study and work record, if any questions please comment below, reproduced, please indicate the source.

If it helps, please move the mouse to the bottom right to give me a praise to you, your support is my greatest motivation.