AngularJs, Google'ın destek sağladığı javascript kütüphanesidir. Bu kütüphaneyi diğerlerinden ayıran özellik MVC (Modal View Controller) yani kontrollerin, görünümün ve verilerin ayrı tutulmasıdır.

Daha açıklayıcı olursak;

Modal: Veri tutulan nesnelerdir. View nesneleri ile ilişkilidir ve bunları tetikler.
View: Görünüm nesnelerinin tutulduğu alandır.
Controller: İşlemler ve kontroller burada yapılır. Modal ve View ile ilişkilidir.

Kod karmaşıklığına büyük ölçüde yarar sağlayan AngularJS , boyut olarak da 100Kb ' a yakındır. Resmi sitesi angularjs.org' dur. Directive tanımlamaları sayesinde html taglarını geliştirme olanağı sağlar. En büyük katkısı Jquery gibi kütüphanelerden bağımsız çalışmasıdır. Bir diğer önemli özelliği de çift taraflı çalışmasıdır. Buna örnek olarak görünümdeki değişikliği veriye , veride olan değişikliği ise görünüme aktardığını söyleyebiliriz.

Genel apiler :

Çeşitli bileşenleri bünyesinde modüller halinde barındırır. Bunlar;

  • Tipler (types),
  • Hizmetler (services),
  • Direktifler (directives),
  • Sağlayıcılar (providers).

Kütüphaneler :

  • ng: Temel modüllerini içerir. AngularJs uygulaması çalıştığında bu modül varsayılan olarak yüklenir.
  • ngRoute: Url yönetimi yapılmasını sağlamak için kullanılır. (angular-route.js)
  • ngAnimate: Animasyon özellikleri için kullanılır. (angular-animate.js)
  • ngResource: Rest api veri yönetimi için kullanılır. (angular-resource.js)
  • ngCookies: Cookie yönetimini sağlar. (angular-cookies.js)
  • ngTouch: Mobil tarayıcılar için geliştirilen uygulamalarda kullanılır. (angular-touch.js)
  • ngSanitize: HTML verilerini güvenli bir şekilde ayrıştırmak ve işlemek için kullanılır. (angular-sanitize.js)
  • ngMock: Test modülleri için kullanılır. (angular-mock.js)

Basit bir örnekle nasıl çalıştığını belirteceğiz. Burada inputa adınızı girdiğiniz zaman sonuç olarak "Merhaba Adınız" olarak sonuç döndürmesini sağlayacağız.

Body tagına ng-app ekledik. Bu attirbute ile angularjs çekirdeğine yorumlayacağı kısmı tanımlamış olduk. Html etiketinde tanımlayacağımız gibi angularJS nin çalışacağı kısmın elementine de tanımlayabiliriz.

Head tagı arasına AngularJS kütüphanesini çağırdık.

Body tagı arasında html tagları aracılığı ile ara yüzü oluşturarak input içerisine ng-model attiribute 'unu ekledik. Sonuç olarak döndüreceğimiz h1 tagına ng-model de belirttiğimiz id değerini ekledik.

Test sayfamızı taracımızda açtığımız zaman input değerine adınızı girin ve sonucu kendi gözlerinizle görün. Oldukça hızlı ve kullanışlı bu yeni kütüphane ile iyi şanslar.

Videoyu izleyerek Jquery ile arasındaki farkları daha iyi gözlemleyebilirsiniz.