İlk önce AngularJS nedir biraz ondan bahsedeyim ve ardından giriş uygulamamızı yapalım. En basit anlmıyla MVC mimarisini kullanan bir javascript uyarlaması olarak düşünebiliriz.Bu sayede kodlarımız daha düzenli, daha anlaşılır, daha kolay yazılabilen, daha kolay bakımı yapılabilen, daha performanslı çalısan bir hale gelmiş oluyor. Ayrıca google mühendislerinide tebrik etmek gerekiyor, gayet başarılı bir iş çıkarmışlar ve doğal dile çok yakın bir programlama dili yapmayı başarmışlar.
Öncelikle AngularJs i hızlı bir şekilde öğrenebilmek için Javascript bilginiz olsa hiç fena olmaz aslında. Ama direk Angulardan başlamakta güzel bir tercih olabilir. İlk olarak "www.plnkr.co" dan bahsederek başlayalım. Burası bize html, css, java script kodlarımızı derleyip çalıştırabileceğimiz online bir ortam sunmakta. Buradaki html sayfamız bizim dış dünyaya açılan görüntümüzü temsil edecek. Css kodları sayfamızın diyanını daha iyi yapabilmek adına html ile birlikte etkileşimli çalışacak olan kodlar. Javascript kodlarımız ise fonksiyonlarımızı yazacağımız yani client taraflı işlemlerin yapılacağı yer olacak.
AngularJs yi kullanabilmemizin ilk koşulu angular.js kütüphanesini html sayfamıza referans olarak eklemek. Ekleme işlemi başarılı ise anında html sayfamızın içinde bir script tag' ı oluşacak ve burada angular referans edilecek. Artık angular yazmaya başlayabiliriz :)
Bir sonrakş yazımda MVC deseninden (pattern) daha detaylı bahsedeceğim fakat şimdi kısaca giriş yapalım.
M: Model > temel olarak class larımızı temsil eder
V: View > dış dünya ile iletişim kuracağımız yapı. Şu anda bizim index.html sayfamızı bir view olarak düşünebiliriz.
C: Controller > modelimizdeki soyut veriyi somutlaştırarak model ile view arasında bağlantı kurduğumuz yapı.
Şimdi ekrana Hello World yazdıralım.
1) js sayfamızda controller ları içersine alan "MainModule" adında bir modül oluşturalım. Modül kavramını, namaspace kavramına benzetmek mümkün.
var module1 = angular.module("MainModule",[]);Köşeli parantezlerin anlamı: bir modül içerisinde bir çok controller olabilir.
2) Bu modül içinde yer alacak bir controller tanımlayalım ve bu controller içerisinde bir model tanımlayalım.
module1.controller("MainController", function($scope){$scope.xxx : $scope' dan sonra yazılan ifade bir class, bir değişken, bir object , bir attribute vb. şeyler olabilir.
$scope.message = "Hello World !!!";
});
Şu anda içerisine birçok controller alabilen bir modül tanımladık. Sonra bu modül içerisine bir controller tanımlayarak yerleştirdik. Sonrada Bu controller içerisinde bir değişken tanımlayarak içerisine string bir değer atadık.
3) Sıra bu yapılan şeyleri View tarafında kullanmaya geldi.
View' da body tagları arasına gelerek kullnacağımız namespace' in adını ng-app="xxx" diyerek veriyorun. Ve akabinden ng-controller="xxx" diyerek modüldeki hangi controller' ı kullanacağımızı belirtiyoruz. Artık bu <body> ... </body> tagları arasında belirttiğimiz controller ' ın herşeyine erişe bilme imkanına sahip oluyoruz.
{{message}} diyerek, "message" adındaki angular modelini view a bind etmiş oluyoruz.
AngularJS ' e giriş için güzel bir yazı olduğunu umuyorum, bu işe girmek istiyenlere yararım dokunduysa ne mutlu bana. Bir sonraki yazıda görüşmek üzere arkadaşlar :)
