# Angular 20 Resource API ve httpResource: Kapsamli Rehber, Kod Ornekleri ve Mulakat Sorulari (2026)

> Angular 20 Resource API hakkinda kapsamli teknik rehber: resource(), rxResource() ve httpResource() ile reaktif veri cekme, Zod dogrulama, ResourceStatus durum yonetimi, HttpClient aboneliklerinden gecis stratejisi ve Angular mulakat sorulari.

- Published: 2026-05-30
- Updated: 2026-05-30
- Author: SharpSkill
- Tags: angular, angular-20, resource-api, httpresource, signals, typescript, tutorial
- Reading time: 10 min

---

Angular 20, signal tabanli veri cekme islemlerini tamamen yeniden sekillendiren Resource API ile birlikte geliyor. Developer preview asamasini geride birakan `resource()`, `rxResource()` ve `httpResource()` ilkelleri, uzun ve karmasik `HttpClient` abonelik kaliplarini deklaratif, reaktif ve otomatik yasam dongusu yonetimi sunan yapilarla degistiriyor. Bu uc varyant, Angular'in signal ekosistemine dogrudan entegre olarak asenkron veri operasyonlarinda yeni bir paradigma olusturuyor.

Bu makale, her Resource API varyantini somut kod ornekleriyle inceliyor, Zod kutuphanesiyle calisma zamani dogrulamasini ele aliyor, ResourceStatus sistemiyle ayrintili durum yonetimini analiz ediyor ve 2026 yilinda Angular pozisyonlarina basvuranlar icin kritik teknik mulakat sorulari derliyor.

> **Angular 20'de Degisen Temel Yapilar**
>
> Resource API, `request` parametresini `params` olarak, `loader`'i ise `stream` olarak (`rxResource` icin) yeniden adlandirdi. Durum degerleri artik sayisal enum'lar yerine string literal kullaniyor: `'idle'`, `'loading'`, `'resolved'`, `'error'`, `'reloading'` ve `'local'`. `httpResource`, Angular'in `HttpClient` altyapisi uzerine insa edilerek interceptor destegi ve Zod dogrulama entegrasyonunu hazir olarak sunuyor. Angular 19'dan gecis yapanlar soz dizimini guncellemeli, ancak temel semantik degismeden korunuyor.

## Angular 20'deki Uc Resource Varyanti: resource, rxResource ve httpResource

Angular 20'nin Resource API'si, her biri belirli bir kullanim senaryosu icin optimize edilmis uc farkli ilkel sunuyor. Hangi varyantin secilecegi, projenin teknik gereksinimlerine ve ekibin mimari tercihlerine baglidir.

**`resource()`**, Promise tabanli temel varyanttir. Reaktif bagimliliklari tanimlayan bir `params` fonksiyonu ve bir `Promise` donduren `loader` fonksiyonu kabul eder. `params` tarafindan uretilen deger her degistiginde, loader otomatik olarak yeniden calistirilir ve onceki istek saglanan `AbortSignal` araciligiyla iptal edilir. Dogrudan `fetch()` cagrilari veya Promise tabanli ucuncu parti API istemcileriyle calisan projeler icin ideal bir secimdir.

**`rxResource()`**, RxJS kullanan ekipler icin tasarlanmis olan karsiliktir. `stream` fonksiyonu (onceki surumde `loader` olarak adlandiriliyordu) `Promise` yerine `Observable` dondurur. Framework dahili olarak aboneligi ve iptali yoneterek `takeUntil` gibi operatorlerin veya manuel destroy Subject yonetiminin gerekliligi tamamen ortadan kalkar. Veri cekme mantigi `debounceTime`, `switchMap` veya `retry` gibi RxJS operatorleri gerektirdiginde bu varyant ozellikle avantajlidir.

