Service trong Angular

Service trong Angular là thành phần quan trọng, giúp tạo nên các hàm,, dữ liệu dùng chung cho ứng dụng. Việc tạo service là rất dễ dàng

---

Service trong Angular là gì

Trong Angular, Service là một class được tạo ra để cung cấp các chức năng có thể dùng chung cho các component trong ứng dụng. Nhờ có service, code trong các component được viết gọn gàng hơn.

Những ưu điểm của Service

• Tăng tính tổ chức: Service giúp quản lý logic tốt hơn bằng cách tách biệt khỏi component.
• Tái sử dụng: Service có thể dùng cho nhiều component khác nhau, bỏ qua việc phải lặp lại viết các hàm trong giống nhau giữa các component khác nhau.
• Dễ dàng bảo trì: Việc quản lý code trở nên rõ ràng, giúp dễ dàng thay đổi hoặc mở rộng.
• Tối ưu hiệu suất: Giúp giảm thiểu việc tạo lại dữ liệu không cần thiết.

Khi nào nên dùng Service?

• Khi cần chia sẻ dữ liệu giữa nhiều component.
• Khi xử lý logic liên quan đến API, database hoặc caching.
• Khi quản lý trạng thái toàn cục trong ứng dụng.

Cách tạo service trong Angular

Tạo service

Chạy lệnnh sau trong command line để tạo service: ng generate service my-service

Trong đó my-service là tên của sergice muốn tạo. Lệnh trên sẽ tạo file my-service.service.ts.

Viết service

Một service đơn giản xử lý dữ liệu người dùng:

import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root', })
export class MyService {
  private users = ['Mạnh', 'Nga', 'Dương'];
  constructor() {}
  getUsers() { return this.users;}
}

Sử dụng service trong component

Kéo dữ liệu từ Service và hiển thị trong component:

import { Component, OnInit } from '@angular/core';
import { MyService } from '../my-service.service';
@Component({
  selector: 'app-user-list',
  template: `<ul><li *ngFor="let user of users">{{ user }}</li></ul>`
})
export class UserListComponent implements OnInit {
  users: string[] = [];
  constructor(private myService: MyService) {}
  ngOnInit() {
    this.users = this.myService.getUsers();
  }
}

Ý nghĩa của @Injectable({ providedIn: 'root' })

• @Injectable() là một decorator trong Angular, dùng để đánh dấu một class là service có thể được inject vào các component hoặc service khác.
• providedIn: 'root' giúp Angular tự động cung cấp service này cho toàn bộ ứng dụng mà không cần khai báo trong providers của module.

Lợi ích của providedIn: 'root':

• Tạo Singleton: Khi một service được khai báo với providedIn: 'root', Angular sẽ chỉ tạo một instance duy nhất (singleton) cho toàn bộ ứng dụng.
• Tối ưu bộ nhớ:: Nếu service không được sử dụng, nó sẽ không được load vào bộ nhớ.

---

Các giá trị khác của providedIn

Ngoài 'root', Angular còn cho phép các phạm vi khác:

Giá trị	Ý nghĩa
'root'	Service có thể dùng ở mọi nơi trong ứng dụng.
'platform'	Service tồn tại trên toàn bộ nền tảng Angular, dùng khi có nhiều ứng dụng Angular chạy trên cùng một nền tảng.
'any'	Tạo instance riêng biệt cho mỗi module hoặc component sử dụng service này.
module cụ thể	Chỉ có thể dùng trong module được chỉ định.

Ví dụ:

typescriptCopyEdit@Injectable({
  providedIn: 'any'
})
export class CartService { }

Mỗi module import CartService sẽ có một instance riêng.

---

Một số service có sẵn trong Angular

HttpClient – tạo http request, gọi API.

import { HttpClient } from '@angular/common/http';
constructor(private http: HttpClient) {}
getData() {
  return this.http.get('https://api.example.com/data');
}

Router – Chuyển hướng giữa các trang.

import { Router } from '@angular/router';
constructor(private router: Router) {}
goToHome() {
  this.router.navigate(['/home']);
}

ActivatedRoute – Lấy tham số từ URL.

import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {}
ngOnInit() {
  this.route.params.subscribe(params => {
    console.log(params['id']);
  });
}

Sự khác biệt giữa service tự tạo và service có sẵn

Tiêu chí	Service tự tạo	Service có sẵn trong Angular
Mục đích	Chia sẻ logic, dữ liệu tùy chỉnh theo nhu cầu ứng dụng	Cung cấp các chức năng phổ biến do Angular hỗ trợ sẵn
Cách sử dụng	Tạo bằng ng generate service, đăng ký trong provider	Được import trực tiếp từ Angular framework
Ví dụ	Service quản lý dữ liệu người dùng, API, trạng thái ứng dụng	HttpClient, ActivatedRoute, Router, FormBuilder

Service trong là một thành phần quan trọng trong Angular, giúp quản lý dữ liệu và chia sẻ logic giữa các component. Việc sử dụng Service giúp mã nguồn sạch sẽ, dễ bảo trì và mở rộng.