Giới thiệu về Sevices và dependency injection trong Angular 7

Sevice là một danh mục rộng bao gồm bất kỳ value, function, hoặc tính năng mà ứng dụng cần.
Một service là một class thông thượng được định nghĩa với mục đích rõ ràng.
Angurlar phân biệt các thành phần từ các service để tăng tính modul và khả năng tái sử dụng.
Một Component có thể giao một số công việc cho các service  như fetching data từ server, validating user input, hoặc logging trực tiếp... Bằng việc xác định xử lý các tiến trình trong một lớp injectable service class Bạn sẽ làm các tác vụ đó trở nên có sẵn tới bất kỳ component. Bạn cũng có thể làm ứng dụng của bạn thích ứng hơn bằng cách tiêm nhiều provider của cùng loại dịch vụ.

Service examples

Dưới đây là một ví dụ show consolog trên browser src/app/logger.service.ts (class)

export class Logger {
  log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}

Service có thể được phụ thuộc vào các Service khác. Theo ví dụ dưới đây , Class HeroService phụ thuộc vào Logger service, sử dụng BackendService để get data. Sau đó service có thể phụ thuộc vào HttpClient để fetch data không đồng bộ từ server. src/app/hero.service.ts (class)

export class HeroService {
  private heroes: Hero[] = [];

  constructor(
    private backend: BackendService,
    private logger: Logger) { }

  getHeroes() {
    this.backend.getAll(Hero).then( (heroes: Hero[]) => {
      this.logger.log(`Fetched ${heroes.length} heroes.`);
      this.heroes.push(...heroes); // fill cache
    });
    return this.heroes;
  }
}

Dependency injection (DI)

 DI được nối vào Angular framework và sử dụng bất cứ đâu nhằm cung cấp những component mới với service hoặc bất cứ thứ gì mà nó cần. Component sử dụng service; điều đó có nghĩa bạn có thể tiêm một service vào một component, cấp quền truy cập thành phần cho lớp service đó. Để định nghĩa một class như một service trong Angular, sử dụng @Injectable() decorator để cung cấp metadata điều đó cho phép Angular tiêm vào nó vao một component như một dependence Sử dụng @Injectable() decorator để chỉ ra rằng một component hoặc một class khác ( giống như service khác, một pipe hoặc một NgModule) có dependence

• Injector là cơ chế chính. Angular tạo một injector cho toàn ứng dụng và bổ sung injector nếu cần. Vậy nên bạn sẽ không phải tạo Injector
• Một Injector tạo nhiều dependence, và bảo trì một container của dependence instence điều đó giúp nó tái sử dụng nếu có thể.
• Provider là một object nó sẽ nói cho injector biết làm thế nào để có hoặc tạo một dependence. Đối với bất kỳ dependence nào bạn cần cho ứng dụng, bạn cần đăng ký một provider với ứng dụng injector , vậy Injector có thể sửng dụng như cung cấp và tạo new instances. Với Service, provider thường là service class của chính nó. Khi Angular tạo một new Intance của một component class, nó được xác ở tham số truyền vào constructor như ví dụ sau: **src/app/hero-list.component.ts /

constructor(private service: HeroService) { }

Khi Angurlar tìm thấy rằng một một component phụ thuộc trên một service, nó kiểm tra đầu tiên có tồn tại bất kỳ intances của service nào không. Nếu một trường hợp request service chưa tồn tại, injector tạo ra một người sử dụng provider đã đăng ký, và thêm nó vào injector trước khi trả lại Service cho Angular Khi tất cả service yêu cầu đã được giải quyết và trả về, Angular có thể gọi hàm tạo của component đó với các Service anguments Tiến trình của một service sẽ giống như hình sau:https://images.viblo.asia/f032e845-6df5-47da-ade0-1dec13cc1094.png

Providing Services

Bạn cần đăng ký ít nhất một provider cho bất kỳ service bạn muốn sử dụng. Provider có thể là thành phần của service của metadata chính service. làm điều đó Service sẽ có sẵn ở bất kỳ đâu, hoặc bạn có thể đăng ký các provider với các module cụ thể hoặc component. Bạn đăng ký các provider trong trên metadata của service (in the @Injectable() decorator), hoặc trong @NgModule() hoặc @Component() metadata

• Bởi mặc định, Angular CLI command ng generate service đăng ký một provider trong với root injector cho service của bạn bằng cách include provider metadata vào @Injectable() decorator như ví dụ sau:

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

Khi bạn cung cấp service với root level, Angular tạo một single, share instance của Service và inject nó vào trong bất kỳ class nào hỏi có nó. Đăng ký provider trong @Injectable() metadata cũng cho phép Angular tối ưu hóa một ứng dụng bởi remove service từ compiled app nếu không sử dụng. Khi bạn đăng ký một provider với một NgModule cụ thể, giống như instance của một service là có sẵn cho tất cả các component bên trong ngModul đó. Để đăng ký tại level này, sử dụng provider property của @NgModule() decorator:

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

khi bạn đăng ký một provider tại component level bạn get một new instance của service với mỗi new instance cả component đó. Tại component level, đăng ký một service cung cấp trong providers property của @Component() metadata. **src/app/hero-list.component.ts **

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})

Cảm ơn bạn đã theo dõi bài viết.