**`httpResource()`**, Angular'in `HttpClient`'i uzerine insa edilmis en ust duzey soyutlamadir. Reaktif bir fonksiyon olarak URL veya istek yapilandirma nesnesi kabul eder, serializasyon, header'lar ve interceptor entegrasyonunu otomatik olarak yonetir. `resource()`'tan farkli olarak acik bir `loader` fonksiyonu gerektirmez: framework HTTP cagrisini dahili olarak olusturur. Standart uygulama senaryolarinin buyuk cogunlugu icin Angular ekibi tarafindan onerilen birincil tercihtir.

## resource() ile Kullanici Profili Olusturma

Asagidaki ornek, bir kullanici profilini reaktif olarak yuklemek icin `resource()` kullanimini gosteriyor. `userId` signal'i reaktif bagimlilik gorevi gorur ve degerindeki her degisiklik otomatik olarak yeni bir yukleme islemini tetikler.

```typescript
// user-profile.component.ts
import { Component, signal, resource } from '@angular/core';

interface User {
  id: number;
  name: string;
  email: string;
}

@Component({
  selector: 'app-user-profile',
  template: `
    @if (userResource.hasValue()) {
      <h2>{{ userResource.value().name }}</h2>
      <p>{{ userResource.value().email }}</p>
    } @else if (userResource.isLoading()) {
      <p>Loading profile...</p>
    } @else if (userResource.error()) {
      <p>Failed to load user</p>
    }
  `,
})
export class UserProfileComponent {
  userId = signal(1);

  // params produces the reactive dependency
  // loader receives it and returns a Promise
  userResource = resource<User, number>({
    params: () => this.userId(),
    loader: async ({ params: id, abortSignal }) => {
      const res = await fetch(`/api/users/${id}`, { signal: abortSignal });
      return res.json();
    },
  });

  loadUser(id: number) {
    this.userId.set(id); // triggers automatic refetch
  }
}
```

Bu kalibin merkezinde reaktif bagimliliklar ile yukleme mantigi arasindaki net ayrim yer aliyor. `params` fonksiyonu, framework'un reaktif baglami icinde calistirilir; dolayisiyla icinde okunan her signal otomatik olarak izlenir. `userId` degistiginde Angular, loader'a saglanan `abortSignal` araciligiyla devam eden istegi iptal eder ve yeni bir cagri baslatir. Bilesen icinde acik bir temizleme kodu yazmaya gerek kalmaz, cunku framework tum yasam dongusu yonetimini ustlenir.

`params` fonksiyonunun dondurdugu deger, `loader` fonksiyonuna `params` parametresi olarak iletilir. Bu sayede tip guvenligi korunur ve reaktif bagimlilik ile veri cekme mantigi arasinda temiz bir arayuz olusur. `AbortSignal` ise tarayicinin yerel `fetch()` API'siyle dogal olarak entegre calisarak isteklerin verimli bir sekilde iptal edilmesini saglar.

Resource API'nin dayandigi signal sistemi hakkinda daha fazla bilgi icin [Angular Signals](/technologies/angular/interview-questions/angular-signals) rehberine basvurulabilir.

## httpResource ile Reaktif Veri Cekme

`httpResource`, bir loader fonksiyonu yazma zorunlulugunu tamamen ortadan kaldirarak veri yukleme kalibini onemli olcude basitlestiriyor. Framework, HTTP istegini dahili olarak olusturur ve uygulamada yapilandirilmis `HttpClient` ile ilgili tum interceptor'leri otomatik olarak uygular.

```typescript
// product-list.component.ts
import { Component, signal, computed } from '@angular/core';
import { httpResource } from '@angular/common/http';

interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
}

@Component({
  selector: 'app-product-list',
  template: `
    @if (products.hasValue()) {
      @for (product of products.value(); track product.id) {
        <div class="product-card">
          <h3>{{ product.name }}</h3>
          <span>{{ product.price | currency }}</span>
        </div>
      }
    } @else if (products.isLoading()) {
      <p>Loading products...</p>
    }
  `,
})
export class ProductListComponent {
  category = signal('electronics');

  // httpResource re-fetches whenever category() changes
  products = httpResource<Product[]>(() => ({
    url: '/api/products',
    params: { category: this.category() },
  }));

  filterByCategory(cat: string) {
    this.category.set(cat); // pending request is cancelled, new one starts
  }
}
```

