-

Angular JS’e Giriş – İlk Uygulama

Uzun zamandır Angular Js öğreneyim deyip erteliyordum artık zamanı geldi diyerek çalışmaya başladım. Angular Js 2 çıktı, hem de 1 ile tamamen farklı imiş ama ben biraz geriden gelerek 1 için çalışmaya başladım :) .  Benim gibi yeni başlayan arkadaşlar faydalansın diye öğrendikçe paylaşımlarda bulunmayı planlıyorum. Bu yazımda Angular Js ile ilgili ilk yazımda genel olarak Angular Js konseptlerinden bahsettikten sonra basit bir uygulama ile olayını anlatmaya çalıştım.

AngularJs 2009 yılında Google çalışanı olan Misko Hevery tarafından yazılmış açık kaynak kodlu web uygulamaları geliştirmemizi sağlayan bir data binding (veriyi bağlayan şeklide çevrilebilir) frameworküdür.

Angular Js ile geliştirilen birçok website bulunmaktadır, website örneklerine madewithangular.com dan bakabilirsiniz.

Angular Js Single page applicaitons yani tek sayfalı uygulamalarda kullanılır. Tek sayfa üzerinde sayfayı refresh etmeden aksiyon alınmasını sağlar. Yapılan değişiklik sayfayı yenilemeye ihtayaç olmadan direk yansımaktadır.

Angular Js Temelini MVC (Model-View-Controller) konseptinden alır.

Model dediğimiz data, view data nın grafiksel gösterimi ya da html, controller ise modeli değiştiren javascript fonksiyonlardır, şeklinde açıklayabiliriz. Aşağıdaki görselde aralarındaki ilişki özetlenmiştir. Angular Js’in data binding framework olduğunu söylemiştim, aslında model ile kullanıcı arayüzünü bağlar, bunlar arasında controller aracılığı ile iletişim kurulur.

MVC-basic.svg

Günümüzde kullanılan farklı data binding frameworkleri bulunur bunlardan bazıları aşağıdaki gibidir;

Angular Js sağlamış olduğu faydalardan biri de dependency injection‘dır. Ayrıca Angular Js ile yazılan uygulamaları test etmek çok kolaydır, unit testi yazılabilir, ya da test driven development metodolojisi kullanılarak Angular Js yazılabilir. İlerleyen yazılarımda dependency injection ve test konusunda daha fazla detaya yer vermeyi planlıyorum.

Angular Js ile İlk Uygulama

Angular Js den genel olarak bahsettikten sonra angular ile ilk uygulayı yazmaya başlayalım. Klasik olarak yeni bir dile/teknolojiye başlandığında yapılan şey “hello world” yazdırmak olur, ben de bu adeti devam ettirerek  hello world yazdırmaktan başlayayım :)

Göstereceğim örneklerde online kod editör’ü olan codepen kullanıyor olacağım, yazılan kodları kaydedip github ile bağlayabiliyorsunuz, Angular Js’e başlayınca kullanmaya başladım, tavsiye ederim. İstenirse brackets İndirilerek code editör olarak kullanılabilir. Visual Studio ya da Visual Studio Code kullanarak da kodlama yapabilirsiniz. Angular Js projesi için Visual Studio ile nasıl proje oluşturulabileceğine dair bir blog yazısı yazmak planlarım arasında yer alıyor.

Yazacağımız uygulamanın Angular Js uygulaması olduğunu belirtmek için np-app direktifi eklememiz gerekir, np-app= isim de verilebilir ama ilk örnekte default modül olarak kullanmış olacağız. Module dediğimiz uygulamanın Main() fonksiyonu gibidir.  Ayrıca Angular Js framworkünü kullanabilmek için cdn (content distribution network) eklemeliyiz, Angular Js in yayınlamış istediğimiz bir versiyonunu kullanabiliyoruz. AngularJs in sitesinden “Download AngularJS” diyerek cdn kopyalayıp projemize ekleyebiliriz ya da https://cdnjs.com/ dan istediğimiz versiyon için linkini alabiliriz.

src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js”>
ang

body içerisine bir input elementi ekliyoruz ve bu elemente girilen datanın model adını name veriyoruz,  ng-model=”name”, çift süslü parantez içerisine, {{ }}, yazılan kodlar Angular Js olarak çalıştırılır,  textbox içine yazılan name değeri Hello “name” şeklinde kullanıcıya gösterilmiş oluruz. ng-model direktifi two-way data binding, çift yönlü veri bağlılığını sağlar, bu demek oluyor ki model değiştiğinde view değişir, view değiştiğinde model değişmiş olur. Ayrıca ng-model=”name” diye yazıldığında name ismindeki model daha önce tanımlanmamış olmasına karşın bu şekilde kullanılarak yaratılabilir ve ihtiyaç durumunda kullanılır. Aşağıdaki örnekte olduğu gibi input element içerisine yazılan isim bi alt satırdaki Hello’nun yanında gösterilmiş olur. Ek olarak ng-model direktifi input, select, textarea gibi html elementlerinde kullanılabilir.

ang

Örneğin kodlarına aşağıdaki codepen linkinden bakabilirsiniz.

http://codepen.io/deryagunduzozmen/pen/gmrQrg

Kaynaklar:

  1. https://github.com/curran/screencasts/tree/gh-pages/introToAngular
  2. https://angularjs.org/
  3. http://www.erbilen.net/angularjs-notlarim-1/
  4. https://www.youtube.com/playlist?list=PL6n9fhu94yhWKHkcL7RJmmXyxkuFB3KSl
  5. https://www.youtube.com/watch?v=ejBkOjEG6F0#t=34.112198
  6. http://csharp-video-tutorials.blogspot.com.tr/2015/11/angularjs-tutorial-for-beginners.html