AngularJS'de ÖZEL Direktifler: Nasıl Oluşturulur? [Örnekler]
Özel Direktif Nedir?
A Özel Yönerge AngularJS'de, kullanıcıların HTML işlevselliğini genişletmek için istedikleri işlevleri kullanmalarını sağlayan kullanıcı tanımlı bir yönergedir. "Yönerge" işlevi kullanılarak tanımlanabilir ve kullanıldığı öğeyi değiştirir. AngularJS'de kutudan çıktığı haliyle çok sayıda güçlü yönerge bulunsa da, bazen özel yönergeler gerekir.
Özel Direktif Nasıl Oluşturulur?
AngularJS özel yönergesini nasıl oluşturabileceğimize dair bir örneğe göz atalım.
Bizim durumumuzda özel direktif, direktif çağrıldığında sayfamıza “AngularJS Tutorial” metnini içeren bir div etiketinin enjekte edilmesinden ibarettir.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <div ng-guru=""></div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('ngGuru',function(){ return { template: '<div>Angular JS Tutorial</div>' } }); </script> </body> </html>
Kod Açıklama
- İlk önce bir yaratıyoruz modül açısal uygulamamız için. Bu, özel bir yönerge oluşturmak için gereklidir çünkü yönerge bu modül kullanılarak oluşturulacaktır.
- Şimdi “ngGuru” adında özel bir direktif oluşturuyoruz ve direktifimiz için özel koda sahip olacak bir fonksiyon tanımlıyoruz.Not: - Yönergeyi tanımlarken, onu büyük harfle 'G' ile ngGuru olarak tanımladığımızı unutmayın. Ve ona div etiketimizden bir yönerge olarak eriştiğimizde, ona ng-guru olarak erişiyoruz. Angular, bir uygulamada tanımlanan özel yönergeleri bu şekilde anlar. İlk olarak, özel yönergenin adı 'ng' harfleriyle başlamalıdır. İkinci olarak, tire sembolü '-' yalnızca yönergeyi çağırırken belirtilmelidir. Üçüncü olarak, 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 parametre olan şablon parametresini kullanıyoruz. Burada, bu yönerge her kullanıldığında şablonun değerini kullanıp onu çağıran koda enjekte etmeyi tanımlıyoruz.
- Burada artık özel olarak oluşturduğumuz “ng-guru” direktifimizi kullanıyoruz. Bunu yaptığımızda şablonumuza tanımladığımız değer “ Açısal JS Eğitimi ” artık 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ımlanmış şablonu olan ö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 ile denetleyici arasındaki verileri yöneterek denetleyiciyi görünüme bağlayan yapıştırıcı olarak tanımlanır.
Özel AngularJs direktifleri oluştururken, varsayılan olarak ana denetleyicideki kapsam nesnesine erişime sahip olacaklardır.
Bu şekilde özel direktifin ana denetleyiciye aktarılan verilerden faydalanması kolaylaşır.
Özel yönergemizde ana denetleyicinin kapsamını nasıl kullanabileceğimize dair bir AngularJS özel yönergesi örneğine bakalım.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <div ng-guru=""></div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope) { $scope.tutorialName = "Angular JS"; }); app.directive('ngGuru',function(){ return { template: '<div>{{tutorialName}}</div>' } }); </script> </body> </html>
Kod Açıklama
- Öncelikle “DemoController” adında bir kontrolcü oluşturuyoruz. Burada, öğreticiName adında bir değişken tanımlıyoruz ve onu tek bir ifadeyle kapsam nesnesine ekliyoruz – $scope.tutorialName = “AngularJS”.
- Özel yönergemizde bir ifade kullanarak “tutorialName” değişkenini çağırabiliriz. Bu değişkene, bu yönergenin ebeveyni olacak olan “DemoController” denetleyicisinde tanımlandığı için erişilebilir olacaktır.
- Denetleyiciye, ana div etiketimiz olarak görev yapacak bir div etiketiyle başvuruyoruz. Özel yönergemizin öğreticiAdı değişkenine erişebilmesi için önce bunun yapılması gerektiğini unutmayın.
- Sonunda özel yönergemiz 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 yönergemiz “ng-guru”nun ana denetleyicideki öğreticiAdı kapsam değişkenini kullandığını açıkça göstermektedir.
Denetleyicileri yönergelerle kullanma
Angular bu olanağı sağlar denetleyicinin üye değişkenine doğrudan özel yönergelerden erişin kapsam nesnesine ihtiyaç duymadan.
Bir uygulamada birden fazla denetleyiciye ait birden fazla kapsam nesnesine sahip olabileceğiniz için bu bazen gerekli hale gelir.
Dolayısıyla yanlış denetleyicinin kapsam nesnesine erişme hatasına düşme olasılığınız yüksektir.
Bu tür senaryolarda direktifimden "Bu özel denetleyiciye erişmek istiyorum" ifadesini özellikle belirtmenin bir yolu vardır.
Bunu nasıl başarabileceğimize dair bir örneğe bakalım.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <div ng-guru99=""></div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function() { this.tutorialName = "Angular"; }); app.directive('ngGuru99',function(){ return { controller: 'DemoController', controllerAs: 'ctrl', template: '{{ctrl.tutorialName}}' }; }); </script> </body> </html>
Kod Açıklama
- Öncelikle “DemoController” adında bir kontrolcü oluşturuyoruz. Burada “tutorialName” adında bir değişken tanımlayacağız ve bu sefer onu kapsam nesnesine eklemek yerine doğrudan denetleyiciye bağlayacağız.
- Özel yönergemizde, Controller parametre anahtar kelimesini kullanarak “DemoController” denetleyicisini kullanmak istediğimizi özellikle belirtiyoruz.
- “controllerAs” parametresini kullanarak denetleyiciye bir referans oluşturuyoruz. Bu, Angular tarafından tanımlanır ve denetleyiciye referans olarak başvurmanın yoludur.
- Son olarak şablonumuzda 3. adımda oluşturulan referansı ve 1. Adımda doğrudan denetleyiciye eklenen üye değişkeni kullanıyoruz.
Not: -Bir yönergedeki birden fazla denetleyiciye, denetleyicinin, denetleyiciAs'ın ve şablon ifadelerinin ilgili bloklarını belirterek erişmek mümkündür.
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 eklenen eğitimAdı üye değişkenine eriştiğini ve "Angular" metnini görüntülediğini açıkça gösteriyor.
Yeniden kullanılabilir yönergeler 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 olan kodu enjekte etmek istediğimizi varsayalım; bu, temel olarak yalnızca kullanıcının "Ad" ve "yaş" bilgisi için bir girdidir.
Bu işlevi her seferinde kodlamadan birden fazla ekranda yeniden kullanmak için, bu kontrolleri tutacak bir ana kontrol veya açısal yönerge oluştururuz (Kullanıcının “Adı” ve “yaşı”).
Artık aşağıdaki ekrana her seferinde aynı kodu girmek yerine, bu kodu bir direktifin içine yerleştirebilir ve bu direktifi herhangi bir zamanda yerleştirebiliriz.
Bunu nasıl başarabileceğimize dair bir örnek görelim.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <div ng-guru=""></div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('ngGuru',function(){ return { template: ' Name <input type="text"><br><br> Age<input type="text">' }; }); </script> </body> </html>
Kod Açıklama
- Özel bir direktif için kod pasajımızda değişen şey, yalnızca özel direktifimizin şablon parametresine verilen değerdir. Beşinci plan etiketi veya metni yerine, aslında “ için 2 giriş kontrolünün tüm parçasını giriyoruz. Sayfamızda gösterilmesi gereken isim” ve “yaş”.
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 pasajının sayfaya eklendiğini görebiliriz.
AngularJS Direktifleri ve bileşenleri – ng-transclude
Daha önce de belirttiğimiz gibi, Angular'ın amacı, HTML. Özel yeniden kullanılabilir yönergeleri kullanarak nasıl kod enjeksiyonu yapabileceğimizi zaten gördük.
Ancak modern web uygulaması geliştirmede aynı zamanda web bileşenleri geliştirme kavramı da vardır. Bu, temel olarak kodumuzun bileşenleri olarak kullanılabilecek kendi HTML etiketlerimizi oluşturmak anlamına gelir.
Bu nedenle angular, HTML etiketlerinin kendisine öznitelikler ekleme yeteneği vererek HTML etiketlerini genişletmeye başka bir güç düzeyi sağlar.
Bu şu şekilde yapılır:ng-transclude” etiketi, angular'a işaretlemedeki direktifin içine konulan her şeyi yakalamasını söyleyen bir tür ayardır.
Bunu nasıl başarabileceğimize dair bir örnek verelim.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <pane title="{{title}}">Angular JS</pane> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('pane',function(){ return { transclude:true, scope :{title:'@'}, template: '<div style="border: 1px solid black;"> '+ '<ng-transclude></ng-transclude>'+ '</div>' }; }); </script> </body> </html>
Kod Açıklama
- 'Bölme' adı verilen özel bir HTML etiketi tanımlamak ve bu etiket için bazı özel kodlar koyacak bir işlev eklemek için yönergeyi kullanıyoruz. Çıktıda, özel bölme etiketimiz "AngularJS" metnini düz siyah kenarlıklı bir dikdörtgen içinde görüntüleyecektir.
- Bu etiketi DOM'umuza enjekte etmek için angular tarafından gerekli olan "transclude" özelliğinin true olarak belirtilmesi gerekir.
- Kapsamda bir başlık niteliği tanımlıyoruz. Nitelikler normalde ad/değer çiftleri olarak tanımlanır: ad=”değer”. Bizim durumumuzda bölme HTML etiketimizdeki özelliğin adı “title”dır. “@” sembolü açısal gerekliliktir. Bu, 5. Adımda title={{title}} satırı yürütüldüğünde, başlık niteliğine ilişkin özel kodun bölme HTML etiketine eklenmesini sağlayacak şekilde yapılır.
- Kontrolümüz için düz siyah bir kenarlık çizen başlık niteliklerinin özel kodu.
- Son olarak, tanımlanmış olan title özelliği ile 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 özelliğinin "Angular.JS" özel değerine ayarlandığını açıkça gösteriyor.
İç içe yönergeler
AngularJS'deki direktifler iç içe yerleştirilebilir. Herhangi bir programdaki iç modüller veya işlevler gibi Programlama dili, yönergeleri birbirinin içine yerleştirmeniz gerekebilir.
Aşağıdaki örneği inceleyerek bunu daha iyi anlayabilirsiniz.
Bu örnekte “outer” ve “inner” adında 2 direktif oluşturuyoruz.
- İç direktif “İç” adında bir metin görüntüler.
- Dış yönerge aslında “İç” adlı metni görüntülemek için iç yönergeye çağrı yapar.
</head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <outer></outer> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('outer',function(){ return { restrict:'E', template: '<div><h1>Outer</h1><inner></inner></div>', }}); app.directive('inner',function(){ return { restrict:'E', template: '<div><h1>Inner</h1></div>', } }); </script> </body> </html>
Kod Açıklama
- Ana direktifimiz gibi davranacak “dış” adında bir direktif oluşturuyoruz. Bu direktif daha sonra “iç” direktife çağrı yapacaktır.
- Kısıtlama:'E', iç yönergedeki verilerin dış yönergede mevcut olmasını sağlamak için açısal olarak gereklidir. 'E' harfi 'Element' kelimesinin kısa şeklidir.
- Burada div etiketinde “Inner” metnini görüntüleyen iç yönergeyi oluşturuyoruz.
- Dış yönergenin şablonunda (4. adım), iç yönergeyi çağırıyoruz. Yani burada şablonu iç direktiften dış direktife enjekte ediyoruz.
- Son olarak doğrudan dış yönergeyi seslendiriyoruz.
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,
- Hem dış hem de iç direktiflerin çağrıldığı ve her iki div etiketindeki metnin görüntülendiği görülebilir.
Bir yönergedeki olayları işleme
Etkinlikler bu tür fare tıklamaları veya düğme tıklamaları direktiflerin içinden yapılabilir. Bu, bağlantı işlevi kullanılarak yapılır. Bağlantı işlevi, yönergenin kendisini bir HTML sayfasındaki DOM öğelerine eklemesine olanak tanıyan işlevdir.
Sözdizimi:
Bağlantı öğesinin sözdizimi aşağıda gösterildiği gibidir
link: function ($scope, element, attrs)
Bağlantı işlevi normalde kapsamı, yönergenin ilişkili olduğu öğeyi ve hedef öğenin niteliklerini içeren 3 parametreyi kabul eder.
Bunu nasıl başarabileceğimize dair bir örneğe bakalım.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp"> <div ng-guru="">Click Me</div> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.directive('ngGuru',function(){ return { link:function($scope,element,attrs) { element.bind('click',function () { element.html('You clicked me'); });} }}); </script> </body> </html>
Kod Açıklama
- Yönergelerin HTML DOM'daki olaylara erişme yeteneğini vermek için angular'da tanımlandığı gibi link işlevini kullanıyoruz.
- 'Element' anahtar kelimesini kullanıyoruz çünkü bir HTML DOM öğesi için bir etkinliğe yanıt vermek istiyoruz, bu bizim durumumuzda “div” öğesi olacak. Daha sonra “bind” fonksiyonunu kullanıyoruz ve elementin click olayına özel işlevsellik eklemek istediğimizi söylüyoruz. 'Click' kelimesi, herhangi bir HTML kontrolünün click olayını belirtmek için kullanılan anahtar kelimedir. Örneğin, HTML düğme kontrolünde click olayı vardır. Örneğimizde “dev” etiketimizin click olayına özel bir kod eklemek istediğimiz için 'click' anahtar kelimesini kullanıyoruz.
- Burada, öğenin iç HTML'sini (bizim durumumuzda div öğesi) 'Beni tıkladınız!' metniyle değiştirmek istediğimizi söylüyoruz.
- Burada div etiketimizi ng-guru özel direktifini kullanacak şekilde tanımlı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ı:
- Başlangıçta div etiketinde tanımlanan metin olduğundan kullanıcıya 'Beni Tıkla' metni gösterilecektir. Aslında div etiketine tıkladığınızda aşağıdaki çıktı gösterilecektir.
ÖZET
- Ana açısal uygulamaya kod eklemek için kullanılabilecek özel bir yönerge de oluşturulabilir.
- 'Controller', 'controllerAs' ve 'template' anahtar sözcükleri kullanılarak belirli bir denetleyicideki kapsam nesnesinde tanımlanan üyeleri çağırmak için özel yönergeler yapılabilir.
- Direktifler ayrıca uygulamanın ihtiyacına bağlı olarak gerekli olabilecek gömülü işlevsellik sağlamak için iç içe de yerleştirilebilir.
- Yönergeler ayrıca çeşitli web uygulamalarında gerekli olabilecek ortak kodu enjekte etmek için kullanılabilecek şekilde yeniden kullanılabilir hale getirilebilir.
- Direktifler ayrıca iş gereksinimlerine göre tanımlanmış kendi işlevlerine sahip özel HTML etiketleri oluşturmak için de kullanılabilir.
- Olaylar ayrıca, düğme ve fare tıklamaları gibi DOM olaylarını yönetmek için yönergelerin içinden de işlenebilir.