Angular Academy · Ders

Hizmetlerde Signal Store'ları Kullanma

Uygulama durumunu sinyal tabanlı hizmetlerde tutun

Hizmetlerde Signal Store'ları Kullanma, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Durum Olarak Sinyaller

Angular sinyalleri, değiştiklerinde tüketicilere bildirim gönderen tepkisel değerlerdir. Bir sinyal bir değer tutar ve onu okuyan her hesaplamayı veya şablonu yeniden çalıştırır.

Sinyalleri bir @Injectable hizmetinin içinde tutmak, birden çok bileşenin aynı tepkisel durumu paylaşmasını sağlar.

En Basit Sinyal Deposu

Bir hizmet oluşturun ve durumu bir signal() içinde tutun. Yazılabilir sinyali gizli tutup salt okunur bir görünüm sunun.

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); }
}

providedIn root Neden Kullanılır?

providedIn: 'root', hizmeti uygulamanın tamamında tekil hâle getirir. Onu içeri aktaran her bileşen aynı sinyal örneğini paylaşır; böylece durum eşzamanlı kalır.

Sinyali Okuma

Değerini okumak için sinyali bir işlev gibi çağırın. Bir şablonun içinde Angular okumayı izler ve değer değiştiğinde DOM'u otomatik olarak günceller.

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 Durumu Korur

asReadonly(), okunabilen ancak üzerine yazılamayan bir sinyal döndürür. Bileşenler yanlışlıkla üzerinde set() veya update() çağıramaz; böylece tüm değişiklikler depo yöntemleri üzerinden gerçekleştirilir.

set ve update

Bir sonraki değeri doğrudan elinizde bulunduruyorsanız set(value) kullanın. Bir sonraki değer geçerli değere bağlıysa update(fn) kullanın.

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); }

Depo Başına Birden Çok Sinyal

Bir depo, durumun farklı bölümlerini temsil eden birkaç sinyal tutabilir. Her yazılabilir sinyali gizli tutup salt okunur karşılıklarını dışa açın.

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

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

Yöntemler Mantığı Kapsüller

İş kuralları bileşenlerde değil, depo yöntemlerinde bulunur. Bileşenler addToCart(item) gibi amacı açıkça belirten yöntemleri çağırır; durumun nasıl değişeceğine depo karar verir.

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

Abonelik Gerekmez

RxJS tabanlı hizmetlerin aksine, sinyal depolarında subscribe() kullanmanız veya abonelikten elle çıkmanız gerekmez. Bir şablonda sinyali okumak tepkiselliği otomatik olarak kurar; Angular da bileşen yok edildiğinde bunu temizler.

inject() ile İçeri Aktarma

inject() işlevi oluşturucularda, alan başlatıcılarda ve fabrika işlevlerinde çalışır. Depo örneğini almanın modern yolu budur.

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

Sinyal Deposunu Test Etme

Sinyal depoları sıradan sınıflardır; bu nedenle testleri basittir: bir örnek oluşturun, bir yöntemi çağırın ve sinyal değerini eşzamanlı olarak okuyun. Eşzamansız bağlantı kodu gerekmez.

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

Kısa Kontrol

Sinyal depoları konusundaki anlayışınızı test edin.

Özet

Sinyal tabanlı bir depo oluşturmayı; yazılabilir sinyalleri gizli tutmayı, asReadonly() görünümlerini dışa açmayı, yöntemlerin içinde set/update aracılığıyla değişiklik yapmayı ve tekil örneği inject() ile içeri aktarmayı öğrendiniz. Abonelik yoktur; test etmek kolaydır ve tepkisel durum paylaşılır.

Sıkça Sorulan Sorular

“Hizmetlerde Signal Store'ları Kullanma” dersi ücretsiz mi?

Evet — “Hizmetlerde Signal Store'ları Kullanma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Hizmetlerde Signal Store'ları Kullanma” dersinde ne öğreneceğim?

Uygulama durumunu sinyal tabanlı hizmetlerde tutun Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Hizmetlerde Signal Store'ları Kullanma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön