Açısal Bileşenlerin Yaşam Döngüsü ve Çeşitli Yöntemlerinin Açıklanması

2009 yılında Google tarafından başlatılan Angular, TypeScript programlama diline sahip bir JavaScript geliştirme çerçevesidir. Uygulama geliştirme için en popüler tasarım çerçevelerinden biridir. Angular çerçevesinin en iyi yanı, açık kaynaklı bir uygulama olmasıdır. Geliştiriciler, mobil ve web uygulamaları oluşturmak ve verileri görselleştirmek için Angular çerçevesini kullanır. Angular geliştirme için geliştiricilerin Angular yaşam döngüsü adı verilen kapsamlı bir süreci izlemesi gerekir.

Bu blog, Angular yaşam döngüsünü ve çeşitli kanca yöntemlerini anlamanıza yardımcı olur.

Açısal Yaşam Döngüsü nedir?

Angular bileşenlerini çalıştırmak için gereken olay döngüsüne Angular yaşam döngüsü denir. Angular bileşenleri, UI için gerekli bir uygulamanın yapı taşlarıdır. Basit bir ifadeyle, Angular bileşenleri, bir Angular uygulamasında ekranın bir yamasını kontrol etmekten sorumlu bloklardır. Bileşenler, bir seçici, şablon ve stille birlikte çeşitli özellikler içerir. Bileşenler ayrıca işlenmesi için meta verilere ihtiyaç duyar.

Angular, yaşam döngüsü boyunca veriye bağlı özelliklerdeki değişiklikleri izlemek için farklı değişiklik algılama adımlarından geçer. Angular bir bileşen sınıfını başlattığında bir Angular yaşam döngüsü başlar. Ardından bileşenin görünümünü ve alt bileşenlerin görünümünü tanımlar. Sonlara doğru Angular artık kullanılmayan bileşenleri yok ediyor. Ayrıca bir bileşeni başlattıktan sonra çeşitli kanca yöntemlerini çağırır.

Çeşitli Angular bileşen yaşam döngüsü kancaları, Angular çerçevesinde işlevsellik görevi görür. Her kanca yöntemi, geliştiricilerin belirli bir olay sırasında farklı kodlar çalıştırmasını sağlar.

Dünyanın En İyi Üniversitelerinden Online Yazılım Geliştirme Kursları öğrenin. Kariyerinizi hızlandırmak için Yönetici PG Programları, Gelişmiş Sertifika Programları veya Yüksek Lisans Programları kazanın.

Açısal Bileşenlerin Yaşam Döngüsü

Tüm Angular bileşenlerinin sekiz farklı aşamaya bölünmüş farklı bir yaşam döngüsü vardır. Bu aşamalara, uygulama sırasında ayrı olarak kullanılabilen yaşam döngüsü kanca olayları denir. Yaşam döngüsü başlamadan önce, bileşen sınıfının yapıcısını çalıştırırız ve ardından çeşitli kanca olayları gerçekleşir. Angular yaşam döngüsünün kanca olayları iki ana kategoriye ayrılır. Bir aşama orijinal bileşenle bağlantılıyken, ikinci aşama o belirli bileşenin çocukları ile ilgilidir.

Açısal yaşam döngüsünün çeşitli aşamalarını anlayalım:

• ngOnChanges:- ngOnChanges() olayı, bileşen içindeki bir giriş denetiminin değerini değiştirdiğimizde oluşur ve bileşenin bağlı özelliği değişir. Basit bir ifadeyle, bu kanca yöntemi, Angular bileşenin gelen özelliklerini ayarladığında veya sıfırladığında gerçekleşir. Bu yöntem sırasında, mevcut ve önceki özellik değerleri için bir 'SimpleCharge' nesnesi alınır.
  Bu kanca yöntemi, mevcut ve önceki özellik değerlerinin değiştirilmiş bir veri haritasını alır. Veri haritası SimpleCharge olarak sarılır. Bu olayın çok sık gerçekleştiğini hatırlamakta fayda var. Bu nedenle, etkinlik sırasında herhangi bir değişiklik yaparken performansı önemli ölçüde etkileyebileceğinden son derece dikkatli olmalısınız. Bu kanca yöntemini yalnızca bileşenin bağlı girdileri varsa ve bileşenin bağlı özelliklerini değiştirirseniz kullanmanız gerekir. Bu nedenle, genellikle bir geri arama yöntemi olarak kabul edilir.
