AngularJS’de Temel Yapılar ve Direktifler

Gençay

9 yıl önce

Merhaba,

Bir önceki AngularJS Nedir? başlıklı yazımızda AngularJS’nin özellik ve getirileri hakkında teorik olarak konuşmuştuk. Bu içeriğimizde ise AngularJS’yi teknik olarak temellendireceğiz ve pratikte ana etmenlerin neler olduğunu inceleyeceğiz.

Herşeyden önce AngularJS’yi kullanacağımız sayfaya aşağıdaki gibi kaynak dosyayı entegre etmemiz gerekmektedir.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>
</body>
</html>

AngularJS’de ilk olarak aşağıdaki beş adet direktifi ele almak bundan sonraki diğer yapılar ve direktifler için temel teşkil edecektir. Bu beş direktif;

ng-app
ng-app yönergesi; AngularJS’nin hangi blokta kullanacağını belirtmektedir. Bu blok <div> gibi <span> gibi vs. herhangi bir html etiketi olabilir.
```
<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body> 
<div ng-app="">
        
</div>
<div>
        
</div>
</body>
</html>
```
Yukarıdaki kod bloğunda gördüğünüz gibi AngularJS ilk div bloğunda çalıştırılabilirken, ng-app yönergesinin tanımlanmadığı ikinci div bloğunda çalışmayacaktır.

Eğer ki AngularJS’yi tüm sayfada aktif kılmak istiyorsanız aşağıdaki gibi tüm sayfayı kapsayan html etiketinde ng-app yönergesini tanımlayabilirsiniz.
```
<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>
</body>
</html>
```
Bu şekilde sayfa içerisindeki tüm alanda AngularJS çalışacağından dolayı kullanabilirsiniz.
ng-init
ng-init yönergesi; bir element üzerinden değişken, sınıf, dizi vs. tanımlamamızı sağlayan bir direktiftir.
Değişken Oluşturma
```
<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body> 
<div ng-init="x">
</div>
</body>
</html>
```
Burada “x” adında bir değişken tanımlanmıştır. Tanımlanan bu değişkene tanımlama aşamasında bir varsayılan değer atanmamıştır. Eğer atamak istiyorsak bunu “=(assign)” operatörüyle aşağıdaki gibi gerçekleştirebiliriz.
```
<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>   
<div ng-init="x=3">
</div>
</body>
</html>
```
Birden fazla değişkeni de aşağıdaki gibi “;” operatörüyle ayırarak gerçekleştirebiliriz.
```
<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>  
<div ng-init="x=3; y='y'; z=true">
</div>
</body>
</html>
```
Sınıf Oluşturma
```
<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>
<div ng-init="Sinif={x,y,z}">
</div>
</body>
</html>
```
Burada “Sinif” isminde bir sınıf oluşturulmuştur ve “=” operatörüyle “{}” scopelar eşliğinde içerisine “x”, “y” ve “z” isimlerinde propertyler yerleştirilmiştir. Burada dikkat edilmesi gereken husus propertyler “,(virgül)” ile ayrılmaktadırlar. Ayrıca bu kullanımda propertylere oluşturulma anında bir varsayılan değer atanmamıştır.

Eğer ki sınıf içerisindeki propertylere varsayılan değerlerini vermek istiyorsak aşağıdaki gibi “:” operatörüyle bu işlemi gerçekleştirebiliriz.
```
<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>    
<div ng-init="Sinif={x:5,y:'Ahmet',z:true}">
</div>
</body>
</html>
```
Görüldüğü üzere “Sinif” isimli sınıfın propertylerine ilk değerleri bu şekilde atanmış bulunmaktadır.

Dizi Oluşturma
```
<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>
    <div ng-init="Araba=['Opel', 'Mercedes', 'BMW']">
    </div>
</body>
</html>
```
Yukarıdaki kod bloğunu incelerseniz eğer “Araba” isminde bir dizi oluşturulmuştur. Burada dikkat etmeniz gereken nokta ifadeyi “Araba={}” şeklinde kullansaydık bu bir sınıf olacaktı. Lakin “Araba=[]” şeklinde bir syntax bir dizi yapısını ifade etmektedir. Dizinin içerisine “,” ile elemanları belirtmekteyiz.