Kullanici `filterByCategory()` metodunu cagirdiginda `category` signal'i guncellenir. `httpResource`'a verilen yapilandirma fonksiyonu `this.category()` degerini okudugu icin framework degisikligi algilar, devam eden HTTP istegini otomatik olarak iptal eder ve guncelenmis parametrelerle yeni bir istek baslatir. Bu davranis, RxJS'teki `switchMap` operatoruyle tam olarak aynidir; ancak operator zincirinin karmasikligi ve abonelik yonetimi gerekliligi olmadan gerceklesir.

`httpResource`'un sundugu bir diger avantaj, Angular'in interceptor mekanizmasiyla dogal entegrasyondur. Uygulamada tanimlanan kimlik dogrulama token'lari, loglama veya hata yonetimi interceptor'leri, `httpResource` tarafindan yapilan isteklere de otomatik olarak uygulanir. Bu sayede veri cekme katmani, uygulamanin genel HTTP yapilandirmasiyla tutarli kalir.

> **httpResource salt okunurdur**
>
> httpResource yalnizca okuma islemleri (GET) icin tasarlanmistir. POST, PUT veya DELETE gibi HTTP yontemlerini desteklemez. Yazma islemleri icin dogrudan `HttpClient` kullanilmaya devam edilmelidir. Resource uzerinde `.set()` veya `.update()` cagirmak yalnizca signal'deki yerel degeri degistirir; sunucuya herhangi bir istek gondermez.

## Zod ile Sema Dogrulamasi ve httpResource

Frontend veri cekme islemlerinde en yaygin karsilasilan sorunlardan biri, beklenen veri yapisi ile sunucudan gercekte donen yapi arasindaki uyumsuzluktur. Angular 20, `httpResource` icine `parse` secenegi araciligiyla dogrudan entegre edilen istege bagli bir dogrulama mekanizmasiyla bu sorunu koklunden cozuyor.

