AngularJS - Directives

AngularJS'de Directive'ler HTML tagları ve kontrollerinde kullandığımız tanımlamalardır. Bu tanımlamaları kullanarak AngularJS ile yazdığımız HTML  sayfalarımız çalışacaktır.
HTML sayfalrını genişletilebilirlik kazandırır.
Directive'ler ng- ön eki ile başlar data-ng- ile de başlayabiliriz.İki kullanım da çalışacaktır.

Temel AngularJS Directive'leri

ng-app: En üstte tanımladığımız directive'dir.Bu tanımlamayı kullandığımız alandaki bütün AngularJS kodları çalışacaktır. Bu tanımlama olmadan AngularJS kodları çalışmaz.
html, body veya bir div içerisine yazılabilir.

ng-model: HTML  kontrolünün değerini alıyor. Bir TextBox'a ng-model="isim" değerini verdiğimizde o modeli kullanarak işlemler yapabiliriz.

ng-bind: Tanımladığımız modele bağladığımız alan.Kontrolden ng-model vasıtasıyla aldığımız değeri başka bir alanda yazdırabilmemizi sağlar.

ng-init: Değişken tanımlayabildiğimiz ve AngularJS'de kullanabildiğimiz tanımlamadır. Veriyi dinamik olarak taşıyabilmemizi sağlar. Tek bir değer tutabildiği gibi bir dizi de tutabilirler.

ng-repeat: MVC'de View'de kullandığımız foreach ile aynıdır. Bir HTML kontrolünün veya ng-init ile tanımladığımız bir dizinin değerlerinde dönmemizi sağlar.

Expressions(İfadeler): {{}}
Bu tanımlamalar dışında veri tutan ve üzerinde işlemler yapabilmemizi sağlayan yapıdır.İç içe iki paranteze yazığımız ifadeleri çalıştırır. Üzerinde dört işlem bile yapabilirsiniz.

Örnek kullanımlarımız

• TextBox'a adınızı yazabilirsiniz, Benim adım kısmına dikkatinizi çekmek istiyorum.

Adım: Benim adım : {{isim}}

Kaynak kodumuz

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div data-ng-app="">
Adım: <input name="name" ng-model="isim" type="text" value="" />
        Benim adım : {{isim}}
</div>

ng-model' i isim olan textbox'a yazdığımız veri anlık olarak değiştiğini gördük, isim modelini expression scopu'na yazdırdık.

• Expression'da 2+3+5 işlemini yazdırdık

2+3+5={{2+3+5}}

Kaynak kodumuz

2+3+5={{2+3+5}}

• Değişken tanımlama ve veriyi dinamik olarak taşımak

ng-init ile sayi ve isim adında iki değişken tanımladım.Değişken tanımlama,dinamik olarak veriyi taşıyoruz. sayi=55 ve isim='Mert' olarak tanımladık. ng-bind ile de bu verileri bastırdık.

Kaynak kodumuz

    <div ng-init="sayi=55">
        <p ng-bind="sayi"></p>
    </div>

    <div ng-init="isim='Mert'">
        <p ng-bind="isim"></p>
    </div>

• Dizi olarak tanımladığımız sayıları sayilar adlı dizinin elemanlarını ng-repeat alanında tanımlayarak kullanabiliriz.Kullanım mantığı foreach ile aynıdır(var item in collection) 

ng-init alanında sayilar dizisini sayilar=[5,10,15,20] şeklinde tanımladık.
ng-repeat ile döngümüzü s in sayilar şeklnde kurduk ve <p> tagında expression oluşturup dizinin eleman sayısı kadar <p> tagı oluşturduk ve elemanları yazdırdık

{{s}}

Kaynak kodumuz

<div ng-model="sayilar=[5,10,15,20]">
   <p ng-repeat="s in sayilar">
      {{s}}
   </p>
</div>

Temel olarak directive yapılarını bu şekilde kullanabiliriz.