AngularJS – Direktifler
AngularJS direktifleri HTML’yi genişletmek için kullanılır. Bunlar, ng-ön ekiyle başlayan özel niteliklerdir. Aşağıdaki direktifleri açıklayacağız-
- Ng -app – Bu direktifle bir AngularJS Başvurusu başlatılır.
- Ng -init – Bu direktif, uygulama verilerini başlatır.
- Ng -model – Bu direktif, AngularJS uygulama verisinin değerlerini HTML giriş denetimlerine bağlar.
- Ng -repeat – Bu direktif, bir koleksiyondaki her öğe için html öğelerini tekrarlar.
Ng-app Direktifi
Ng-app direktifi bir AngularJS Başvurusu başlatır. Kök elemanı tanımlar. AngularJS Uygulaması içeren web sayfası yüklendiğinde, uygulamayı otomatik olarak başlatır veya yüklenir. Ayrıca AngularJS Uygulamasında çeşitli AngularJS modüllerini yüklemek için kullanılır. Aşağıdaki örnekte, bir div öğesinin ng-app özniteliğini kullanarak varsayılan AngularJS uygulaması tanımladık.
|
1
2
3
|
<div ng-app = "">
...
</div>
|
Ng-init Direktifi
Ng-init direktifi bir AngularJS Uygulama verisini başlatır. Uygulamada kullanılacak değişkenlere değerler koymak için kullanılır. Aşağıdaki örnekte, bir dizi ülkeyi başlatacağız. Ülkelerin dizisini tanımlamak için JSON sözdizimini kullanıyoruz.
|
1
2
3
|
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
...
</div>
|
Ng-model Direktifi
Bu yönerge, AngularJS uygulama verisinin değerlerini HTML input denetimlerine bağlar. Aşağıdaki örnekte, “name” adlı bir model tanımladık.
|
1
2
3
4
|
<div ng-app = "">
...
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
</div>
|
Ng-repeat Direktifi
Ng-repeat yönergesi, bir koleksiyondaki her öğe için html öğelerini tekrarlar.Aşağıdaki örnekte, ülkeler dizisi üzerinden tekrar ettik.
|
1
2
3
4
5
6
7
8
9
10
11
|
<div ng-app = "">
...
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
|
Örnek
Aşağıdaki örnek yukarıdaki tüm direktiflerin kullanımını gösterecektir.
testAngularJS.htm
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<html>
<head>
<title>AngularJS Directives</title>
</head>
<body>
<h1>Sample Application</h1>
<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">
<p>Enter your Name: <input type = "text" ng-model = "name"></p>
<p>Hello <span ng-bind = "name"></span>!</p>
<p>List of Countries with locale:</p>
<ol>
<li ng-repeat = "country in countries">
{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
</li>
</ol>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</body>
</html>
|
Leave a reply