• ngOnInit:- Bu olay, bir bileşendeki verileri başlatmak için kullanılır. ngOnInit(), veriye bağlı özellikler Angular tarafından görüntülendikten ve girdi özellikleri bileşen tarafından ayarlandıktan sonra bileşeni veya yönergeyi başlatır. ngOnInit()'in birincil amacı karmaşık başlatmalar gerçekleştirmektir. Kanca yöntemi, ilk verileri veya yerel değişkenleri basit değerlere kaynaklamak için bileşeni kullanır. Daha sonra, Angular girdi özelliklerini ayarladığında bileşeni kurmak için kullanılır. Bileşenin bağlı özellikleri varsa, ngOnInit() olayı genellikle ngOnChanges'den sonra çağrılır. Ancak, bileşen herhangi bir bağlı özellik içermiyorsa, ngOnInit() olayını doğrudan çalıştırabiliriz. Ayrıca bu kancanın yalnızca bir kez çağrıldığını da unutmamalısınız.
• ngDoCheck: - Bu kanca olayı, bir giriş yönteminin özelliklerini her kontrol ettiğimizde gerçekleşir. ngDoCheck olayı, her değişiklik algılama döngüsünün ayrılmaz bir parçasıdır ve kendi mantık denetiminizle birlikte kullanılabilir. Bu olay, bileşendeki özel değişikliklerin veya algoritmaların algılanmasını kolaylaştırır. ngDoCheck kitap yöntemi, Angular'ın algılayamadığı bu değişikliklerin algılanmasını sağlar. Her değişiklik algılama çalıştırması için ngOnChanges'den sonra ngDoCheck'i çağırabilirsiniz. Bileşenin bağlı özelliklerinde herhangi bir değişiklik yapılmamış olsa bile, ilk çalıştırmada ngOnInit'ten sonra tetiklenebilir.
  
• ngAfterContentInit:- Bu kanca aşaması veya yaşam döngüsü yöntemi, bileşenin ömrü boyunca yalnızca bir kez gerçekleştiği için ngOnInit'e benzer. Bileşenin bağlantılarını ilk kez kontrol etmeniz gerektiğinde bu olayı tek bir kez tetikleyebilirsiniz. Bu olayı, Angular, bileşen içinde herhangi bir içerik yansıtma etkinliği gerçekleştirdikten sonra yürütürüz. Basit bir deyişle, ngAfterContentInit, Angular tarafından bileşenin görünümüne veya içinde bir yönergenin bulunduğu görünüme harici içeriğin bir projeksiyonu olduğunda yürütülür. ngAfterContentInit, ngDoCheck yöntemini yürüttükten hemen sonra Angular olarak çağrılır. Bu yaşam döngüsü yöntemi, alt bileşenin başlatılmasıyla ilgilidir.
  
• ngAfterContentChecked:- Bu kanca aşaması, ngDoCheck yönteminden sonraki eylemdir. Adından da anlaşılacağı gibi, ngAfterContentChecked yöntemi, Angular, bileşen içinde yansıtılan harici içerikteki değişiklikleri algıladıktan sonra yürütülür. Bu olay, her değişiklik algılama döngüsünden sonra gerçekleşir. ngAfterContentInit() ve sonraki her ngDoCheck() öğesinden sonra çağrılır. ngAfterContentInit gibi, ngAfterContentChecked de alt bileşen başlatmalarıyla ilişkilidir.
  