Ayriyetten bir referans tipli dizi oluşturmak istiyorsak eğer aşağıdaki gibi bir tanımlama yapabiliriz.
```
<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>
    <div ng-init="Araba=[{a:1, b:2, c:3}, {a:4, b:5, c:6}, {a:7, b:8, c:9}]">
    </div>
</body>
</html>
```
Birden Fazla Yapıyı Oluşturma
Aynı anda hem değişken hem sınıf ve hemde dizi gibi yapıları oluşturmak istiyorsak bu yapılar arasında “;” operatörünü koymamız yeterlidir.
```
<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>
    <div ng-init="x='x'; y={a:5}; z=['Merhaba','Dünya']">
    </div>
</body>
</html>
```
Görüldüğü üzere “x” adında bir değişken, “y” adında bir sınıf ve “z” adında bir dizi oluşturulmuştur.
ng-model
ng-model yönergesi; adı üzerinde herhangi bir etkileşimli html etiketinde(<input>) ilgili içeriği elde etmek için model tanımlamamızı sağlayan direktiftir.
```
<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>
    <input type="text" ng-model="Model" />
</body>
</html>
```
Yukarıdaki kod bloğunu incelerseniz eğer texte girilen değeri “Model” isminde tanımlanan modelle elde edebilmekteyiz.
```
<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>
    <div ng-init="Insan={Adi, SoyAdi}">
        Adı : <input type="text" ng-model="Insan.Adi" /><br />
        Soyadı : <input type="text" ng-model="Insan.SoyAdi" />
    </div>
</body>
</html>
```
Burada ise “Insan” adında tanımlanan sınıfın propertylerine input textlerdeki değerler ng-model ile bağlanmıştır. İçeriğimizin ilk satırlarında adresini vermiş olduğum bir önceki makalede Two Way Data Binding(İki Yönlü Veri Bağlama) olayını burada görmekteyiz. Burada modelin değerleri değiştiğinde viewde, viewdeki değer değiştiğinde modelde bir yansıma oluşmaktadır.
ng-bind
ng-bind yönergesi; önceden tanımlanan modeli bind eden bir direktiftir.
```
<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>
    <input type="text" ng-model="Deger" />
    <div ng-bind="Deger">
    </div>
</body>
</html>
```
Inputun değerini okumak için tanımlanan “Deger” ismindeki model div etiketine bind edilmiştir. Modeldeki her türlü değer değişikliği bu bind sayesinde ve Two Way Data Binding(İki Yönlü Veri Bağlama) prensibi sonucu div etiketine yansıtılacaktır.

Bind işlevini bir sınıf ile aşağıdaki gibi kullanabiliriz.
```
<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>
    <div ng-init="Insan={Adi, SoyAdi}">
        Adı = <input type="text" ng-model="Insan.Adi" /><br />
        Soyadı = <input type="text" ng-model="Insan.SoyAdi" /><br />
        <span ng-bind="Insan.Adi"></span>&nbsp;<span ng-bind="Insan.SoyAdi"></span>
    </div>
</body>
</html>
```
Birden fazla modeli tek bir seferde bind etmek istiyorsak yukarıdaki çalışmayı aşağıdaki gibi de inşa edebiliriz.
```
<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>
    <div ng-init="Insan={Adi, SoyAdi}">
        Adı = <input type="text" ng-model="Insan.Adi" /><br />
        Soyadı = <input type="text" ng-model="Insan.SoyAdi" /><br />
        <span ng-bind="Insan.Adi + ' ' + Insan.SoyAdi"></span>
    </div>
</body>
</html>
```

{{}} İfadesi
{{}} ifadesi, AngularJS expressions tanımlama bloğudur. Bir nevi scope görevi görmektedir.

İki değişkenin değerini aşağıdaki gibi istenilen yere yazdırabiliriz.

<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>
    <div ng-init="Adi='Gençay'; SoyAdi='Yıldız'">
        {{Adi + ' ' + SoyAdi}}
    </div>
</body>
</html>

Ya da bir nesnenin property değerlerini.

<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>
    <div ng-init="Insan={Adi:'Gençay', SoyAdi:'Yıldız'}">
        {{Insan.Adi + ' ' + Insan.SoyAdi}}
    </div>
</body>
</html>

Gördüğünüz gibi istediğimiz alana istediğimiz müdahaleyi {{}} ifadesi sayesinde yapmaktayız.

<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>
    <input type="text" ng-model="veri" />
    {{Deger}}
</body>
</html>

Burada da texte girilen değeri elde eden “veri” isimli modelin değerini yazdırmaktayız.

Görüldüğü üzere AngularJS’nin bu beş direktifi oldukça etkili bir kullanımla birlikte esnek yaklaşım sergilememizi sağlamaktadır. Bundan böyle, bu alt yapıda AngularJS çalışmalarını ele alacak ve hızlı bir şekilde yükselişe geçeceğiz 🙂

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…