Ôn tập Angular: Service và Depencency Injection - Part 4

Angular Servcie

Angular Service là một class có chức năng cụ thể, được thiết kế để thực hiện các tác vụ không liên quan trực tiếp đến giao diện người dùng (UI) hoặc logic ứng dụng chính.

Tạo 1 service

ng g s <service-name>

Ví dụ

ng g s logger

Khai báo thêm name cho loggerService

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

@Injectable({
  providedIn: 'root'
})
export class LoggerService {
  public name: string = "logger";
  constructor() { }
}

providedIn: 'root': Đây là một thuộc tính của decorator @Injectable. Nó chỉ định rằng service này sẽ được cung cấp bởi Injector Root của ứng dụng. Nghĩa là, Angular sẽ tự động tạo một instance duy nhất của service này khi ứng dụng khởi chạy và instance này sẽ có phạm vi ứng dụng (application scope). Bất kỳ thành phần nào trong ứng dụng đều có thể yêu cầu service này thông qua Dependency Injection.

Hoặc bạn có thể inject vào app.config.ts

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { LoggerService } from './services/logger.service';

export const appConfig: ApplicationConfig = {
  providers: [provideZoneChangeDetection({ eventCoalescing: true }), 
    provideRouter(routes),
    { provide: LoggerService, useValue: { name: 'test'}}
  ]
};

Ví dụ

Trong ví dụ này, chúng ta sẽ sử dụng thư viện faker-js để generate fake data

Cài đặt package

npm install @faker-js/faker --save

Tạo Service để tạo dữ liệu ngẫu nhiên

Trong Angular, một cách tổ chức tốt là sử dụng service để tạo dữ liệu ngẫu nhiên. Bạn có thể tạo một service như sau:

ng generate service fake-data

Sau đó, chỉnh sửa file fake-data.service.ts, generate fake fruit data

import { Injectable } from '@angular/core';
import { Faker, faker } from '@faker-js/faker';

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

  constructor() { }

  generateRandomFruit(): { name: string, price: string } {
    
    const fruitName = faker.food.fruit();
    const priceInVND = faker.finance.amount({
      min: 10000,
      max: 300000
    });
    return {
      name: fruitName,
      price: `${priceInVND} VNĐ`
    };
  }
}

Sử dụng Service trong Component

Sau khi tạo xong service, bạn có thể sử dụng FakeDataService trong component của mình để hiển thị dữ liệu ngẫu nhiên. Ví dụ:

ng generate component fruit-list

Trong file fruit-list.component.ts:

import { Component, OnInit } from '@angular/core';
import {  NgFor } from '@angular/common';
import { FakeDataService } from '../services/fake-data.service';

@Component({
  selector: 'app-fruit-list',
  standalone: true,
  imports: [NgFor],
  templateUrl: './fruit-list.component.html',
  styleUrl: './fruit-list.component.scss'
})
export class FruitListComponent implements OnInit{
  fruits: { name: string, price: string }[] = [];

  constructor(private fakeDataService: FakeDataService) { }

  ngOnInit(): void {
    this.generateFruits();
  }

  generateFruits(): void {
    for (let i = 0; i < 10; i++) {
      this.fruits.push(this.fakeDataService.generateRandomFruit());
    }
  }
}

File fruit-list.component.html, bạn có thể hiển thị danh sách fruit và price như sau:

<div>
  <h2>Danh sách trái cây</h2>
  <ul>
    <li *ngFor="let fruit of fruits">
      {{ fruit.name }} - {{ fruit.price }}
    </li>
  </ul>
  <button (click)="generateFruits()">Add new fruit</button>
</div>

Tham khảo

Angular Bài 5 - Services và Dependency Injection

Config based service implementation in Angular