Angular Academy · Pelajaran

Signal Store dalam Layanan

Simpan state aplikasi dalam layanan berbasis signal.

Signal Store dalam Layanan adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Sinyal sebagai Status

Sinyal Angular adalah nilai reaktif yang memberi tahu konsumen saat nilainya berubah. Sinyal menyimpan sebuah nilai dan menjalankan ulang setiap perhitungan atau templat yang membacanya.

Menyimpan sinyal di dalam layanan @Injectable memungkinkan beberapa komponen berbagi status reaktif yang sama.

Store Sinyal Minimal

Buat sebuah layanan dan simpan status di dalam signal(). Jaga sinyal yang dapat ditulis tetap privat dan ekspos tampilan hanya-baca.

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

@Injectable({ providedIn: 'root' })
export class CounterStore {
  private _count = signal(0);
  readonly count = this._count.asReadonly();

  increment() { this._count.update(c => c + 1); }
}

Mengapa providedIn root

providedIn: 'root' menjadikan layanan sebagai singleton di seluruh aplikasi. Setiap komponen yang menyuntikkannya berbagi instance sinyal yang sama persis, sehingga status tetap sinkron.

Membaca Sinyal

Panggil sinyal seperti fungsi untuk membaca nilainya. Di dalam templat, Angular melacak pembacaan tersebut dan memperbarui DOM secara otomatis saat nilainya berubah.

import { Component, inject } from '@angular/core';
import { CounterStore } from './counter.store';

@Component({
  selector: 'app-counter',
  template: '<button (click)="store.increment()">{{ store.count() }}</button>'
})
export class CounterComponent {
  store = inject(CounterStore);
}

asReadonly Melindungi Status

asReadonly() mengembalikan sinyal yang dapat dibaca tetapi tidak dapat ditulis. Komponen tidak dapat secara tidak sengaja memanggil set() atau update() pada sinyal tersebut, sehingga semua perubahan mengalir melalui metode store.

set vs update

Gunakan set(value) saat Anda sudah memiliki nilai berikutnya secara langsung. Gunakan update(fn) saat nilai berikutnya bergantung pada nilai saat ini.

private _user = signal<User | null>(null);

setUser(u: User) { this._user.set(u); }
clearUser() { this._user.set(null); }
touch() { this._user.update(u => u ? { ...u, seen: true } : u); }

Banyak Sinyal dalam Satu Store

Sebuah store dapat menyimpan beberapa sinyal yang mewakili bagian-bagian status yang berbeda. Jaga setiap sinyal yang dapat ditulis tetap privat dan ekspos pasangan yang hanya-baca.

private _items = signal<Item[]>([]);
private _loading = signal(false);

readonly items = this._items.asReadonly();
readonly loading = this._loading.asReadonly();

Metode Merangkum Logika

Aturan bisnis berada di dalam metode store, bukan di dalam komponen. Komponen memanggil metode yang menyatakan maksud, seperti addToCart(item), lalu store menentukan cara status berubah.

addToCart(item: Item) {
  this._items.update(list => [...list, item]);
}
removeFromCart(id: string) {
  this._items.update(list => list.filter(i => i.id !== id));
}

Tidak Perlu Subscription

Berbeda dari layanan berbasis RxJS, store sinyal tidak memerlukan subscribe() atau pembatalan subscription secara manual. Membaca sinyal di dalam templat menghubungkan reaktivitas, dan Angular membersihkannya saat komponen dihancurkan.

Menyuntikkan dengan inject()

Fungsi inject() dapat digunakan di konstruktor, penginisialisasi bidang, dan fungsi pabrik. Ini adalah cara modern untuk memperoleh instance store.

export class CartComponent {
  private store = inject(CartStore);
  items = this.store.items; // read-only signal
}

Menguji Store Sinyal

Store sinyal hanyalah kelas biasa, sehingga pengujiannya sederhana: buat instance, panggil sebuah metode, lalu baca nilai sinyal secara sinkron. Tidak diperlukan penanganan asinkron.

it('increments', () => {
  const store = new CounterStore();
  store.increment();
  expect(store.count()).toBe(1);
});

Pemeriksaan Singkat

Uji pemahaman Anda tentang store sinyal.

Ringkasan

Anda telah mempelajari cara membangun store berbasis sinyal: menjaga sinyal yang dapat ditulis tetap privat, mengekspos tampilan asReadonly(), mengubah status melalui set/update di dalam metode, serta menyuntikkan singleton dengan inject(). Tidak ada subscription, pengujian mudah, dan status reaktif dapat dibagikan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Signal Store dalam Layanan” gratis?

Ya — teks lengkap “Signal Store dalam Layanan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Signal Store dalam Layanan”?

Simpan state aplikasi dalam layanan berbasis signal. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Signal Store dalam Layanan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy