Angular.js’e Giriş

Javascript: Client Side’ın Yükselişi
Donanımların çok hızlı bir şekilde gelişmesi, akıllı telefon ve tablet kullanımlarının artması sonucunda artık client side’a verilen önem de aynı şekilde artmaya başladı, e tabii client side’a verilen önem artınca javascript’e verilen önem de artmış sayıldı. Eskiden bilgisayara, telefona acı çektiren client side operasyonları şimdi sinek ısırığı gibi gelmeye başladı. Artık client side bağımsızlığını ilan etti diyebiliriz.
Artık durum öyle bir hal alıyor ki server side client side’a data sağlasın geri kalan işleri client side kendi halletsine doğru hızlı adımlarla ilerliyoruz. Facebook, Gmail, Yahoo Mail, Twitter gibi single page application’ların hayatımızda oldukça fazla yer etmesi sonucu, internete giren kullanıcılar artık bu sitelere benzer siteler görmek istiyorlar. Kullanıcı ile daha çok etkileşimde olan, hızlı çalışan, sürekli sayfaların yenilenmediği siteler yapmak da artık bir seçim değil zorunluluk halini almaya başladı. Böyle yapılar hazırlamak için birkaç seçeneğimiz mevcut; javascript gurusu olup kendi kütüphanelerimizi, framework’lerimizi yazıp esnek bir yapı hazırlamak, JQuery gibi kütüphaneleri kullanarak bu tür sistemler hazırlamak veya sırf bu tür sistemler hazırlamak için yazılmış javascript framework’lerini kullanmak. Peki genelde neden bu tür framework’leri kullanmıyoruz? Bunun için oldukça geçerli sebeplerimiz var.
1-Öğrenmek için vakit harcamak lazım
2-Hali hazırda bildiğimiz JQuery ile işlerimizi halledebiliyoruz
3-Korkuyoruz.
Sanırım 3. şık en geçerli olanı. Çünkü projelerin hep bir deadline’ı olur ve buna uymamız gerekir. Bu deadline içerisinde bir aksilik çıksın istemeyiz, bir sorun olduğu zaman çok hakim olmadığımız bir framework ile başbaşa olmak istemeyiz.

Neden Bir Javascript Framework’u Kullanmalıyız?
Öğrenmesi hiç de sandığımız kadar zor değil, öğrenmek için öyle abartılacak süreler harcamamıza gerek yok ve korkacak bir şey yok. Evet deadline’lar yine var ancak proje sonuna kadar JQuery ile güzel bir yapı oturtmak için harcadığımız süre sanmıyorum ki kullandığımız framework’le yaşadığımız sorunları çözmekten kısa olsun. Ayrıca client side’da da test edilebilir kodlar yazmak (tabii test kodlarını da yazdığımızı varsayarak :) ) bize projenin ilerleyen safhalarında oldukça hız ve özgürlük kazandıracaktır.

Neden Angular.js?
Angular.js google destekli open-source bir javascript mvc framework’udur. Seçim yaparken Angular.js’i diğer mvc framework’lerinden ayıran özellikleri; tek başına ihtiyaçlarınızın neredeyse tamamını karşılıyor olması, rakiplerine göre öğrenmesinin oldukça kolay olması ve test edilebilir javascript kodları yazabilmemize olanak sağlaması oldu. Angular.js’i http://www.angularjs.org adresinden indirilebilir veya https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js cdn’inden direkt projenize ekleyebilirsiniz.

Başlamadan Önce
İlk önce Angular.js’e bir merhaba dedikten sonra Angular.js’in genel yapısına biraz değinip, son olarak da ufak bir uygulama yapıp bu angular.js’e giriş niteliğindeki yazıyı bitirmeyi düşünüyorum. Örnekleri yapmak için herhangi bir text editörü işinizi görecektir. Intellisense için ise WebStorm öneririm. 30 günlük ücretsiz deneme sürümünü http://www.jetbrains.com/webstorm/download/ adresinden indirebilirsiniz.

Angular.js’e Merhaba

https://gist.github.com/ozaydinb/7212134.js

Bu örneği bir browser ile açtığınız zaman karşınıza bir textbox çıkacak ver textbox’a girilen metin “Merhaba”dan sonra yer alıyor olacak. Peki bu nasıl gerçekleşiyor? ng-app ve ng-model gibi bazı attribute’ler dikkatinizi çekmiş olmalı, evet bu attribute’ler angular.js’in yorumladığı attribute’ler.
- ng-app: bu directive (daha sonra directive’lerin ne olduklarına değineceğiz) en basit anlamda Angular.js’in kapsama alanını belirler. Yani burada demek istediğimiz tag’leri arasına yazılmış tüm kodlar angular.js tarafından elden geçirilsin. Eğer ng-app’i herhangi bir div’e verirsek sadece ilgili div Angular.js tarafından yorumlanır.
- ng-model: bu directive scope’unuzda bir değişken tanımlanızı sağlar ve bu değişkenin binding’ini ilgili elementin value’usu veya text’i olarak ayarlar. Burada two way binding (Türkçeleştirmek gerekirse çift taraflı bağlama belki uygun olabilir) kurulur.
- {{isminiz}}: çift süslü parantezler arasına scope içerisinde tanımlanan değişkenleri kullanarak bunları ekranda gösterebilir veya çeşitli işlemlere sokabiliriz.

