Özel Direktif nedir?
Angular Js'deki özel bir yönerge, istediğiniz işlevselliğe sahip kullanıcı tanımlı bir yönergedir. AngularJS, kullanıma hazır birçok güçlü yönergeye sahip olsa da, bazen özel yönergeler gerekir.
Bu eğitimde öğreneceksiniz-
- Özel Direktif Nasıl Oluşturulur?
- AngularJs Direktifleri ve Kapsamları
- Direktiflere sahip denetleyicileri kullanma
- Yeniden kullanılabilir direktifler nasıl oluşturulur
- AngularJS Direktifleri ve bileşenleri - ng-transclude
- İç içe yerleştirilmiş yönergeler
- Bir direktifte olayları işleme
Özel Direktif Nasıl Oluşturulur?
Özel bir yönergeyi nasıl oluşturabileceğimize dair bir örneğe bakalım.
Bizim durumumuzdaki özel yönerge, yönerge çağrıldığında sayfamıza "AngularJS Tutorial" metni içeren bir div etiketi enjekte edecektir.
Event Registration Guru99 Global Event
Kod Açıklaması:
- İlk önce açısal uygulamamız için bir modül oluşturuyoruz. Yönerge bu modül kullanılarak oluşturulacağından, özel bir yönerge oluşturmak için bu gereklidir.
- Şimdi "ngGuru" adında özel bir yönerge oluşturuyoruz ve yönergemiz için özel koda sahip olacak bir işlev tanımlıyoruz.
Not:-
Direktifi tanımlarken, onu 'G' harfi büyük harfle ngGuru olarak tanımladığımıza dikkat edin. Ve buna div etiketimizden bir yönerge olarak eriştiğimizde, ona ng-guru olarak erişmiş oluyoruz. Açısal, bir uygulamada tanımlanan özel yönergeleri bu şekilde anlar. Öncelikle özel direktifin adı 'ng' harfleriyle başlamalıdır. İkinci olarak, kısa çizgi sembolü '-' yalnızca yönerge çağrılırken belirtilmelidir. Üçüncüsü, yönergeyi tanımlarken 'ng' harflerinden sonra gelen ilk harf küçük veya büyük olabilir.
- Özel direktifler için Angular tarafından tanımlanan bir parametrenin şablon parametresini kullanıyoruz. Bunda, bu direktif her kullanıldığında, o zaman sadece şablonun değerini kullanıp onu çağıran koda enjekte edeceğimizi tanımlıyoruz.
- Burada şimdi özel olarak oluşturulmuş "ng-guru" direktifimizden yararlanıyoruz. Bunu yaptığımızda, "Angular JS Tutorial" şablonumuz için tanımladığımız değer şimdi buraya enjekte edilecek.
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ı, özel bir metni göstermek için tanımlanan şablona sahip özel ng-guru yönergemizin tarayıcıda görüntülendiğini açıkça göstermektedir.
AngularJs Direktifleri ve Kapsamları
Kapsam, görünüm ve denetleyici arasındaki verileri yöneterek denetleyiciyi görünüme bağlayan yapıştırıcı olarak tanımlanır.
Özel AngularJs yönergeleri oluştururken, bunlar varsayılan olarak üst denetleyicideki kapsam nesnesine erişebilirler.
Bu şekilde, özel direktifin ana denetleyiciye iletilen verileri kullanması kolaylaşır.
Özel direktifimizde bir üst denetleyicinin kapsamını nasıl kullanabileceğimize dair bir örneğe bakalım.
Event Registration Guru99 Global Event
Kod Açıklaması:
- Önce "DemoController" adında bir kontrolör oluşturuyoruz. Burada, tutorialName adında bir değişken tanımlıyoruz ve bunu tek bir ifadede kapsam nesnesine ekliyoruz - $ kapsam.tutorialName = "AngularJS".
- Özel direktifimizde, bir ifade kullanarak "tutorialName" değişkenini çağırabiliriz. Bu değişken, bu direktifin üst öğesi olacak olan "DemoController" denetleyicisinde tanımlandığı için erişilebilir olacaktır.
- Denetleyiciye, üst div etiketimiz olarak işlev görecek bir div etiketinde başvururuz. Özel direktifimizin tutorialName değişkenine erişmesi için önce bunun yapılması gerektiğini unutmayın.
- Sonunda özel direktifimiz olan "ng-guru" 'yu div etiketimize ekledik.
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ı, özel direktifimiz "ng-guru" nun üst denetleyicideki kapsam değişkeni tutorialName'i kullandığını açıkça göstermektedir.
Direktiflere sahip denetleyicileri kullanma
Angular, tesisin denetleyicinin üye değişkenine kapsam nesnesine ihtiyaç duymadan özel yönergelerden doğrudan erişmesini sağlar .
Bu bazen gerekli hale gelir çünkü bir uygulamada birden çok denetleyiciye ait birden çok kapsam nesnesine sahip olabilirsiniz.
Bu nedenle, yanlış denetleyicinin kapsam nesnesine erişme hatasını yapma olasılığınız yüksektir.
Bu tür senaryolarda, yönergemden "Bu belirli denetleyiciye erişmek istiyorum" demenin özellikle belirtilmesinin bir yolu vardır.
Bunu nasıl başarabileceğimize dair bir örneğe bakalım.
Event Registration Guru99 Global Event
Kod Açıklaması:
- Önce "DemoController" adında bir kontrolör oluşturuyoruz. Burada "tutorialName" adında bir değişken tanımlayacağız ve bu sefer onu kapsam nesnesine eklemek yerine, doğrudan denetleyiciye ekleyeceğiz.
- Özel direktifimizde, denetleyici parametre anahtar sözcüğünü kullanarak denetleyici "DemoController" ı kullanmak istediğimizden özellikle söz ediyoruz.
- "ControllerAs" parametresini kullanarak denetleyiciye bir referans oluşturuyoruz. Bu, Angular tarafından tanımlanır ve denetleyiciye referans olarak başvurmanın yoludur.
Not: - Bir yönergede birden çok denetleyiciye, denetleyicinin ilgili bloklarını, controllerAs'ları ve şablon deyimlerini belirterek erişmek mümkündür.
- Son olarak, şablonumuzda, 3. adımda oluşturulan referansı ve 1. Adımda doğrudan denetleyiciye eklenen üye değişkenini kullanıyoruz.
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ı, özel direktifin özellikle DemoController'a ve ona bağlı üye değişkeni tutorialName'e eriştiğini ve "Angular" metnini gösterdiğini açıkça gösteriyor.
Yeniden kullanılabilir direktifler nasıl oluşturulur
Özel direktiflerin gücünü zaten gördük, ancak kendi yeniden kullanılabilir direktiflerimizi oluşturarak bunu bir sonraki seviyeye taşıyabiliriz.
Örneğin, aşağıdaki HTML etiketlerini her zaman birden çok ekranda gösterecek bir kod enjekte etmek istediğimizi varsayalım, bu temelde kullanıcının "Adı" ve "yaşı" için bir girdi.
Bu işlevi her seferinde kodlamadan birden fazla ekranda yeniden kullanmak için, bu kontrolleri tutmak için bir ana kontrol veya açısal yönerge oluşturuyoruz (kullanıcının "Adı" ve "yaşı").
Şimdi, aşağıdaki ekrana her seferinde aynı kodu girmek yerine, aslında bu kodu bir yönergeye yerleştirebilir ve bu yönergeyi herhangi bir zamanda yerleştirebiliriz.
Bunu nasıl başarabileceğimize dair bir örnek görelim.
Event Registration Guru99 Global Event
Kod Açıklaması:
- Özel bir direktif için kod pasajımızda, değişiklikler yalnızca özel direktifimizin şablon parametresine verilen değerdir.
Bir plan beş etiketi veya metni yerine, aslında sayfamızda gösterilmesi gereken "Ad" ve "yaş" için 2 giriş kontrolünün tamamını giriyoruz.
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, özel direktifin şablonundaki kod parçacığının sayfaya eklendiğini görebiliriz.
AngularJS Direktifleri ve bileşenleri - ng-transclude
Daha önce bahsettiğimiz gibi, Angular, HTML'nin işlevselliğini genişletmek içindir. Ve yeniden kullanılabilir özel direktifleri kullanarak nasıl kod enjeksiyonuna sahip olabileceğimizi zaten görmüştük.
Ancak modern web uygulaması geliştirmede, web bileşenleri geliştirme kavramı da vardır. Bu, temelde kodumuzda bileşenler olarak kullanılabilecek kendi HTML etiketlerimizi oluşturmak anlamına gelir.
Bu nedenle açısal, öznitelikleri HTML etiketlerinin kendisine enjekte etme yeteneği vererek HTML etiketlerini genişletmek için başka bir güç düzeyi sağlar.
Bu, " ng-transclude " etiketi ile yapılır, bu, işaretlemede direktifin içine yerleştirilen her şeyi yakalaması için açısal komutu veren bir tür ayar olan " ng-transclude " etiketiyle yapılır .
Bunu nasıl başarabileceğimize bir örnek verelim.
Event Registration Guru99 Global Event
Angular JS
Kod Açıklaması:
- Yönergeyi 'pane' adlı özel bir HTML etiketi tanımlamak için kullanıyoruz ve bu etiket için bazı özel kodlar koyacak bir işlev ekliyoruz. Çıktıda, özel bölme etiketimiz "AngularJS" metnini düz siyah kenarlıklı bir dikdörtgen içinde görüntüleyecektir.
- "Transclude" özniteliğinden true olarak bahsedilmelidir ve bu, bu etiketi DOM'umuza eklemek için açısal olarak gereklidir.
- Kapsamda, bir başlık niteliği tanımlıyoruz. Nitelikler normalde ad / değer çiftleri olarak tanımlanır, örneğin: ad = "değer". Bizim durumumuzda, bölmemizdeki HTML etiketindeki özniteliğin adı "başlık" dır. "@" Sembolü, açısaldan gelen gerekliliktir. Bu, 5. Adımda title = {{title}} satırı çalıştırıldığında, title niteliğinin özel kodunun bölme HTML etiketine eklenmesi için yapılır.
- Kontrolümüz için tam siyah bir kenarlık çizen başlık öznitelikleri için özel kod.
- Son olarak, tanımlanmış olan başlık özniteliğiyle birlikte özel HTML etiketimizi çağırıyoruz.
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ı, bölme html5 etiketinin başlık özniteliğinin "Angular.JS" özel değerine ayarlandığını açıkça gösterir.
İç içe yerleştirilmiş yönergeler
Açısal yönergeler yuvalanabilir. Herhangi bir programlama dilindeki sadece iç modüller veya işlevler gibi, yönergeleri birbirinin içine yerleştirmeniz gerekebilir.
Aşağıdaki örneği görerek bunu daha iyi anlayabilirsiniz.
Bu örnekte, "dış" ve "iç" adlı 2 yönerge oluşturuyoruz.
- İç yönerge "İç" adlı bir metin görüntüler.
- Dış yönerge aslında "İç" adlı metni görüntülemek için iç yönergeye bir çağrı yapar.
Guru99 Global Event