AngularJS Direktifleri: ng-init, ng-app, ng-model ve ng-repeat
James Hartman
AngularJS'de Yönerge nedir?
A Yönerge AngularJS'de HTML'ye yeni işlevler kazandıran bir komuttur. Angular, HTML kodunu incelediğinde, önce 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 direktifidir”. Bu yönerge veri modelimizi görünümümüze bağlamak için kullanılır.
Not: Bir HTML sayfasında, ng-init, ng-repeat ve ng-model direktifleriyle, Denetleyicilere ihtiyaç duymadan temel açısal koda sahip olabilirsiniz. Bu direktiflerin mantığı Google tarafından sağlanan Angular.js dosyasında bulunmaktadır. Denetleyiciler, iş mantığına izin veren bir sonraki seviye açısal programlama yapılarıdır, ancak belirtildiği gibi bir uygulamanın açısal uygulama olması için bir denetleyiciye sahip olmak zorunlu değildir.
AngularJS'de Direktifler Nasıl Oluşturulur
Girişte tanımladığımız gibi AngularJS direktifleri, AngularJS'in işlevselliğini genişletmenin bir yoludur. HTML.
Tanımlanmış 4 direktif vardır. angularjs.
Aşağıda AngularJS direktiflerinin listesi ve bunların her birini açıklamak için sağlanan örnekler yer almaktadır.
AngularJS'de ng-app
Bu, bir Angular.JS uygulamasını başlatmak için kullanılır. Bu yönerge bir HTML sayfasına yerleştirildiğinde, temel olarak Angular'a bu HTML sayfasının bir angular.js uygulaması olduğunu söyler.
Np-app örneği
Aşağıdaki örnek ng-app direktifinin nasıl kullanılacağını göstermektedir. Bu örnekte, normal bir HTML uygulamasının nasıl angularJS uygulamasına dönüştürüleceğini göstereceğiz.
<!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="">
Tutorial Name : {{ "Angular" + "JS"}}
</div>
</body>
</html>
Kod Açıklaması:
- Bu uygulamanın bir angular.js uygulaması olduğunu belirtmek için div etiketimize “ng-app” direktifi eklenmiştir. Ng-app direktifinin herhangi bir etikete uygulanabileceğini, dolayısıyla gövde etiketine de yerleştirilebileceğini unutmayın.
- Bu uygulamayı angular.js uygulaması olarak tanımladığımız için artık angular.js işlevselliğinden faydalanabiliyoruz. 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.
AngularJS'de 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.
Ng-init örneği
Aşağıdaki örnek ng-init yönergesinin nasıl kullanılacağını göstermektedir.
Bu örnekte ng-init direktifini kullanarak “TutorialName” adında bir değişken oluşturup o değişkenin değerini sayfada görüntüleyeceğiz.
<!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="" ng-init="TutorialName='Angular JS'">
Tutorial Name : {{ TutorialName}}
</div>
</body>
</html>
Kod Açıklaması:
- “TutorialName” isimli local değişkeni tanımlamak için div etiketimize ng-init direktifi ekleniyor ve buna verilen değer “AngularJS” oluyor.
- Ng-init direktifimizde tanımlanan “TutorialName” değişken adının çı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, ng-init bölümünde 'TutorialName' değişkenine "AngularJS" dizesinin atanmasının bir sonucudur.
AngularJS'de ng modeli
Ve son olarak, bir HTML kontrolünün değerini uygulama verilerine bağlamak için kullanılan ng-model direktifine sahibiz. Aşağıdaki örnek ng-model yönergesinin nasıl kullanılacağını göstermektedir.
Ng modeli örneği
Bu örnekte,
- “Miktar” ve “Fiyat” adında 2 değişken oluşturacağız. Bu değişkenler 2 metin giriş kontrolüne bağlanacaktır.
- Daha sonra hem fiyat hem de miktar değerlerinin çarpımına göre toplam tutarı görüntüleyeceğiz.
<!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="" ng-init="quantity=1;price=5">
People : <input type="number" ng-model="quantity">
Registration Price : <input type="number" ng-model="price">
Total : {{quantity * price}}
</div>
</body>
</html>
Kod Açıklaması:
- 2 yerel değişkeni tanımlamak için div etiketimize ng-init yönergesi eklenir; birine “miktar”, diğerine “fiyat” denir.
- Şimdi “Kişiler” ve “Kayıt ücreti” metin kutularını sırasıyla yerel değişkenlerimiz “miktar” ve “fiyat”a bağlamak için ng-model yönergesini kullanıyoruz.
- Son olarak, Toplamı, miktar ve fiyat değişkenlerinin çarpımı olan bir ifadeyle 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ştirdiğinizde Toplam otomatik olarak değişecektir.
- Yukarıdaki çıktı, angularJ'lerde veri bağlamanın gücünü gösterir; bu, kullanımıyla elde edilir. ng-model direktifi.
AngularJS'de ng-tekrar
Bu, bir HTML öğesini tekrarlamak için kullanılır. Aşağıdaki örnek, nasıl kullanılacağını gösterir ng-tekrar direktifi.
Ng-tekrar örneği
Bu örnekte,
- Bir dizi değişkeninde bir dizi bölüm adımız olacak ve
- daha sonra dizinin her öğesini bir liste öğesi olarak görüntülemek için ng-repeat yönergesini kullanın.
<!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="" ng-init="chapters=['Controllers','Models','Filters']">
<ul>
<li ng-repeat="names in chapters">
{{names}}
</li>
</ul>
</div>
</body>
</html>
Kod Açıklaması:
- 3 string içeren bir dizi değişkeni olan “chapters” adı verilen bir değişkeni tanımlamak için div etiketimize ng-init direktifi eklenir.
- Ng-repeat öğesi, "isimler" adı verilen bir satır içi değişkenin bildirilmesi ve bölümler dizisindeki her öğenin üzerinden geçilmesiyle kullanılır.
- Son olarak yerel satır içi değişken 'names'in 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ı sadece ng-repeat direktifinin "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ğıdaki 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-repeat – Öğeleri açısal kullanarak tekrarlamak için kullanılır.
