~Seslik~
Sessizliğe seslen..

Lisans eğitimimin ikinci senesi de bitti. Artık mesleğimle ilgili bir şeyler yapabiliyor olmalıyım diye düşünüyorum ve kendimi biraz geliştirmek için de sene başından beri Uzem Akademi Yaz Kampına katılmayı düşünüyordum. Bu sene bu kamp’a sınavla değil de bir proje fikriyle kabul ediyorlardı. Böylece, ekip arkadaşlarımla birlikte “Seslik” isimli projemiz üzerinde çalışmaktayız. İlk adımımız kendimizi belirli konularda geliştirmektir. İlk konumuz da AngularJS’tir…

AngularJS istemci taraflı JavaScript ve MV*(Model View Whatever) mimari design pattern’i kullanarak geliştirilmiş bir framework’üdür. AngularJS, tasarımda kullanılan gelişmiş mühendislik sayesinde, kompleks uygulamaları çok az kod satırıyla geliştirmeyi sağlar.

AngularJS’ın çalışması için oluşturduğumuz bilmemne.html sayfamıza AngularJS kütüphanesi eklenir. Bir AngularJS uygulaması olabilmesi için ise en az bşr tane ng-app attribute‘una gerek var:

<!DOCTYPE html>
<html ng-app> <!-- tüm sayfanın AngularJS uygulaması olduğunu belirtmektedir -->
  <head>
    <title>Başlık</title>
  </head>
  <body>
    <p>Bu bir AngularJS uygulamasıdır..!</p>
  </body>
</html>

AngularJS’in kütüphanesiyle berbarer gelen directive‘ler mevcuttur. Onlar ng-prefix (ön eki) kullanır. Örneğin, ng-model, ng-app vs. Directive‘leri bulduktan sonra onları yugulamamıza bind etmemiz gerekmektedir. Uygulama boot ediliyor ve gösteriliyor. Ve Digest cycle kullanıcı etkileşimi dinlemeye başlıyor.

Digest Cycle uygulamamızın view katmanını yani kullanıcının gördüğü ekrandaki verileri güncel tutmakla görevli yapıdır. View‘nun otomatik güncellenmesini herhangi bir ekstra listener eklemeden sağlamaktadır. AngularJS, template olarak HTML kullanır, kendi dili ile ekstra etiketler ekleyerek HTML olarak extend eder.

AngularJS’in bir diğer dikkat çeken özelliklerinden biri Two way binding‘dir. Kısaca, model kısmındaki data‘nın değişmesinin view kısmında, view kısmındaki data değişiminin model kısmında senkron bir şekilde değişimini sağlamaktadır. Böylece, hem view hem model iki taraflı olarak birbiri ile senkron olarak güncel kalıyor.

AngularJS’in basit HTML etiketleri kullanmasının avantajı HTML kodlayanın, AngularJS tarafı ile ilgilenmeden gelen data‘ları kolayca bağlayabiliyor olmasıdır. Böyle bir yapıya ulaşmasını sağlayan parçalara göz atalım.

  • Model: Kullanıcıya gösterilecek *data*'yı gösteren kısımdır.</li>
  • View: Kullanıcının gördüğü kısımdır. Temel *HTML* etiketleri ile birlikte AngularJS *directive*'lerinin model katmanı ile bağlanması ile oluşan yapıdır. AngularJS'in *template* yapısını bu katmana katıyoruz.
  • Controller: Bu katman, modelden aldığı *data*'lar ile birlikte uygulamayı kontrol eden bir logic oluşturur. Modelden alınan *data*'ların *view*'e bağlanmasını yönetir.
  • Scope: *Data* modellerini ve fonksiyonlarını içeren kısımdır. Genel olarak *controller* kısmında scope nesneleri ve fonksiyonlerı set edilir.
  • Directives: *HTML*'e yeni özellikler kazandırma görevini halleden kısımdır.
  • Expressins: ile ifade edilirler. *Scope*'tan gelen *data* ve fonksiyonların bağlanması ile oluşturulur.
  • Template Temel *HTML* etiketleri, *directive*'leri ve *expressin*'ları içeren kısımdır.

    • Kaynak: "AngularJS ile web ve mobil uygulama geliştirme" kitabı. (Mehmet Canker)