AngularJS Google tarafından desteklenen bir Javascript MVC(MV* yada MVW olarakda geçer) frameworkudur.MVC yapısı kodların daha kolay okunabilir ve geliştirilebilir olmasına olanak sağlar.AngularJS sayesinde SPA(Single Page Application) uygulamalar geliştirilebilir.Peki nedir bu SPA dediğimiz olay ?
WEB SİTESİNDEN WEB UYGULAMASINA
Geleneksel web sitelerinde kullanıcı siteye giriş yaptığında URL ile bir istek gönderir ve web sunucusu bu isteğe karşılık olarak web sayfasını ve kullanılan tüm kütüphaneleri döndürür.Kullanıcı farklı bir URL ile istek gönderdiğinde tekrardan aynı işlem gerçekleştirilir.Bu işlem baktığınızda çok büyük bir yük olarak görülmekte.Gelişen teknolojiyle birlikte bir uygulama geliştirildiğinde artık olay sadece web sitesinden ibaret olmuyor.Mobil uygulamalar,masaüstü uygulamalar,web uygulaması derken çok ağır bir yükün altına girilmiş oluyor.Tüm uygulamaları ortak bir çatı altında toplamak gerekiyor.Burada karşımıza API’lar çıkıyor.API’lara biz sadece ihtiyacımız olan istekleri göndererek ihtiyacımız olan datayı alıyoruz ve bunları göstermiş oluyoruz.Bu sayede hem mobilde hemde webde geliştirilen API kullanmış oluyoruz.Web sitesinin çalışma mantığından bahsettikten sonra SPA çalışma mantığına bakalım.Kullanıcı yine bir URL gönderir geriye web sayfası ve var olan kütüphaneler web sunucusundan gönderilir.Fakat kullanıcı yeni bir URL isteiği gönderdiğinde bu sefer sadece gerekli olan datalar web sunucusundan gönderilir ve alınan datalar view sayesinde ekrana basılır.Başlangıçtaki istekte tüm viewlar yüklendiğinden artık ikinci bir istekte sayfa oldukça hızlı yüklenecek ve ağır bir yükün altından kalkılmış olacak.
AngularJS’de Neler Oluyor ?
Yavaştan AngularJS’in içerisine girmeye başlayalım.İçerde neler dönüyor onlardan kısa kısa bahsedelim
Two-way Data Binding : Klasik data binding template sistemlerinin aksine değişiklikler model-view arasında çift yönlü olarak gerçekleştirilir.Yani modelden viewe ya da viewden modele veri aktarımı gerçekleştirilebilir.
Directives : DOM nesnelerine istenilen davranışları eklemeyi sağlar.Genellikle ng ile başlarlar.Kendimiz directive oluşturabildiğimiz gibi AngularJS custom directiveleride vardır.Bunlardan bazıları
- ng-app
- ng-controller
- ng-repeat
- ng-click
- ng-show
- ng-hide
- …
Tüm AngularJS Directivelerine buradan ulaşabilirsiniz
Services : Uygulama genelinde kullanılan nesnelerin erişiminin mümkün kılınabilmesi için kullanılırlar.
Routing : URL isteklerine göre templete render edilmesini sağlayan yapılardır.
Factory : $scope nesnesinindeki verilerin controllers dışına alınması ve tüm sayfalarda etkin kullanılmasını sağlar.
$scope’da ne ola ki ?
Model,view,controller arasında bağ kuran adındanda anlaşıldığı gibi bir kapsamdır.Tüm nesneler birbirinden ayrı olmasına rağmen onları senkronizsyon içinde tutar.
Kurulum
Teorik bilgilerin ardından AngularJS kurulumunu yapıp ufak bir “Hello World” uygulaması yazalım.
Öncelikle sayfanıza AngularJS dahil etmeniz gerekiyor.Bunun için angularjs.org adresine giderek download butonuna bastığınızda angularjs indirebilir ve projenize dahil edereke kullanabilirsiniz.Ancak her seferinde bu işlemi yapmak zaman alıcı ve sıkıcı bir işlem olduğundan npm ve bower kullanarak indirme işlemini hızlıca yapabilirsiniz.Bunun için bilgisayarınızda nodejs yüklü olması gerekli.Npm ve bower konularına detaylı girmeyeceğim isterseniz npm ve nodejs konusunda buradaki yazıdan, bower konusuna ise buradaki yazıdan ulaşabilirsiniz
Önce npm yardımıyla bower kuruyoruz.Burada -g ibaresine dikkat.Bower global olarak kuruyoruz ki başka projelerdede bower kullanabilelim
Daha sonra proje dizinine gelerek angularjs kuruyoruz
Proje dosyasına baktığımızda bower_components klasörünün içinde angular klasöründe angularjs kurulmuş olduğunu göreceksiniz.
Şimdide uygulamamızı yazmaya başlayalım.Proje dosyasının ana dizinine bir index.html oluşturalım.Daha sonra içerisine angular.js dosyasını dahil edelim
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html lang="en"> <head> <script src="bower_components/angular/angular.min.js"></script> </head> <body> </body> </html> |
Daha sonra angularjs projesini başlatmak içinkodlarına ng-app yazalım ve çalışıp çalışmadığını denemek için içerine bir expression yazalım.Yeri gelmişken söyleyeyim angularjs kodlarını çalıştırmak için kodları çift süslü parantez içerisinde yazıyoruz.
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html lang="en" ng-app> <head> <script src="bower_components/angular/angular.min.js"></script> </head> <body> {{4*2}} </body> </html> |
Uygulamayı çalıştırdığımızda ekran 8 çıktısını alıyorsak şu ana kadar sorunsuz ilerliyoruz demektir.
Herşey sorunsuz ilerlediğine göre artık bir model oluşturup modelden aldığımız veriyi ekrana bastırabiliriz.
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="en"> <head> <script src="bower_components/angular/angular.min.js"></script> </head> <body> <input type="text" ng-model="isim" /> Merhaba {{isim}} </body> </html> |
inputa girdiğiniz değerler anında {{isim}} yazdığınız yerde görüntülenmektedir.İşte bu kadar kolay.
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”eNqMwz” default_tab=”result” user=”ekose26″]See the Pen eNqMwz by Emre Köse (@ekose26) on CodePen.[/codepen_embed]