Pengaturcaraan Fungsian dalam Sudut: Meneroka suntikan dan Sumber

Ekosistem Angular yang sedang berkembang sedang beralih ke paradigma yang lebih pengaturcaraan berfungsi dan reaktif. Dengan alatan seperti Isyarat, API Sumber dan fungsi suntikan, pembangun boleh memudahkan logik aplikasi, mengurangkan boilerplate dan meningkatkan kebolehgunaan semula.

Siaran blog ini meneroka cara ciri moden Angular memperkasakan pembangun untuk mengendalikan logik tak segerak dengan cara yang bersih, deklaratif dan reaktif.

Faedah Utama Ciri Fungsian Angular

1. Fungsi Boleh Digunakan Semula dengan Suntikan Ketergantungan: Fungsi suntikan membolehkan pembangun mencipta fungsi kendiri yang disepadukan dengan lancar dengan sistem suntikan kebergantungan Angular. Ini mengasingkan logik perniagaan daripada komponen dan perkhidmatan, menjadikan fungsi boleh diguna semula di seluruh aplikasi.
2. Pengurusan Negeri Ringkas: Mengendalikan keadaan pemuatan, kejayaan dan ralat secara automatik.
3. Kereaktifan Dipertingkat: Kemas kini data secara automatik apabila kebergantungan berubah.
4. Boilerplate Dikurangkan: Fokus pada logik, bukan langganan manual atau pengurusan kitaran hayat.
5. Kebolehbacaan yang dipertingkatkan: Templat pengisytiharan menjadikan peralihan keadaan UI mudah difahami.

---

Langkah 1: API dan Model Data

Untuk contoh ini, kami akan mengambil siaran daripada REST API. Setiap jawatan mempunyai struktur berikut:

export interface Post {
  userId: number;
  id: number;
  title: "string;"
  body: string;
}

URL asas untuk API disediakan melalui InjectionToken:

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

export const API_BASE_URL = new InjectionToken<string>('API_BASE_URL', {
  providedIn: 'root',
  factory: () => 'https://jsonplaceholder.typicode.com',
});

---

Langkah 2: Tentukan Fungsi Pengambilan Data

1. Pendekatan Berasaskan RxJS Tradisional

Fungsi berikut mengambil siaran dengan IDnya menggunakan HttpClient Angular:

import { HttpClient } from '@angular/common/http';
import { inject } from '@angular/core';
import { Observable } from 'rxjs';
import { API_BASE_URL } from '../tokens/base-url.token';
import { Post } from './post.model';

export function getPostById(postId: number): Observable<Post> {
  const http = inject(HttpClient);
  const baseUrl = inject(API_BASE_URL);

  return http.get<Post>(`${baseUrl}/posts/${postId}`);
}

Untuk menggunakan fungsi ini dalam komponen, anda boleh mengikatnya pada yang boleh diperhatikan dan memaparkan hasilnya dengan paip async:

import { AsyncPipe, JsonPipe } from '@angular/common';
import { Component, signal } from '@angular/core';
import { getPostById } from './shared/posts.inject';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AsyncPipe, JsonPipe],
  template: `
    @if (post$ | async; as post) {
      <p>{{ post | json }}</p>
    } @else {
      <p>Loading...</p>
    }
  `,
})
export class AppComponent {
  private readonly postId = signal(1);

  protected readonly post$ = getPostById(this.postId());
}

Had

• Isu Kereaktifan: Perubahan isyarat (cth., postId) tidak mencetuskan pengambilan baharu secara automatik.
• Pengendalian Ralat Manual: Anda mesti menulis logik tersuai untuk memuatkan dan keadaan ralat.

---

2. Pendekatan API Sumber Berasaskan Isyarat

API Sumber memudahkan kereaktifan dan pengurusan keadaan. Berikut ialah fungsi yang menggunakan API Sumber:

import { inject, resource, ResourceRef, Signal } from '@angular/core';
import { API_BASE_URL } from '../tokens/base-url.token';

export function getPostByIdResource(postId: Signal<number>): ResourceRef<Post> {
  const baseUrl = inject(API_BASE_URL);
  return resource<Post, { id: number }>({
    request: () => ({ id: postId() }),
    loader: async ({ request, abortSignal }) => {
      const response = await fetch(`${baseUrl}/posts/${request.id}`, {
        signal: abortSignal,
      });
      return response.json();
    },
  });
}

Pendekatan ini:

• Memuat semula data secara automatik apabila postId berubah.
• Mengendalikan pemuatan, ralat dan keadaan kejayaan secara deklaratif.

Dalam komponen:

export interface Post {
  userId: number;
  id: number;
  title: "string;"
  body: string;
}

---

Ciri Utama API Sumber

Pengurusan Negeri Deklaratif

API Sumber secara automatik mengurus keadaan seperti pemuatan, ralat dan kejayaan. Ini menghilangkan keperluan untuk bendera tersuai dan memastikan templat yang lebih bersih.

Kereaktifan

API Sumber disepadukan rapat dengan Isyarat. Perubahan kepada Isyarat secara automatik mencetuskan fungsi pemuat, memastikan UI anda sentiasa mencerminkan data terkini.

Pengendalian Ralat

Ralat dipusatkan dan didedahkan melalui .error(), memudahkan pengurusan ralat dalam templat.

Pengurusan Kitaran Hayat Automatik

API membatalkan permintaan berterusan apabila kebergantungan (cth., postId) berubah, menghalang keadaan perlumbaan dan data basi.

---

RxJS vs API Sumber: Perbandingan Pantas

Feature	RxJS (Observable)	Resource API (Signal)
State Management	Manual	Automatic (loading, error)
Reactivity	Requires custom setup	Built-in
Error Handling	Manual	Declarative
Lifecycle Handling	Requires cleanup	Automatic

---

Kesimpulan

Fungsi suntikan Angular dan API Sumber berasaskan Isyarat mewakili lonjakan ke hadapan dalam memudahkan logik tak segerak. Dengan alatan ini, pembangun boleh:

1. Asingkan logik perniagaan daripada komponen.
2. Tulis fungsi boleh guna semula yang disepadukan dengan lancar dengan sistem suntikan pergantungan Angular.
3. Hapuskan boilerplate untuk pengurusan negeri.
4. Bina aplikasi reaktif dan deklaratif dengan mudah.

API Sumber, khususnya, sesuai untuk projek Angular moden, menyediakan kereaktifan automatik dan pengendalian keadaan deklaratif. Mula meneroka ciri ini hari ini dan bawa pembangunan Sudut anda ke peringkat seterusnya!

Atas ialah kandungan terperinci Pengaturcaraan Fungsian dalam Sudut: Meneroka suntikan dan Sumber. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!