Tạo service trong Angular

Hãy bắt đầu tìm hiểu về các service bằng cách tạo một service của riêng chúng ta. Để làm điều này, trong thư mục test/src/app hãy tạo file data.service.ts. Hãy để service của chúng ta chịu trách nhiệm hiển thị một số dữ liệu lên màn hình.

Hãy tạo một class cho service của chúng ta:

export class DataService {
	
}

Bây giờ chúng ta cần decorator Injectable. Việc sử dụng nó sẽ cho phép class của service có thể được inject vào class của component. Chúng ta sẽ nói về việc inject trong bài học tiếp theo. Còn bây giờ hãy import decorator cần thiết:

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

export class DataService {
	
}

Hãy áp dụng nó cho class của chúng ta:

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

@Injectable()
export class DataService {
	
}

Bây giờ hãy làm sao cho trong class của chúng ta có một số dữ liệu. Thông thường trong các ứng dụng Angular, dữ liệu được tải từ máy chủ, nhưng vì mục đích học tập, chúng ta sẽ sử dụng một mảng. Hãy tạo nó trong một thuộc tính private:

export class DataService {
	private data: string[] = ['a', 'b', 'c'];
}

Bây giờ hãy viết một phương thức để lấy dữ liệu:

export class DataService {
	private data: string[] = ['a', 'b', 'c'];

	getData(): string[] {
		return this.data;
	}
}

Service của chúng ta đã sẵn sàng. Trong bài học tiếp theo, chúng ta sẽ kết nối nó với class của component.

Hãy tạo một service của riêng bạn, service đó sẽ trả về một mảng các đối tượng sản phẩm:

[
	{
		name: 'prod1',
		cost: 100,
	},
	{
		name: 'prod2',
		cost: 200,
	},
	{
		name: 'prod3',
		cost: 300,
	},
]