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

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'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.

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 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.

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.

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 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.

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.

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.

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.

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 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.

// 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 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.