[Zod](https://zod.dev) kutuphanesi entegrasyonu sayesinde beklenen sema tanimlanabilir ve her yanit, template'e sunulmadan once otomatik olarak dogrulanabilir. Dogrulama basarisiz oldugunda resource, ihlal ayrintilarini iceren aciklayici bir hata mesajiyla `'error'` durumuna gecer ve bozuk verilerin son kullaniciya gosterilmesini onler.

```typescript
// order.component.ts
import { Component, signal } from '@angular/core';
import { httpResource } from '@angular/common/http';
import { z } from 'zod';

// Define the expected shape with Zod
const OrderSchema = z.object({
  id: z.number(),
  status: z.enum(['pending', 'shipped', 'delivered', 'cancelled']),
  total: z.number().positive(),
  items: z.array(z.object({
    productId: z.number(),
    quantity: z.number().int().positive(),
    unitPrice: z.number().positive(),
  })),
  createdAt: z.string().datetime(),
});

type Order = z.infer<typeof OrderSchema>;

@Component({
  selector: 'app-order',
  template: `
    @if (order.hasValue()) {
      <h2>Order #{{ order.value().id }}</h2>
      <p>Status: {{ order.value().status }}</p>
      <p>Total: {{ order.value().total | currency }}</p>
    } @else if (order.error()) {
      <p>Invalid order data received</p>
    }
  `,
})
export class OrderComponent {
  orderId = signal(42);

  // parse validates the response before exposing it as a signal
  order = httpResource<Order>(
    () => `/api/orders/${this.orderId()}`,
    { parse: OrderSchema.parse }
  );
}
```

Bu kalip, API'lerin farkli ekipler tarafindan gelistirildigi ve yanit yapisinin onceden bildirilmeden degisebildigi kurumsal ortamlarda ozellikle kritik bir rol oynar. Zod ile calisma zamani dogrulamasi, frontend ve backend arasinda bir guvenlik sozlesmesi gorevi gorerek uyumsuzluklari aninda gorunur kilar. Dogrulama hatasi durumunda `error()` signal'i, `ZodError` nesnesini dondurur ve hangi alanlarin beklenenden farkli oldugunu detayli olarak raporlar.

Bu yaklasim, TypeScript'in derleme zamani tip kontrolunden oteye gecerek calisma zamaninda da veri butunlugunu garanti altina alir. Ozellikle mikroservis mimarileri veya ucuncu parti API entegrasyonlari gibi veri kaynaginin kontrolun disinda oldugu senaryolarda vazgecilmez bir guvenlik katmani olusturur.

## Angular 20'de rxResource: Stream ve Params Kullanimi

Debounce uygulanmis bir arama alani gibi RxJS operatorleri gerektiren senaryolar icin `rxResource`, Observable tabanli bir arayuz sunar. `stream` fonksiyonu (Angular 20'de `loader`'dan yeniden adlandirildi) reaktif parametreleri alir ve framework tarafindan dahili olarak yonetilen bir Observable dondurur.

```typescript
// search.component.ts
import { Component, signal } from '@angular/core';
import { rxResource } from '@angular/core/rxjs-interop';
import { HttpClient } from '@angular/common/http';
import { inject } from '@angular/core';
import { debounceTime, switchMap } from 'rxjs';

interface SearchResult {
  id: number;
  title: string;
  excerpt: string;
}

@Component({
  selector: 'app-search',
  template: `
    <input (input)="query.set($any($event.target).value)" placeholder="Search..." />
    @if (results.isLoading()) {
      <p>Searching...</p>
    }
    @if (results.hasValue()) {
      @for (item of results.value(); track item.id) {
        <div>{{ item.title }}</div>
      }
    }
  `,
})
export class SearchComponent {
  private http = inject(HttpClient);
  query = signal('');

  // params (was "request") provides the reactive input
  // stream (was "loader") returns an Observable
  results = rxResource<SearchResult[], string>({
    params: () => this.query(),
    stream: ({ params: q }) =>
      this.http.get<SearchResult[]>('/api/search', {
        params: { q },
      }),
  });
}
```

`rxResource` ile `resource` arasindaki temel fark, yukleme fonksiyonunun donus tipinde yatar: `Promise` yerine `Observable` kullanilir. Dahili olarak Angular, aboneligi, parametreler degistiginde otomatik iptali ve change detection dongusuyle senkronizasyonu yonetir. Bu sayede gelistiriciler yalnizca is mantigi uzerine yogunlasir, altyapi detaylari frameworke devredilir.

Halihazirda RxJS ve `HttpClient`'i yogun olarak kullanan kod tabanlarina sahip ekipler icin `rxResource` en dogal gecis yolunu temsil eder. Mevcut Observable zincirleri ve operator kullanim aliskanliklari korunurken, abonelik yonetimi ve yasam dongusu karmasikligi ortadan kalkar.

## Durum Izleme: String Literal'ler Enum'larin Yerini Aliyor

Her resource ornegi, yukleme durumunu string literal olarak donduren bir `status()` signal'i sunar. Onceki sayisal enum tabanli yaklasimin yerini alan bu model, kodun okunabilirligini onemli olcude iyilestiriyor ve template'deki `@switch` yapilariyla dogal bir uyum sagliyor.

| Durum | Anlami |
|---|---|
| `'idle'` | `params` fonksiyonu `undefined` dondurdu -- istek baslatilmadi |
| `'loading'` | Ilk istek devam ediyor |
| `'reloading'` | Onceki basarili istekten sonra yeni istek |
| `'resolved'` | Veriler `value()` icinde mevcut |
| `'error'` | Istek basarisiz -- `error()` hatayi iceriyor |
| `'local'` | Deger `.set()` veya `.update()` ile yerel olarak ayarlandi |

`'loading'` ve `'reloading'` arasindaki ayrim, farklilasmis kullanici deneyimi kaliplarinin uygulanmasini mumkun kilar. Ilk yukleme sirasinda tam ekran spinner veya skeleton loader gosterilebilirken, sonraki guncellemeler icin halihazirda gorunen veriler korunarak goze carpmayan bir gosterge kullanilabilir. Bu sayede kullanici, veri guncellemesi sirasinda bos bir ekranla karsilasmaz.

```typescript
// status-demo.component.ts
import { Component, signal, resource } from '@angular/core';

@Component({
  selector: 'app-status-demo',
  template: `
    <p>Status: {{ data.status() }}</p>
    @switch (data.status()) {
      @case ('loading') { <spinner /> }
      @case ('reloading') { <subtle-spinner /> }
      @case ('resolved') { <data-table [rows]="data.value()" /> }
      @case ('error') { <error-banner [error]="data.error()" /> }
      @case ('idle') { <p>Select a filter to load data</p> }
    }
  `,
})
export class StatusDemoComponent {
  filter = signal<string | undefined>(undefined);

  data = resource({
    params: () => this.filter(),
    loader: async ({ params: f, abortSignal }) => {
      const res = await fetch(`/api/data?filter=${f}`, { signal: abortSignal });
      return res.json();
    },
  });
}
```

`'idle'` durumu ozel dikkat gerektiren bir senaryoyu temsil eder: `params` fonksiyonu `undefined` dondurdugunde resource hicbir istek baslatmaz. Bu kalip, verilerin yalnizca kullanici belirli bir eylem gerceklestirdiginde -- ornegin bir filtre sectiginde, bir kategori tikladiginda veya bir arama terimi girdiginde -- cekilmesini saglayan kosullu yukleme senaryolarinin uygulanmasina olanak tanir. `'idle'` durumu `'loading'`'den anlambilimsel olarak farkldir: birincisinde hicbir istek surmez veya planlanmazken, ikincisinde bir istek aktif olarak devam eder.

> **Hata durumunda value() kullanimi**
>
> `value()` metodu, resource `'error'` durumundayken cagrildiginda bir istisna firlatir. Degere guvenli bir sekilde erismek icin template'de `hasValue()` koruma kontrolu veya `undefined` donduren `value.asReadonly()` metodu kullanilmalidir. Bu tasarim karari, hata durumlarinin acikca ele alinmasini zorunlu kilarak gecersiz verilerin kazara render edilmesini onler.

## Angular 20 httpResource ve Resource API Mulakat Sorulari

Asagidaki sorular, 2026 yilinda Angular pozisyonlari icin yapilan teknik mulakatlarda en sik karsilasilan konulari kapsiyor. Her yanit, Resource API hakkinda yalnizca teorik degil islevsel bir kavrayis sergilemek icin gereken derinligi sagliyor.

**S1: Angular 20'de resource(), rxResource() ve httpResource() arasindaki temel farklar nelerdir?**

`resource()`, `Promise` donduren bir `loader` fonksiyonu kabul eden temel ilkeldir. `rxResource()`, `stream` fonksiyonunun `Observable` dondurdugu RxJS varyantidir. `httpResource()` ise dahili olarak `HttpClient` kullanan ve yalnizca URL ile parametre yapilandirmasi gerektiren ust duzey bir soyutlamadir. Her uc varyant da `params` fonksiyonu araciligiyla reaktif bagimliliklari otomatik olarak izler, parametreler degistiginde bekleyen istekleri iptal eder ve `value()`, `status()`, `error()`, `isLoading()` gibi signal'ler uzerinden durumu sunar. Secim baglama baglidir: cogu senaryo icin `httpResource`, HTTP disi API'ler icin `resource`, RxJS operatorleri gerektiren mantik icin `rxResource` tercih edilir.

**S2: Angular, Resource API'de otomatik istek iptalini nasil yonetiyor?**

`params()` tarafindan dondurilen deger degistiginde framework, devam eden istegi otomatik olarak iptal eder. `resource()` icin bu, `loader` fonksiyonuna verilen `AbortSignal` araciligiyla gerceklesir ve alttaki `fetch()` isteginin iptalini bildirir. `rxResource()` icin framework, yeni bir Observable olusturmadan once mevcut Observable'a olan aboneligi sonlandirir -- bu, `switchMap` ile benzer bir davranistir. `httpResource()` icin iptal dahili olarak `HttpClient` tarafindan yonetilir. Bu mekanizma, yavas bir yanitin daha yeni bir yaniti ezmesi olarak bilinen "stale response override" sorununu onleyerek race condition'lari tamamen engeller.

**S3: params() fonksiyonu undefined dondurdugunde ne olur?**

`params()` fonksiyonu `undefined` dondurdugunde resource `'idle'` durumuna gecer ve hicbir HTTP istegi baslatmaz. Bu, kosullu yukleme kalibini temsil eder: gerekli kosullar saglanana kadar resource etkin olmaz. Ornegin, bir detay bileseni hicbir oge secilmediginde `undefined` dondurerek yuklemeyi yalnizca kullanici bir secim yaptiginda baslatabilir. `'idle'` durumu `'loading'`'den anlambilimsel olarak farkldir: birincisinde hicbir istek surmez veya planlanmazken, ikincisinde bir istek aktif olarak devam etmektedir.

**S4: Zod dogrulamasi httpResource ile nasil entegre ediliyor?**

`httpResource`'un `parse` secenegi, deger `value()` signal'i uzerinden sunulmadan once HTTP yanitina uygulanan bir dogrulama fonksiyonu kabul eder. `parse` degeri olarak `OrderSchema.parse` gonderildiginde her yanit tanimlanan Zod semasina karsi dogrulanir. Dogrulama basarisiz olursa resource `'error'` durumuna gecer ve `error()`, ihlal ayrintilarini iceren `ZodError` nesnesini barindirir. Bu kalip, frontend ve backend arasinda bir calisma zamani sozlesmesi olarak isler ve ozellikle API'lerin bagimsiz ekipler tarafindan gelistirildigi veya ucuncu parti servislerle entegrasyon yapildigi durumlarda kritik onem tasir.

**S5: ResourceStatus'taki 'loading' ve 'reloading' durumlari arasindaki fark nedir ve bu fark neden onemlidir?**

`'loading'` durumu, ilk istegin devam ettigini ve resource'ta onceden mevcut bir verinin bulunmadigini gosterir. `'reloading'` durumu ise onceki basarili bir istekten sonra yeni bir istegin basladigini belirtir: yeni istek devam ederken onceki deger `value()` uzerinden erisilebilir durumda kalir. Bu ayrim, farklilasmis kullanici deneyimi kaliplari uygulamasini saglar: ilk yukleme sirasinda skeleton loader veya tam ekran spinner gosterilirken, yeniden yukleme sirasinda mevcut veriler korunarak bos icerik yanip sonmesini onleyen minimal bir guncelleme gostergesi kullanilabilir. Bu yaklasim, algisal performansi onemli olcude arttirir.

Signal'ler ve SSR ile ilgili ek Angular mulakat sorulari icin [Angular 19 mulakat sorulari](/blog/angular/angular-19-interview-questions-signals-ssr-must-know) makalesine basvurulabilir.

## HttpClient Aboneliklerinden httpResource'a Gecis

Resource API, geleneksel manuel `HttpClient` abonelik kalibina kiyasla veri cekme icin gereken kodu koklunden basitlestiriyor. Asagidaki oncesi-sonrasi karsilastirmasi, boilerplate kodundaki dramatik azalmayi ve acik yasam dongusu yonetiminin ortadan kalkmasini gozler onune seriyor.

```typescript
// BEFORE: manual subscription in ngOnInit
@Component({ /* ... */ })
export class BeforeComponent implements OnInit, OnDestroy {
  private http = inject(HttpClient);
  private destroy$ = new Subject<void>();
  users: User[] = [];
  loading = false;
  error: string | null = null;

  ngOnInit() {
    this.loading = true;
    this.http.get<User[]>('/api/users')
      .pipe(takeUntil(this.destroy$))
      .subscribe({
        next: (data) => { this.users = data; this.loading = false; },
        error: (err) => { this.error = err.message; this.loading = false; },
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

// AFTER: httpResource handles lifecycle automatically
@Component({ /* ... */ })
export class AfterComponent {
  users = httpResource<User[]>(() => '/api/users');
  // No ngOnInit, no Subject, no manual unsubscribe
  // Template uses users.value(), users.isLoading(), users.error()
}
```

"Onceki" bilesen, istegi baslatmak icin `OnInit` uygulamasi, iptal icin bir `Subject`, veri-yukleme-hata icin ayri durum degiskenleri ve bellek sizintisini onlemek icin `OnDestroy` gerektirir. "Sonraki" bilesen ise tum bu mantigi tek bir bildirimsel satira yogunlastirir. Framework dahili olarak istegin baslatilmasini, durum izlemeyi, iptali ve bilesen yok edildiginde temizligi yonetir.

Bu gecis, yuzlerce bilesenin `ngOnInit` + `subscribe` + `takeUntil` kalibini izledigi buyuk kurumsal kod tabanlarinda ozellikle etkilidir. Uygulama, bilesen bilesen kademeli olarak gerceklestirilebilir ve mevcut kodun geri kalanini etkilemez. Her gecis adiminda boilerplate kodu azalir, potansiyel bellek sizintisi kaynaklari ortadan kalkar ve kodun test edilebilirligi artar.

Angular bilesen gecis stratejileri hakkinda daha fazla bilgi icin [standalone components gecisi](/blog/angular/angular-standalone-components-migration-best-practices) makalesine bakiniz.

## Sonuc

Angular 20'nin Resource API'si, Angular uygulamalarinin veri cekme islemlerini yonetme biciminde koklunden bir degisim yaratarak deklaratif ve signal tabanli bir paradigma sunuyor. Hatirlanmasi gereken temel noktalar:

- **resource()**, AbortSignal araciligiyla otomatik iptal ve reaktif bagimlilik izleme yetenekleriyle Promise tabanli asenkron veri cekme icin temel ilkeldir
- **httpResource()**, HttpClient uzerine kurulu ust duzey bir soyutlama sunarak GET islemleri icin boilerplate kodu ortadan kaldirir ve interceptor'ler ile header'larla dogal entegrasyon saglar
- **rxResource()**, debounceTime veya retry gibi operatorler gerektiren senaryolar icin RxJS uyumlulugunu korur ve Promise yerine Observable kullanir
- **Zod dogrulamasi**, `parse` secenegi araciligiyla frontend ve backend arasinda calisma zamani sozlesmeleri tanimlayarak bozuk verilerin render edilmesini onler
- **ResourceStatus** sistemi, string literal'lerle (`'idle'`, `'loading'`, `'reloading'`, `'resolved'`, `'error'`, `'local'`) ilk yukleme ve sonraki guncellemeler icin farklilasmis kullanici deneyimi kaliplari olusturmayi mumkun kilar
- `ngOnInit` + `subscribe` + `takeUntil` kalibindan **gecis**, kademeli olarak gerceklestirilebilir ve boilerplate kodu ile potansiyel bellek sizintisi kaynaklarini onemli olcude azaltir

Angular teknik mulakatlarina hazirlanan adaylar icin Resource API'nin uc varyanti arasindaki farklari aciklama, otomatik iptal mekanizmasini tanimlama ve sema dogrulama entegrasyonunu gosterme becerisi, Angular 20'nin reaktif mimarisine dair olgun bir kavrayisi kanitlar.

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/tr/blog/angular/angular-20-resource-api-httpresource-tutorial