AngularJS yönergesi nedir?
AngularJS'deki bir yönerge, HTML'ye yeni işlevsellik sağlayan bir komuttur. Açısal HTML kodu üzerinden geçtiğinde, ilk olarak sayfadaki yönergeleri bulacak ve ardından HTML sayfasını buna göre ayrıştıracaktır.
Daha önceki bölümlerde gördüğümüz AngularJS direktifinin basit bir örneği "ng-model direktifi" dir. Bu yönerge, veri modelimizi görüşümüze bağlamak için kullanılır.
Not: Kontrolörlere ihtiyaç duymadan ng-init, ng-tekrar ve ng-model direktiflerine sahip bir HTML sayfasında temel açısal koda sahip olabilirsiniz. Bu yönergelerin mantığı, Google tarafından sağlanan Angular.js dosyasındadır. Denetleyiciler, iş mantığına izin veren bir sonraki düzey açısal programlama yapılarıdır, ancak bir uygulamanın açısal bir uygulama olması için belirtildiği gibi, bir denetleyiciye sahip olmak zorunlu değildir.
Bu eğitimde öğreneceksiniz-
- Direktif Nasıl Oluşturulur
- ng-uygulaması
- ng-init
- ng-modeli
- ng-tekrar
Direktif Nasıl Oluşturulur
Giriş bölümünde tanımladığımız gibi, AngularJS yönergeleri HTML'nin işlevselliğini genişletmenin bir yoludur.
AngularJS'de tanımlanmış 4 yönerge vardır.
Aşağıda, AngularJS direktiflerinin listesi ve bunların her birini açıklamak için verilen örnekler yer almaktadır.
1) ng-uygulaması
Bu, bir Angular.JS uygulamasını başlatmak için kullanılır. Bu yönerge bir HTML sayfasında yer aldığında, temelde Angular'a bu HTML sayfasının bir angular.js uygulaması olduğunu söyler.
Aşağıdaki örnek ng-app direktifinin nasıl kullanılacağını göstermektedir. Bu örnekte, normal bir HTML uygulamasının nasıl bir angularJS uygulaması yapılacağını göstereceğiz.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Kod Açıklaması:
- Bu uygulamanın bir angular.js uygulaması olduğunu belirtmek için div etiketimize "ng-app" yönergesi eklenir. Ng-app yönergesinin herhangi bir etikete uygulanabileceğini, dolayısıyla gövde etiketine de yerleştirilebileceğini unutmayın.
- Bu uygulamayı bir angular.js uygulaması olarak tanımladığımız için, artık angular.js işlevselliğini kullanabiliriz. Bizim durumumuzda, 2 dizeyi basitçe birleştirmek için ifadeler 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ı, yalnızca uygulamayı bir angularjs uygulaması olarak tanımladığımız için mümkün olan ifadenin çıktısını açıkça gösterir.
2) ng-init
Bu, uygulama verilerini başlatmak için kullanılır. Bazen uygulamanız için bazı yerel verilere ihtiyaç duyabilirsiniz, bu ng-init direktifi ile yapılabilir.
Aşağıdaki örnek ng-init direktifinin nasıl kullanılacağını göstermektedir.
Bu örnekte, ng-init direktifini kullanarak "TutorialName" adında bir değişken oluşturacağız ve bu değişkenin değerini sayfada göstereceğiz.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Kod Açıklaması:
- Ng-init yönergesi, "TutorialName" adlı yerel bir değişkeni tanımlamak için div etiketimize eklenir ve buna verilen değer "AngularJS" dir.
- Ng-init yönergemizde tanımlanan değişken adı "EgitimAdı" çıktısını görüntülemek için AngularJs'deki ifadeleri 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ıda,
- Sonuç, "AngularJS" dizesini içeren ifadenin çıktısını açıkça gösterir. Bu, "AngularJS" dizesinin ng-init bölümünde "EğitimAdı" değişkenine atanmasının bir sonucudur.
3) ng-modeli
Son olarak, bir HTML kontrolünün değerini uygulama verilerine bağlamak için kullanılan ng-model direktifimiz var. Aşağıdaki örnek ng-model direktifinin nasıl kullanılacağını göstermektedir.
Bu örnekte,
- "Miktar" ve "fiyat" adlı 2 değişken oluşturacağız. Bu değişkenler, 2 metin girişi kontrolüne bağlanacaktır.
- Daha sonra, hem fiyat hem de miktar değerlerinin çarpımına dayalı olarak toplam tutarı görüntüleyeceğiz.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Kod Açıklaması:
- Ng-init yönergesi, 2 yerel değişkeni tanımlamak için div etiketine eklenir; biri "miktar" ve diğeri "fiyat".
- Şimdi "Kişi" ve "Kayıt fiyatı" metin kutularını sırasıyla "miktar" ve "fiyat" değişkenlerimize bağlamak için ng-model direktifini kullanıyoruz.
- Son olarak, Miktar ve fiyat değişkenlerinin çarpımı olan bir ifade ile Toplamı 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ı:
- Çıktı, Kişi ve Kayıt fiyatı değerlerinin çarpımını açıkça gösterir.
Şimdi, metin kutularına gidip Kişi ve Kayıt fiyatının değerini değiştirirseniz, Toplam otomatik olarak değişecektir.
- Yukarıdaki çıktı, ng-modeli direktifinin kullanılmasıyla elde edilen, açısalJs cinsinden veri bağlamanın gücünü gösterir.
4) ng-tekrar
Bu, bir HTML öğesini tekrarlamak için kullanılır. Aşağıdaki örnek ng-tekrar yönergesinin nasıl kullanılacağını göstermektedir.
Bu örnekte,
- Bir dizi değişkeninde bir dizi bölüm ismine sahip olacağız ve
- daha sonra dizinin her bir öğesini bir liste öğesi olarak görüntülemek için ng-tekrar yönergesini kullanın
Event Registration Guru99 Global Event
- {{names}}
Kod Açıklaması:
- Ng-init yönergesi, 3 dizge içeren bir dizi değişkeni olan "bölümler" adlı bir değişkeni tanımlamak için div etiketimize eklenir.
- Ng-tekrar elemanı, "isimler" adı verilen bir satır içi değişken bildirilerek ve chapters dizisindeki her bir elemandan geçerek kullanılır.
- Son olarak, yerel satır içi değişken 'adlarının' değerini 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ı, ng-tekrar yönergesinin "bölümler" adı verilen dizideki her değeri aldığını ve dizideki her öğe için HTML liste öğeleri oluşturduğunu gösterir.
Özet
- Yönergeler, HTML'nin işlevselliğini genişletmek için kullanılır. Angular, aşağıdakiler gibi dahili yönergeler sağlar:
- ng-app - Bu, açısal bir uygulamayı başlatmak için kullanılır.
- ng-init - Bu, uygulama değişkenleri oluşturmak için kullanılır
- ng-model - Bu, HTML kontrollerini uygulama verilerine bağlamak için kullanılır
- ng-tekrar - Öğeleri açısal kullanarak tekrarlamak için kullanılır.