Angular Academy · Ders

Bağımsız Bileşenler Oluşturma

Bileşenleri standalone bayrağıyla bildirin.

Bağımsız Bileşenler Oluşturma, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. 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.

Bağımsız Bileşen Oluşturma

Bağımsız bileşen, bağımsız olarak işaretlenmiş @Component dekoratörüne sahip sıradan bir sınıftır. Angular v19 ve sonrasında bu varsayılandır; bu nedenle çoğu zaman bu seçeneği yazmanız bile gerekmez.

standalone Seçeneği

Geçmişte dekoratörde standalone: true ayarlanırdı. v19 ve sonrasında bileşenler varsayılan olarak bağımsızdır; bu nedenle seçenek isteğe bağlıdır.

import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  standalone: true, // optional in v19+
  template: '<h1>Welcome</h1>'
})
export class GreetingComponent {}

Seçici

selector, bileşeni bir şablona yerleştirmek için kullanılan özel öğe etiketidir; örneğin app-greeting.

// usage in another template:
// <app-greeting></app-greeting>

Satır İçi Şablon

Satır içi HTML için template özelliğini kullanın; bu, küçük bileşenler için idealdir.

@Component({
  selector: 'app-badge',
  template: '<span class="badge">New</span>'
})
export class BadgeComponent {}

Harici Şablon

Daha büyük görünümler için bir HTML dosyasını göstermek üzere templateUrl kullanın.

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html'
})
export class ProfileComponent {}

Stiller

Bileşene özgü stilleri styles (satır içi) veya styleUrl / styleUrls (harici dosyalar) ile ekleyin.

@Component({
  selector: 'app-card',
  template: '<div class="card"></div>',
  styles: ['.card { padding: 16px; }']
})
export class CardComponent {}

Bileşen Sınıfı Mantığı

Sınıf gövdesi durumu ve davranışı barındırır. Sinyallerle tepkisel durumu alanlar olarak tanımlayın.

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

@Component({ selector: 'app-counter', template: '<p>{{ n() }}</p>' })
export class CounterComponent {
  n = signal(0);
}

Modül Gerekmez

@NgModule veya declarations dizisi olmadığını fark edin. Bileşen, ihtiyaç duyulan her yere aktarılmaya hazırdır.

Dosya Adlandırma Kuralı

Angular kuralına göre dosyalar greeting.component.ts, sınıf GreetingComponent ve seçici app-greeting şeklinde adlandırılır.

Bir Bileşeni Başka Bir Bileşenin İçinde Kullanma

Alt bağımsız bileşeni kullanmak için onu üst bileşenin imports dizisine aktarın (sonraki derste ele alınacaktır) ve seçicisini üst bileşenin şablonuna yerleştirin.

CLI ile Oluşturma

Angular CLI, bağımsız bileşenleri varsayılan olarak oluşturur. ng generate component greeting komutunu çalıştırdığınızda sizin için bağımsız bir GreetingComponent iskeleti oluşturur.

Kısa Kontrol: Bileşen Oluşturma

Bağımsız bileşen varsayılanları hakkında.

Özet: Bağımsız Bileşen Oluşturma

@Component ile bağımsız bir bileşen oluşturur, isteğe bağlı olarak standalone: true ayarlarsınız (v19 ve sonrasında varsayılandır). Bir seçici, template veya templateUrl, isteğe bağlı stiller ve sınıf mantığı tanımlarsınız. NgModule gerekmez. Sırada: bağımlılıkları doğrudan içe aktarmak var.

Sıkça Sorulan Sorular

“Bağımsız Bileşenler Oluşturma” dersi ücretsiz mi?

Evet — “Bağımsız Bileşenler Oluşturma” 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.

“Bağımsız Bileşenler Oluşturma” dersinde ne öğreneceğim?

Bileşenleri standalone bayrağıyla bildirin. 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 2. dersidir.

“Bağımsız Bileşenler Oluşturma” 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