Angular Academy · Ders

ngOnInit ve Başlatma

Bir bileşen başladığında kurulum mantığını çalıştırın.

ngOnInit ve Başlatma, 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.

Yaşam Döngüsü Kancaları Nedir

Angular bileşenlerinin çerçeve tarafından yönetilen bir yaşam döngüsü vardır: oluşturma, değişiklik algılama, oluşturma ve yok etme. Yaşam döngüsü kancaları, kodu belirli anlarda çalıştırmanızı sağlar.

OnInit'e Giriş

OnInit kancası, Angular bileşen girdilerini ayarlayıp ilk görünümü oluşturduktan sonra bir kez çalışır. Başlatma mantığı için standart yerdir.

OnInit Uygulama

OnInit arayüzünü uygulayın ve ngOnInit yöntemini ekleyin. Angular bu yöntemi otomatik olarak çağırır.

import { Component, OnInit } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnInit {
  ngOnInit(): void {
    console.log("Component initialized");
  }
}

Oluşturucu ve ngOnInit Karşılaştırması

Oluşturucu önce, girdiler ayarlanmadan önce çalışır ve yalnızca hafif bağımlılık ekleme işlemleri yapmalıdır. Girdiler kullanılabilir olduğunda gerçek kurulumu yapmak için ngOnInit kullanın.

constructor(private http: HttpClient) {
  // inputs NOT ready yet
}

ngOnInit() {
  // inputs ARE ready here
}

ngOnInit'te Girdiler Hazırdır

ngOnInit çalıştığında tüm @Input özellikleri, üst bileşenden bağlanan ilk değerlerini almış olur.

@Input() userId!: string;

ngOnInit() {
  console.log(this.userId); // available
}

ngOnInit'te Veri Alma

Girdilere ve bağımlılıklara erişiminiz olduğu için verileri bir hizmetten ngOnInit içinde yüklemek yaygın bir uygulamadır.

ngOnInit() {
  this.userService.getUser(this.userId)
    .subscribe(u => this.user = u);
}

ngOnInit Bir Kez Çalışır

Değişiklik algılama kancalarının aksine ngOnInit, bileşenin yaşam süresi boyunca ilk ngOnChanges çağrısından hemen sonra tam olarak bir kez çalışır.

ngOnChanges'e Göre Sıra

Bileşenin girdileri varsa ngOnChanges önce ilk değerlerle çalışır, ardından ngOnInit çalışır. Girdi olmasa da ngOnInit çalışır.

// sequence with inputs:
// 1. constructor
// 2. ngOnChanges (first)
// 3. ngOnInit

Formları Başlatma

Tepkisel formları oluşturmak klasik bir ngOnInit görevidir; çünkü formu kurmak için eklenen hizmetlere ihtiyacınız olabilir.

form!: FormGroup;

ngOnInit() {
  this.form = this.fb.group({
    name: [""],
    email: [""]
  });
}

Oluşturucuları Hafif Tutma

Oluşturucuda ağır işlemler yapmaktan kaçının. Oluşturucu, Angular girdileri bağlamadan önce çalışır; buradaki yan etkiler bileşenlerin sınanmasını ve öngörülmesini zorlaştırır.

Eşzamansız Başlatma

ngOnInit içinden eşzamansız mantığı çağırabilirsiniz; ancak yöntemin kendisi void döndürür. İçinde subscribe kullanın veya eşzamansız kalıplardan yararlanın.

ngOnInit() {
  this.loadAsync();
}

private async loadAsync() {
  this.data = await firstValueFrom(this.api.get());
}

Hızlı Kontrol

OnInit konusundaki anlayışınızı sınayın.

Özet

OnInit kancası ve ngOnInit, girdiler bağlandıktan sonra bir kez çalışır; veri alma ve form kurulumu için idealdir. Oluşturucuyu hafif tutun ve başlatma işlemlerini ngOnInit için ayırın.

Sıkça Sorulan Sorular

“ngOnInit ve Başlatma” dersi ücretsiz mi?

Evet — “ngOnInit ve Başlatma” 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.

“ngOnInit ve Başlatma” dersinde ne öğreneceğim?

Bir bileşen başladığında kurulum mantığını çalıştırın. 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.

“ngOnInit ve Başlatma” 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