AngularJS Nedir? Nasıl Kullanılır?

Genel giriş yapmadan önce neden bu konuyu seçtiğime değineyim. Angular konusu hakkında Türkçe kaynak bulmak oldukça zor ve Türkçe kaynaklarda Angular ı yabancı dilde anlatıyorlar. Ben elden geldiğince bu dili size anlaşılabilecek tarzda anlatmayı planlıyorum.

AngularJS’i öğrenmeye hevesliyseniz, yeni ve değişik bir dili öğrenmeye başlayacaksınız demektir. Angular’ı öğrenirken buna ek olan diğer şeyleri de ilerledikçe öğreneceğiz. Bu bir konu değil, konu dizisi olacaktır. Umarım hepimiz sıkılmadan bu dili öğrenebiliriz.

AngularJS Nedir? Biraz kitabi bilgi…

Angular MVC yapısına dayanır demiştik. Şimdi bu MVC yi açalım;

Modal, View, Controller

Bu 3 yapı birbiri arasında haberleşerek bize istediğimizi verir ve Angular bu işi en kolay yoldan yapar.

Modal

Verilerin tutulduğu nesnelerdir. İlişkili olduğu View nesnesini tetikler. Ayni Modal bir modeldir. Yapının nasıl çalışacağını burda belirlersiniz ve modal’ı çalıştırarak almak istediğiniz sonucu ekrana bastırırsınız (View’i tetikleme budur)

View

Sitemizin veya App’imizin (Programcık denebilir) görünümün (template) tutulduğu nesnelerdir.

Controller

Modal ve View nesnelerinin bağlandığı nesneye verilen isimdir. Aslında ismi üzerinde kontrol edicidir. İşlem ve kontroller burada yapılır.

AngularJS çalışmak için jQuery gibi kütüphanelere ihtiyaç duymaz. Tek sayfa uygulamaları geliştirmeye olanak sağlar. Bu lafa takılan web tasarımcıları olabiliyor. Benim sitem tek sayfa uygulaması değil diyorlar. Angular sadece tek sayfa uygulama yazmak için oluşturulmamıştır ama bunuda başarabilir. En önemli farkı Çift yönlü olmasıdır.Yani veride gerçekleşen değişiklik görünüme etki ederken, görünümde gerçekleşen bir değişiklik veriye etki eder. Buna Two way Binding denir.

two-way-db

Angular JS ile HTML etiketlerini geliştirerek kendi etiketlerinizi de oluşturabilirsiniz. Bunu Directive özelliğini kullanarak yapabilirsiniz. Bu kodların kısalmasına ve kod karmaşasının azalmasına yarar.

AngularJS Nelerden Oluşur?

Angular ile ilgilenmek istiyorsanız, Core yani kökü diyebileceğimiz bir dosyası vardır. Bunu AngularJS’in resmi sitesi https://angularjs.org indirebilirsiniz.

Angular tek bir yapı olarak değil ayrı ayrı modüller olarak şekillendirilmiştir.

Bu bileşenler Direktifler (directives), hizmetler (services), sağlayıcılar (providers), Tipler (types), genel apiler olarak ayrılmışlardır.

Angular Kütüphaneleri

ng : angularJS nin temel modüllerini içerir. Bir angularJS uygulaması başlatıldığında bu modül varsayılan olarak yüklenir.

ngRoute : Uygulamada url yönetimi yapılmasını sağlamak için kullanılır. (angular-route.js)

ngAnimate: Uygulamada 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)

Şimdi en basit anlamda bir AngularJS uygulaması yapalım.

Yukarıdaki örneği incelerseniz hiç JS kodu kullanmadan çalışan bir AngularJS App i oluşturduğumuzu görürsünüz. Bu Two Way Binding örneği olarakta görülebilir.

İlk örneğimizi oluşturduk ve Angular’ın kapısını aralardık. Bundan sonraki konularda daha da işe yarayan bilgilerle görüşmek dileğiyle.

 

DAHA FAZLA İÇERİK

Vimeo Nedir? Vimeo Nedir?

23 Aralık 2014, Salı

WordPress Super Popup Eklentisi WordPress Super Popup Eklentisi

22 Aralık 2014, Pazartesi

Css Z-index nedir? Nasıl kullanılır? Css Z-index nedir? Nasıl kullanılır?

24 Aralık 2015, Perşembe

SİZDE YORUM YAPIN