Arama:
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>
AngularJS Nedir?

Günümüzde kullanılan web programlama teknolojilerinden biri olan ANGULAR yapısı Google tarafından JavaScript kullanılarak geliştirilmiş bir frameworktür. MVW altyapısında tasarlanmış bir mimaridir.

 

AngularJS’nin Avantajları Nelerdir?

  • Dependency Injection(Bağımlılık Enjeksiyonu)
    Aslında bir tasarım deseni olan ve hatta Dependency Inversion ile prensip haline(SOLİD) gelen Depedency Injection, programatik olarak bağımlılıkları minimize etmeyi ve yönetmeyi hedeflemektedir.AngularJS, bağımlılık enjeksiyonunu fıtratında barındırmakta ve rahatça bu işlemi gerçekleştirmektedir.
  • Two Way Data Binding(İki Yönlü Veri Bağlama)
    AngularJS’in en güçlü ve etkili özelliklerinden birisidir diyebiliriz. Model ve View arasında eşzamanlı bir etkileşim kurar. Modelde bir değişiklik olduğu an bunu Viewdeki ilgili alana yansıtır. Aynı şekilde tam tersi geçerli olduğunda yani viewde oluşan bir değişiklik anında model üzerinde de kendini gösterecektir.
  • Test Edilebilirlik
    AngularJS uygulamalara kolayca test yazmamızı sağlamaktadır.

AngularJS’yi Kullanabilmek İçin Ne Yapmak Gerekiyor?

Tabi ki de frameworkü elde edip projeye entegre etmeniz gerekmektedir. Bunun için https://angularjs.org/ adresinden ilgili frameworkü elde edip kullanabilirsiniz.

İşte gördüğünüz gibi AngularJS teoride bu çerçevede değerlendirilebilir bir kütüphanedir.