Web tabanlı uygulamalar oluştururken, uygulamanızın er ya da geç, fare tıklamaları, hareketler, klavye basışları, değişiklik olayları vb. Gibi DOM olaylarını işlemesi gerekecektir.
AngularJS, bu tür olayları işlemek için kullanılabilecek işlevsellik ekleyebilir.
Örneğin, sayfada bir düğme varsa ve düğmeye tıklandığında bir şeyi işlemek istiyorsanız, ng-click olay direktifini kullanabiliriz.
Bu kurs sırasında Etkinlik direktiflerini ayrıntılı olarak inceleyeceğiz.
Bu eğitimde öğreneceksiniz-
- Ng-click direktifi nedir?
- Ng-show direktifi nedir?
- Ng-hide yönergesi nedir?
Ng-click direktifi nedir?
"Ng tıklama yönergesi" HTML unsuru tıklandığında özel davranışı uygulamak için kullanılır. Bu normalde düğmeler için kullanılır, çünkü burası kullanıcı tarafından gerçekleştirilen tıklamalara yanıt veren olayları eklemek için en yaygın yerdir.
Click olayını nasıl uygulayabileceğimizin basit bir örneğine bakalım.
Bu örnekte, kullanıcı bir düğmeyi tıkladığında değeri artacak bir sayaç değişkenimiz olacak.
Event Registration Guru99 Global Event
The Current Count is {{count}}
Kod Açıklaması:
- Yerel bir değişken sayısının değerini 0 olarak ayarlamak için ilk olarak ng-init direktifini kullanıyoruz.
- Daha sonra, düğmeyle ilgili ng-click olay direktifini getiriyoruz. Bu yönergede, count değişkeninin değerini 1 artırmak için kod yazıyoruz.
- Burada count değişkeninin değerini kullanıcıya gösteriyoruz.
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Yukarıdaki çıktıdan,
- "Arttır" düğmesinin görüntülendiğini ve count değişkeninin değerinin başlangıçta sıfır olduğunu görebiliriz.
- Artır düğmesine tıkladığınızda, aşağıdaki çıktı resminde gösterildiği gibi sayım değeri uygun şekilde artırılır.
Ng-show direktifi nedir?
ng-Show yönergesi , ngShow özniteliğine sağlanan ifadeye göre belirli bir HTML öğesini göstermek veya gizlemek için kullanılır. Arka planda, .ng-hide CSS sınıfı kaldırılarak veya öğeye eklenerek öğe gösterilir veya gizlenir.
Arka planda, .ng-hide CSS sınıfı kaldırılarak veya öğeye eklenerek öğe gösterilir veya gizlenir.
Gizli bir öğeyi görüntülemek için "ngshow event" direktifini nasıl kullanabileceğimize dair bir örneğe bakalım.
Event Registration Guru99 Global Event
Angular
Kod Açıklaması:
- Ng-click olay direktifini düğme öğesine ekliyoruz. Burada, denetleyicimiz DemoController'da tanımlanan "ShowHide" adlı bir işleve atıfta bulunuyoruz.
- Angular metnini içeren bir div etiketine ng-show niteliğini ekliyoruz. Bu, ng-show niteliğine göre göstereceğimiz / gizleyeceğimiz etikettir.
-
Denetleyicide, "IsVisible" üye değişkenini kapsam nesnesine ekliyoruz. Bu özellik, div kontrolünün görünürlüğünü kontrol etmek için ng-show açısal niteliğine (adım # 2) aktarılacaktır. Başlangıçta bunu false olarak ayarlıyoruz, böylece sayfa ilk görüntülendiğinde div etiketi gizlenecek.
Not: - ng-show öznitelikleri true olarak ayarlandığında, bizim durumumuzda div etiketi olan sonraki kontrol kullanıcıya gösterilecektir. Ng-show özelliği yanlış olarak ayarlandığında, kontrol kullanıcıdan gizlenecektir.
- Div etiketinin kullanıcıya gösterilebilmesi için, ShowHide işlevine IsVisible üye değişkenini true olarak ayarlayacak kod ekliyoruz.
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıkış: 1
Çıktıdan
- Başlangıçta "AngularJS" metnine sahip div etiketinin gösterilmediğini görebilirsiniz ve bunun nedeni, isVisible kapsam nesnesinin başlangıçta false olarak ayarlanması ve daha sonra div etiketinin ng-show direktifine geçirilmesidir.
- "AngularJS'yi Göster" düğmesine tıkladığınızda, isVisible üye değişkenini doğru olacak şekilde değiştirir ve böylece "Angular" metni kullanıcı tarafından görünür hale gelir. Aşağıdaki çıktı kullanıcıya gösterilecektir.
Çıktı şimdi Angular metniyle div etiketini gösterir.
Ng-hide yönergesi nedir?
İle ng gizleme yönergesi ifadesi DOĞRU ise bir unsur gizlenir. İfade YANLIŞ ise, öğe gösterilecektir. Arka planda, .ng-hide CSS sınıfı kaldırılarak veya öğeye eklenerek öğe gösterilir veya gizlenir.
Öte yandan ng-hide ile, ifade doğruysa öğe gizlenir ve yanlışsa gösterilir.
NgHide özniteliğinin nasıl kullanılabileceğini göstermek için ngShow için gösterilen benzer örneğe bakalım.
Event Registration Guru99 Global Event
Angular
Kod Açıklaması:
- Ng-click olay direktifini düğme öğesine ekliyoruz. Burada, denetleyicimiz DemoController'da tanımlanan ShowHide adlı bir işleve atıfta bulunuyoruz.
- Angular metnini içeren bir div etiketine ng-hide niteliğini ekliyoruz. Bu, ng-show niteliğine göre göstereceğimiz / gizleyeceğimiz etikettir.
- Denetleyicide, isVisible üye değişkenini kapsam nesnesine ekliyoruz. Bu özellik, div kontrolünün görünürlüğünü kontrol etmek için ng-show açısal niteliğine aktarılacaktır. Başlangıçta bunu false olarak ayarlıyoruz, böylece sayfa ilk görüntülendiğinde div etiketi gizlenecek.
- Div etiketinin kullanıcıya gösterilebilmesi için, ShowHide işlevine IsVisible üye değişkenini true olarak ayarlayacak kod ekliyoruz.
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Çıktıdan
- Başlangıçta "AngularJs" metnine sahip div etiketinin, false özellik değerinin ng-hide direktifine gönderilmesi nedeniyle gösterildiğini görebilirsiniz.
- "Açıyı Gizle" düğmesine tıkladığımızda, true değerinin özellik değeri ng-hide direktifine gönderilecektir. Bu nedenle, "Açısal" kelimesinin gizleneceği aşağıdaki çıktı gösterilecektir.
AngularJS Event Listener Direktifleri
Aşağıdaki yönergelerden birini veya birkaçını kullanarak HTML öğelerinize AngularJS olay dinleyicileri ekleyebilirsiniz:
- ng-blur
- ng-değişimi
- ng-tıklama
- ng kopyası
- ng-kesim
- ng-dblclick
- ng-odak
- ng-keydown
- ng-tuşa basma
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng-yapıştır
Özet
- Olay yönergeleri, Angular'da düğme tıklamaları, klavye ve fare tıklamaları gibi kullanıcı müdahalesi tarafından oluşturulan olaylara yanıt vermek üzere özel kod eklemek için kullanılır.
- En yaygın olay direktifi, tıklama olaylarını işlemek için kullanılan ng-click direktifidir. Bunun en yaygın kullanımı, bir düğme tıklamasına yanıt vermek için kodun eklenebildiği düğme tıklamaları içindir.
- HTML öğeleri, ng-show ve ng-hide açısal nitelikleri kullanılarak buna göre gizlenebilir veya kullanıcıya gösterilebilir.