Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan Angular programlama dili eğitim serisinin bir bölümüdür. Eğitmen, Angular mimarisinde komponentler arasındaki iletişim modellerini teorik ve pratik örneklerle anlatmaktadır.
- Video, Angular'da parent-child ve child-parent iletişim modellerini kapsamlı şekilde ele almaktadır. Eğitmen önce teorik bilgileri açıklamakta, ardından input ve output değişkenleri, event emitter, output decorator'ları ve selector'lar gibi araçları kullanarak pratik kod örnekleri göstermektedir. Ayrıca, parent komponentten child komponente, child komponentten parent komponente ve child komponentlerden birbirine veri gönderme yöntemleri adım adım anlatılmaktadır.
- Eğitim içeriğinde TypeScript konfigürasyonları, event bağlama (bind) kavramı ve debug süreci de gösterilmektedir. Eğitmen, ileride servis yapılandırması, ng-rx kütüphanesi ve state davranış yönetimleri gibi konuların da ele alınacağını belirtmektedir.
- 00:01Deprem Olayına Dair Duygular ve Destek Çağrısı
- Eğitmen, Türkiye'de yaşanan depremlerden kaynaklı insanlık dramını ve binlerce insanın enkaz altında kalmış, binlercesinin evsiz kalmış olduğunu belirtiyor.
- Eğitmen, deprem bölgesine yardım etmek isteyenlerin devletin belirli otoriteleri ile iletişime geçerek gitmeyi tercih etmelerini, ancak devletin "gelmeyin" dediği durumlarda gitmemelerini tavsiye ediyor.
- Eğitmen, yazılımsal olarak deprem bölgesine yardımcı olunamayacağını, ancak maddi ve manevi desteklerin ve duaların önemini vurguluyor.
- 07:14Angular Eğitimine Devam
- Angular mimarisinde component communication, Angular componentleri arasında veri ve olayları paylaşma süreçlerini ifade eden bir kavramdır.
- Angular mimarisinde temel yapıtaşı komponentlerdir ve bir sayfa alt bileşenlerden meydana getirilebilir.
- Ders kapsamında parent to child communication ve child to parent communication olmak üzere iki farklı iletişim yöntemi incelenecek, ayrıca ileride servis yapılanması ve ng-rx kütüphanesi ile sayfa state ile ilgili çalışmalar da ele alınacak.
- 09:28Parent to Child ve Child to Parent Communication
- Parent to child communication, parent component'ten child component'e veri gönderme davranışını ifade eder.
- Child to parent communication ise child component'ten parent component'e veri gönderme davranışını ifade eder.
- Parent to child communication'da input yöntemiyle veri gönderilirken, child to parent communication'da output decreator üzerinden veri gönderme yapılır.
- 11:30Komponent İlişkileri ve İletişim Modeli
- İki komponent arasındaki ilişki ya parent-child ya da child-parent olabilir, bu dersin konusu dışındaki iletişim modelleri daha sonraki derslerde ele alınacaktır.
- Dersin sarmal bir ilerleme modeli vardır ve komponentlerin kendi aralarında selector key karşılığında referans edilmeleri ve iletişim sağlayabilmeleri incelenecektir.
- Yarınki derste bu konu daha detaylı ele alınacaktır.
- 12:30Parent-Child Communication Örneği
- Örnek için ana komponent, parent komponenti ve child komponenti oluşturulacaktır.
- Parent komponenti ana komponent olarak, child komponenti ise parent komponentinde selector keyword üzerinden referans edilen bir komponent olarak kullanılacaktır.
- Parent komponentinde child komponentinin selector'ı (child) kullanılarak ana komponente referans edilmiştir.
- 15:48Veri Transferi
- Birden fazla komponent arasında iletişim kurmak ve parent-child şeklinde veri transferi yapmak istenmektedir.
- Parent komponentinde "data" adında bir değişken oluşturulmuş ve bu değişken dış dünyadan gelebilir veya statik olabilir.
- Parent komponentindeki bu değeri child komponente göndermek için child component'te input olarak karşılayacak bir değişken tanımlanmalıdır.
- 18:28Input Kullanımı
- Child component'te dışarıdan gelen veriyi karşılayacak bir değişken tanımlanmalıdır.
- Bu değişken için input decreator'ı kullanılır ve selector referansı tanımlanır.
- Inputla işaretlenen değişkene selector referansının tanımlandığı noktadan erişilebilir ve dışarıdan gönderilen değer ekrana yazdırılabilir.
- 21:25Parent to Child Communication
- Child component'te input olarak dışarıdan parent'dan gönderilen verinin elde edilip ekrana yazıldığı gösterilmiştir.
- Değişken alabilecek şekilde köşeli parantez versiyonuyla input kullanıldığında, değer yerine değişkenler geçerli olur ve child data tarafından yakalanır.
- Parent to child communication işlemi oldukça basit bir şekilde gerçekleştirilebilir.
- 22:46Child to Parent Communication Hazırlığı
- Child to parent communication, alt tabakada çalışan bir komponentten üsttekine değer göndermek için kullanılır.
- Aynı isimde komponentler olduğu için ana modülde deklare edilirken hata alınır, bu nedenle farklı isimler kullanılmalıdır.
- Child to parent communication için child component'in ismi "child component iki" olarak, parent component'in ismi "parent component iki" olarak değiştirilmiştir.
- 26:16Child to Parent Communication Uygulaması
- Child component'te gönderilecek değer için bir event oluşturulmalıdır.
- Event emiter türünde bir değişken tanımlanır ve output decreator'ı kullanılarak dışarıdan erişilebilir hale getirilir.
- Parent component'te child component'in içerisindeki event'e fonksiyon bağlanarak veri yakalanabilir.
- Gönderilecek değeri event'ten göndermek için ngOnInit arayüzünden istifade edilerek event tetiklenebilir.
- 32:19Angular'da Veri Gönderme ve Alma
- Data emit fonksiyonu kullanılarak herhangi bir değer veya obje gönderilebilir, örneğin bir objenin message field'ı "merhaba" olarak gönderilebilir.
- Bir modülde tanımlanan komponentlerin selector'ları birbirinden farklı olmalıdır, aksi takdirde hata verir.
- Child komponentten ana komponente veri göndermek için ilgili fonksiyona parametre atanmalı ve ana komponentte bu parametre dolar event ile karşılanmalıdır.
- 37:34Child-Child İletişim Örneği
- Child-to-child iletişim için farklı komponentler oluşturulabilir, örneğin parent2, childA2 ve childB2 gibi.
- Parent komponentte hem childA2 hem de childB2 komponentleri selector'lar üzerinden referans edilebilir.
- Child komponentler arasında doğrudan ilişki yoksa, önce parent komponente veri gönderilmeli, sonra parent komponent bu veriyi ilgili child komponente input olarak göndermelidir.
- 43:53Angular'da Komponent Arası Veri Gönderimi
- Parent komponentten child komponente veri göndermek için "bind" mekanizması kullanılır.
- Bir fonksiyonu herhangi bir event'e bağlamak "bind" olarak adlandırılır.
- Gelen veriyi yakalamak için "$event" kullanılır ve TypeScript konfigürasyonlarında "strict" özelliği "false" olarak ayarlanarak tür belirtmeden hata vermemesi sağlanabilir.
- 45:53Veri Gönderimi Örneği
- Alt komponente veri göndermek için "childA2.message" gibi bir değişken oluşturulur.
- Child komponentinde "input" değişkeni oluşturulup, gelen veriyi "bind" ile kullanmak için uygun bir değişkene atanır.
- Form üzerinden veri göndermek için de "bind" mekanizması kullanılmalıdır.
- 47:36Angular'da Komponent Arası İletişim Modeli
- Parent komponentten child komponente veri göndermek için "bind" veya metotlar kullanılır.
- Child komponentten parent komponente veri göndermek için eventler kullanılır.
- Bu derste Angular mimarisinde komponentlerin kendi aralarındaki iletişim modelleri anlatılmıştır.