AngularJS’de Temel Yapılar Nelerdir?

AngularJS’yi kullanmak istediğimizde mevcut sayfaya aşağıda örnekte olduğu gibi kaynak dosyayı head tagleri arasına entegre etmemiz gerekmektedir.

 

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

AngularJS genel olarak aşağıdaki direktiflerden oluşmaktadır. Bu direktifler div veya span tagleri arasında kullanılabilmektedir. Direktifler AngularJS için temel teşkil edecektir. Bu beş direktif;

1- 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. Örnek Kod ise

 

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body> 
<div ng-app="">
        <!-- Burada AngularJS kullanılabilir. -->
</div>
<div>
        <!-- Burada AngularJS kullanılamaz. -->
</div>
</body>
</html>

ng-app ayrıca head tagı öncesinde de kullanılabilir. Bu türlü kullanımda tüm sayfada kullanılacağını göstermiş oluruz Örneğin :

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

2-ng-init
ng-init yönergesi; bir element üzerinden değişken, sınıf, dizi vs. tanımlamamızı sağlayan bir direktiftir.

<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body> 
<div ng-init="k">
</div>
</body>
</html>

 

Burada “k” 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="k=3">
</div>
</body>
</html>

Sınıf (Class) Oluşturmak İçin

<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>
<div ng-init="Sinif={a,b,c}">
</div>
</body>
</html>

Burada “Sinif” isminde bir sınıf oluşturulmuştur ve “=” operatörüyle “{}” scopelar eşliğinde içerisine “a”, “b” ve “c” isimlerinde propertyler yerleştirilmiştir. Burada dikkat edilmesi gereken husus propertyler “,(virgül)” ile ayrılmalıdır. 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.Örneğin :

<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>    
<div ng-init="Sinif={a:5,b:'Kaan',c:true}">
</div>
</body>
</html>

Dizi Oluşturmak İçin

Aşağıdaki kod bloğunu incelerseniz eğer “Sehir” isminde bir dizi oluşturulmuştur. Burada dikkat etmeniz gereken nokta ifadeyi “Sehir={}” şeklinde kullansaydık bu bir sınıf olacaktı. Lakin “Sehir=[]” şeklinde bir syntax bir dizi yapısını ifade etmektedir. Dizinin içerisine “,” ile elemanları belirtmekteyiz.

<!DOCTYPE html>
<html ng-app="">
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body>
    <div ng-init="Sehir=['Istanbul', 'Ankara', 'Izmir']">
    </div>
</body>
</html>