Yukarıda örneği yaparken dikkatimizi çekmiştir; hiç javascript kodu yazmadan işlerimizi gerçekleştirdik. Yukarıda yaptığımızı saf javascript ile veya JQuery ile yaptığımızı düşünürsek bu ufak örnekte bile işimizi ne kadar kolaylaştırdığını görebiliriz.

Nasıl Çalışır?
Sayfa yüklenip Angular.js devreye girdiği anda tüm html’imizi gezip tekrar düzenler ve html standardında olmayan directive, controller gibi mekanizmaları düzenleyerek tarayıcının anlayabileceği saf html koduna dönüştürür.
Angular.js’in mvc yapısında modeller javascript nesneleridir, view’lar html şablonları ve controller’lar ise iş yapan javascript function’larıdır.
Standartlardan şaşmayıp basit bir todo uygulaması yapıp biraz daha detaylarına bakalım; Yaptığımız uygulama ile kullanıcı bir yapılacaklar listesi hazırlayıp, bu liste içerisinde arama yapabilecek, herhangi bir kalemi yapıldı olarak işaretleyebilecek veya silebilecek. Bir todoController’ımız (Controller), todo nesnemiz (Model) ve todo’ları gösterebileceğimiz html’imiz (view) olacak.
İlk önce html’imize bir göz atalım ve bir önceki örneğe göre farklı olarak neler kullandığımıza bakalım;

https://gist.github.com/ozaydinb/7213361.js

Bir önceki örneğe göre burada karşımıza çıkan ng-controller, ng-click, ng-repeat ve ng-class directive’leri var. İlk önce bu directive’ler ne işe yarıyor onlara bir bakalım ve ardından controller’ımızı nasıl oluşturduğumuza bakalım;

ng-controller: İlgili element’in hangi controller ile yönetileceğini belirttiğimiz kısımdır. Bir html sayfasında birden fazla controller olabilir. Bu kontroller farklı farklı element’ler üzerinde işlem görebileceği için iç içe de controller kullanımı yapabiliriz.
Kısaca controller tanımlaması yaptığımız element tarafından kapsanan diğer elementler içerisinde kullandığımız değişkenler, fonksiyonlar ilgili controller tarafından karşılanır. Yukarıdaki örneğe bakarsak ng-model=”searchText” diye bir satırımız var, burada bir model tanımlaması yapılıyor aynı zamanda bu model’e todoController içerisinden $scope.searchText olarak da erişebiliriz, hatta controller üzerinden bu değişkenin değerini değiştirirsek bind olduğu element’in değeri de değişecektir.

ng-click: Adından da anlaşılacağı gibi ilgili element’e click event’i atamamızı sağlar. ng-click içerisine de hangi fonksiyonun çağrılacağını varsa parametrelerini buradan gönderebiliriz. Mesela örneğimizde todoText değişkeni parametre olarak gönderiliyor.

ng-repeat: Galiba en çok kullanılan Angular.js directive’i budur. Bir liste üzerinde dönüp işlem yapmamızı sağlar. C#’taki foreach benzeri bir syntax’ı vardır. Buradan anlıyoruz ki todoController todoList adında bir array içeriyor.

ng-class: Çok kullanılan Angular.js directive’lerinden birisi de budur. Yaptığı iş çok basitçe ilgili element’e class atamaktır ama bunu yaparken koşul koymamıza olanak veriyor. Örneğimizde de olduğu gibi eğer todo.isCompleted true ise todoCompleted class’ını ilgili element’e atamaktadır.
Şimdi Controller’ımıza bir göz atalım, controller’ımız oldukça basit bir şekilde iki tane fonksiyon ve bir de todoList array’ini barındırıyor.$scope parametresi dikkatinizi çekmiştir. Her controller’ın kendi scope’u vardır bu scope üzerinde işlemlerini gerçekleştirir. Yani bizim view’ımızda deleteTodo ya da addTodo diye çağırdığımız fonksiyonlar todoController’ın scope’u içerisinde aranıp çalıştırılıyor. Aynı şekilde ng-model ile view’da tanımladığımız değişkenlere de $scope.degiskenAdi şeklinde erişebiliriz.


Angular.js’e böylece ufak bir giriş yaptığımızı düşünüyorum. Eğer bir aksilik çıkmaz ise bundan sonraki Angular.js makalesinde yaptığımız todo uygulamasını biraz daha geliştirip işlemlerimizi server side’a nasıl gönderdiğimize ve verileri nasıl aldığımıza değinmeyi düşünüyorum.