AngularJS nedir?
AngularJS Web tarayıcısı üzerinde çalışan bir javascript kütüphanesidir. Kimilerine göre MVC, kimilerine göre MVVM denilmektedir. Angular tarafında ise MVW (Model View Whatever ) ifadesi kullanılıyor. Model View Whatever(Her Neyse) şeklinde yorumlamak mümkün.
MVC ve MVVM ne olduğunu bilmiyorsanız wikipedia üzerinde biraz inceleme yapabilirsiniz.
Kim Geliştirmiştir?
Google tarafından geliştirilmiş açık kaynak bir projedir. AngularJS tek sayfa uygulamaları geliştirmek için kullanılan en iyi frameworklerden biridir. Bir çok popüler web yazılımı angularJS kullanmaktadır.
AngularJS kullanmanın faydaları neler olabilir?
1. Dependency Injection : Bağımlılık enjeksiyonu AngularJS tarafından bağımlılıkların yönetimi çok rahat bir şekilde gerçekleştirilmektedir. İlerleyen makalelerde bu konu anlatılacaktır.
2. Two Way Data-Binding : İki Yönlü Veri Bağlama AngularJS’nin güçlü özelliklerinden biridir. İki Yönlü veri bağlama, modelin view ile senkronize olmasına olanak verir. Görünümdeki bir değişiklik modelinde değişmesine yada modeldeki bir değişikliğin görünümü de değiştirmesine olanak tanır.
(model:veri, view:görünüm isimlerini değiştirmedim webde sıklıkla bu şekilde karşılaşırsınız)
3. Test Etme : Bir çok yazılımcı Test Driven Development kavramını duymuştur. AngularJS uygulamalarınızı kolay bir şekilde test yazarak geliştirmek imkanı sunar. Angular sitesinde bu konuyla ilgili bolca örnek bulma şansınız var. Hazırlanan her örneğin bir tane de test dosyası hazırlanmıştır.
4. Model View Controller : AngularJS ile temiz MVC yapıları oluşturmak mümkündür. Yazının başında dediğim gibi MVW de olabilir. AngularJS içinde MVC işlemlerini gerçekleştirmek için özel bileşenlere sahiptir.
5. Çok daha fazlası: Maddeler halinde yazdıklarımdan çok daha fazlana sahiptir. Örn: DOM elemanlarına müdahale ile birçok etiketin davranışlarını kontrol etme imkânı sunmaktadır.
Peki Angular Geliştirmek İçin Neye İhtiyacımız Var?
Angular uygulaması geliştirmek için ihtiyacın olan sadece angular.js script dosyasıdır.
1. Script dosyasını indirip kullanabilirsin.
2. CDN üzerinden kullanabilirsiniz.
https://code.angularjs.org/ istedğinizi sürümün bağlantısını script olarak ekleyin.
Google CDN üzerinden: https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js
(Not: ben örnekleri Google CDN kullanarak yapacağım. Bu yüzden paylaştığım uygulamalar çalışmak için internete ihtiyaç duyacaktır.)
Angulara başlamak için;
1. İndirdiğin scripti yada CDN ile anguları sayfaya bağla.
2. ng-app niteliğini yükle
ng-app nedir?
Angularda , ng-app bir direktiftir. Bunun gibi bir çok direktif vardır. Bu direktiflerin listesine https://angularjs.org üzerinden ulaşabilirsin. ng angularda direktifler için bir önektir. Angular uygulamlarının başlangıç noktası da ng-app direktifidir. Yani angular kütüphanesi ilk kontrol noktası HTML içindeki ng-app direktifidir. Angular ng-app direktifini gördüğünde bu direktif arasındaki sayfayı angular için yorumlamaya başlar.
Bu yüzden ng-app direktifini sayfada <html> kökü içinde konulmalıdır. <body> etiketi içine koymak da mümkündür. Ancak daha alt etiketlere de eklenebilir. Unutulmaması gerek konu nereye yazılırsa onun altında bulunan etiketler angular tarafından etkilenecektir. Direktiflerin dışında kalanlar anguların parçası olmayacaktır. Aşağıdaki 1.örnekte tüm sayfa etkilenirken 2.örnekte sadece ng-app yazılan div etkilenecektir.
{{ifade}} :Çift süsülü parantezi bağlayıcı(binding) ifadeleri olarak kullanılmaktadır. Bu ifadelerin içindeki kodlar ve model verileri angular tarafından yorumlanıp çıktı ekrana yazıdırılır.
[divider]Örnek1: Örneğimizde ng-app direktifinin yerini ve binding nesnelerinin nasıl yazıldığına göz atabilirsiniz. Div etiketleri içinde bağlanan nesneler yorumlanıp sonuç angular tarafından üretilir.
Örnek2 :Bu örnekte ise ng-app direktifi sadece bir div etiketini kapsadığı için bulunduğu etiket üzerinde çalışacak diğer etiketi kapsamayacaktır. Bağlantı direktifi olarak yazılan ikinci div etiketi anguların parçası olmadığı için yorumlanmayacak ve ekrandaki gibi olacaktır.
AngularJS ile ilgili diğer yazıları da okumak istermisiniz.
bu konuda türkçe kaynak olması çok güzel. teşekkürler
[…] Konu 1: AngularJS Nedir? […]