• ngAfterViewInit:- ngAfterViewInit, bileşenin görünümünün başlatılması tamamlandıktan sonra tetiklenir. ngAfterContentChecked() yaşam döngüsü yönteminden sonra yalnızca bir kez çağrılır. Bu kanca yöntemi, alt bileşenler için değil, yalnızca bileşenler için kullanılır.
  

  Yazılım Mühendisliği ile İlgili Popüler Kurslar ve Makaleler

  Popüler Programlar
  Yazılım Geliştirmede Yönetici PG Programı - IIIT B	Blockchain Sertifika Programı - PURDUE	Siber Güvenlik Sertifika Programı - PURDUE	Bilgisayar Bilimlerinde Yüksek Lisans - IIIT B
  Diğer Popüler Makaleler
  ABD'de Bulut Mühendisi Maaşı 2021-22	ABD'de AWS Çözüm Mimarı Maaşı	ABD'de Arka Uç Geliştirici Maaşı	ABD'de Ön Uç Geliştirici Maaşı
  ABD'de Web geliştirici Maaşı	2022'de Scrum Master Mülakat Soruları	2022'de Siber Güvenlikte Kariyere Nasıl Başlanır?	Mühendislik Öğrencileri için ABD'de Kariyer Seçenekleri

• ngAfterViewChecked: - Bu yaşam döngüsü, Angular bileşenin veya alt bileşenin algılama veya kontrol görünümünü bitirdiğinde çağrılır. ngAfterViewChecked yöntemi, ngAfterViewInit yönteminden sonra çağrılsa da, sonraki her ngAfterContentChecked() yaşam döngüsü aşamasından sonra yürütülür. Bu kanca yöntemi sadece açısal bileşenlerle ilgilidir .
  
• ngOnDestroy:- ngOnDestroy() kanca yöntemi, Angular artık gerekli olmayan bileşenleri yok etmeden önce yürütülür. Bu yaşam döngüsü yöntemi, olayları ayırır ve herhangi bir bellek sızıntısını önlemeye yardımcı olur. Ayrıca gözlemlenebilirlerin aboneliklerini de kaldırır. Bileşeni kaldırmadan önce bu olayı yalnızca bir kez çağırırız. Bu kanca yöntemi, Angular bileşeni yok etmeden önce bir temizleme işlevi görür.

Açısal Yaşam Döngüsündeki Arayüzler

Açısal yaşam döngüleri genellikle bileşen sınıfı aracılığıyla tanımlanır. Bununla birlikte, çeşitli kanca yöntemleri zaten ilişkili bir TypeScript arabirimine sahip olduğundan, arabirimler Angular bileşen sınıfını tanımlamak için de kullanılabilir. Genellikle bir arabirimi, çeşitli yöntemleri ve ilgili özellikleri tanımlamaya yardımcı olan bir özellik olarak anlarız. Gereksiz olsa da, Angular yaşam döngüsünde arayüzlerin uygulanması şiddetle tavsiye edilir. Her arayüzün amacı, kanca yöntemleri için prototipi tanımlamaktır. Arayüzler 'ng' öneki ile adlandırılır.

Çözüm

Açısal bileşenler, TypeScript programlamaya dayanır. Bu nedenle, açısal yaşam döngüsü kanca yöntemlerini uygulamadan önce daktilo programlamanın temellerini bilmek gerekir. Ayrıca Angular uygulama tasarımının temellerini, yaşam döngüsü yöntemlerinin süreçlerini ve hangi kanca yöntemlerinin kullanılacağına ilişkin bilgi birikimini öğrenmek de önemlidir.

Angular uygulama geliştirme alanında kariyer yapmayı planlıyorsanız, tüm süreç ve farklı kanca yöntemlerinin işlevleri hakkında derinlemesine bilgi sahibi olmalısınız. Ayrıca Angular bir javascript geliştirme çerçevesi olduğu için Java programlama dilini öğrenmelisiniz. upGrad'ın Yazılım Geliştirmede Yönetici PG Programı, Angular uygulama geliştirmeyi sıfırdan öğrenmek için mükemmel bir seçenektir.