Yeniden Kullanılabilir Davranışlar Oluşturma
Davranışı birleştirilebilir yönergeler olarak paketleyin
Yeniden Kullanılabilir Davranışlar Oluşturma, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 3. 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.
Yapı Taşları Olarak Davranışlar
Birleştirme API'si; her biri tek bir davranışı kapsülleyen küçük ve odaklanmış yönergeler tasarlayıp bunları gerektiğinde bileşenlere eklediğinizde en iyi şekilde kullanılır.
Tek Amaçlı Bir Yönerge
Her davranışı küçük ve bağımsız tutun.
@Directive({
selector: '[appElevate]'
})
export class ElevateDirective {
@HostBinding('style.boxShadow')
shadow = '0 2px 8px rgba(0,0,0,.15)';
}Üzerine Gelme Davranışı
Başka bir davranış, üzerine gelme olayını dinler ve bir sınıfı açıp kapatır.
@Directive({ selector: '[appHoverClass]' })
export class HoverClassDirective {
@HostBinding('class.is-hover') hovering = false;
@HostListener('mouseenter') on() { this.hovering = true; }
@HostListener('mouseleave') off() { this.hovering = false; }
}Davranışları Birleştirme
Bir kart bileşeni, şablonda ek bağlantı kurmaya gerek kalmadan her iki davranışı da birleştirir.
@Component({
selector: 'app-card',
hostDirectives: [ElevateDirective, HoverClassDirective],
template: '<ng-content></ng-content>'
})
export class CardComponent {}Bileşenler Arasında Yeniden Kullanım
Aynı davranışlar düğmelere, kutucuklara veya panellere de eklenebilir. Bir kez tanımlayın, her yerde yine kullanın; hiçbir tekrara gerek kalmasın.
Yapılandırılabilir Davranışlar
Bir davranışı ayarlanabilir hâle getirmek için girdiler ekleyin, ardından bu girdileri davranışın birleştirildiği yerlerde dışa açın.
@Directive({ selector: '[appElevate]' })
export class ElevateDirective {
level = input(1);
}Ayarı Dışa Açma
Yapılandırılabilir girdiyi dışa açarak her ana öğenin bu girdiyi ayarlamasını sağlayın.
hostDirectives: [{
directive: ElevateDirective,
inputs: ['level']
}]Davranışları Eşgüdümleme
Davranışlar, eşgüdüm sağlamak için öğe enjektörü üzerinden birbirlerini içeri aktarabilir; örneğin bir dalgalanma efekti, basılma durumuna tepki verebilir.
Test Edilebilirlik
Küçük davranımların tek başlarına birim testlerini yapmak kolaydır; ardından birleştirildiklerinde güvenle kullanılabilirler ve genel güvenilirliği artırırlar.
Adlandırma Kuralları
Davranışları yaptıkları işe göre adlandırın (appElevate, appHoverClass, appAutofocus). Açık adlar, birleştirme işlemini kendi kendini açıklayan hâle getirir.
Davranış Kitaplığı
Zamanla, her bileşenin kullanmayı seçebileceği birleştirilebilir davranışlardan oluşan bir kitaplık oluşturursunuz; böylece ana öğe mantığındaki tekrarlar büyük ölçüde azalır.
Kısa Kontrol
Yeniden kullanılabilir davranışlar konusundaki anlayışınızı test edin.
Özet
Her biri tek bir davranışı kapsülleyen küçük, bağımsız yönergeler tasarlamayı; bunları hostDirectives ile birleştirmeyi; ayarlanabilir girdileri dışa açmayı ve yeniden kullanılabilir, test edilebilir bir davranış kitaplığı oluşturmayı öğrendiniz.
Sıkça Sorulan Sorular
“Yeniden Kullanılabilir Davranışlar Oluşturma” dersi ücretsiz mi?
Evet — “Yeniden Kullanılabilir Davranışlar 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.
“Yeniden Kullanılabilir Davranışlar Oluşturma” dersinde ne öğreneceğim?
Davranışı birleştirilebilir yönergeler olarak paketleyin 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 3. dersidir.
“Yeniden Kullanılabilir Davranışlar 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
- hostDirectives Özelliği
- Girdileri ve Çıktıları Dışa Açma
- Yeniden Kullanılabilir Davranışlar Oluşturma
- Birleştirme ve Kalıtım Karşılaştırması