Bu makalemizle, Angular ile (En-gû-lır diye okunur) ilk buluşmamızı gerçekleştirecek ve yazılım dünyasında büyük yankı uyandıran Google'ın bu Framework'ünün ne işe yaradığını yüzeysel olarak anlamaya çalışacağız. Ayrıca "MVC ne ki?" sorusuna da yanıt arayacağız.

Öncelikle yiğidi öldürelim ama hakkını yemeyelim, adamlar bu işi çok iyi becermişler. Ben bu makaleyi yazarken, benzer işi yapan toplam 35 ayrı kütüphane vardı (Ki hepsinin örneklerine www.todomvc.com adresinden ulaşabilirsin) ancak bunlardan hiçbiri, Angular kadar az kodla çok iş yapamıyordu. Yazılması gereken kodun kısalığı kadar basitliği, kolay öğrenilebilirliği ve genişletilebilirliği de işin ayrı bir boyutu.

Allah nasip ederse, bu sınıfta Angular'ın altını üstüne getireceğiz inşallah. Ancak şimdilik mini minnacık bir uygulama yaparak neden söz ettiğimizi bir görelim bakalım. Aşağıdaki içerikle bir HTML sayfası oluşturalım.






<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
</head>
<body>

<input type="text" ng-model="test" /><br>
Selam, {{test}}

</body>
</html>


Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Örneğimizde, üst kısmında bir metin kutusu görülüyor. Bu metin kutusuna yazdığımız metin ile alt satırda selamlama yapılıyor. Şimdi söyle bana. Hiç bu kadar kısa ve interaktif bir Hello World uygulaması görmüş müydün?

Kodumuzu biraz inceleyelim. Öncelikle Google CDN'den Angular'ın, ben bu makaleyi yazarken ki son versiyonu olan 1.2.12 versiyonunun kütüphane dosyasını sayfamıza ekledik.

Not : Angular kendi içerisinde JQuery'nin Light bir versiyonunu içerir. Bu sebeple sayfamıza ayrıca JQuery kütüphanesini eklememize gerek kalmaz. Ancak sayfamızda zaten JQuery ifadelerini kullanıyorsak ve bu kütüphane de sayfamıza ekliyse, bu durumda Angular yüklü olan asıl JQuery'i kullanır. Yalnız bunun için JQuery'i sayfaya Angular'dan önce eklemeyi unutmamak gerekir.


Sonrasında "<html>" tagı içerisine "ngg-app" şeklinde bir ifade ekledik. Bu, sayfanın bir Angular uygulaması olduğunu gösteriyor. Buna göre, sayfa içerisinde Angular için özel anlam ifade eden direktifler uygun şekilde işletilecektir ki bunlardan biri de "ng-model".

Dikkat edersen, sayfaya eklediğimiz metin kutusuna ng-model="test" şeklinde bir attribute ekledik. "ng-model", Angular'da çift yönlü binding için kullanılıyor. "Çift yönlü" kısmına birazdan tekrar dönüş yapacağız ancak özet olarak buradaki metin kutusunun içeriğini, "test" isimli bir değişken ile birbirine bağlıyor diyebiliriz. İkisinden birinin değeri değiştiği taktirde, Angular anında diğerinin de değerini değiştiriyor.

Hemen altta ise "{{test}}" ifadesini görüyoruz. Bu da, "test" değişkeninin değerini ekrana yazmamıza yarıyor. Toparlarsak, metin kutusunun içeriğini "test" değişkenine bağlıyoruz. Sonrasında da "test" değişkenini ekrana yazdırıyoruz. Sonuç olarak metin kutusunun içerisine ne yazarsak, hemen alttaki satıra da otomatik olarak yazdırılıyor. Burada herhangi bir Event Handler veya benzeri bir yapı kurmamıza gerek kalmıyor.

Buraya kadar güzel. Az önce "Çift yönlü Binding" dedik. Bunu da bir örnek üzerinde görelim. Aşağıdaki içerikle bir HTML sayfası oluşturalım.

<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
</head>
<body>

<input type="text" ng-model="test" /><br>
<input type="text" ng-model="test" />

</body>
</html>

Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Aslında bu örneğin, bir önceki örnekle pek bir farkı yok. Sadece alt taraftaki selamlamayı kaldırıp, onun yerine bir metin kutusu daha ekledik ve bunu da "ng-model" direktifi ile "test" değişkenine bağladık.

Burada dikkat çekmek istediğim bir şey var. Buradaki metin kutularından hangisine bir şey yazarsak yazalım, diğeri otomatik olarak onunla aynı içeriğe sahip olacaktır. Buradan anlıyoruz ki, "ng-model" hem metin kutusu -> değişken, hem de değişken -> metin kutusu şeklinde bir bağlama yapıyor. İşte buna çift yönlü binding deniyor.

Örnekleri biraz daha farklılaştıralım. Aşağıdaki içerikle bir HTML sayfası oluşturalım.

<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
</head>
<body>

<button ng-click="test='Ali'">Test</button><br>
Selam, {{test}}

</body>
</html>


Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Bu örnekte "ng-click" adında yeni bir direktif görüyoruz. Butona tıklanma olayını Angular tarafında yakalayan bu direktif içerisinde "test" değişkenine "Ali" değerini atıyoruz ve sonrasında da bunu sayfada gösteriyoruz.

Not : Bu notu aramızdaki sabırsızlar için yazıyorum, sen üzerine alınma. Elbette ki uygulamalarımızı buradaki gibi HTML içerisinde spagetti kod olarak yazmıyoruz. Ancak ilk buluşmaya Controller getirmek lüzumsuz olacaktı. Sen olaya odaklanmaya bak, teferruata takılma.


Yukarıdaki örneğimizi bir de JQuery ile yazalım mı? Haydi.

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script>
    $(document).ready(function(){

        $("#testButton").click(function(){
            $("#test").text("Ali");
        });
    });
</script>

</head>
<body>

<button id="testButton">Test</button><br>
Selam, <span id="test"></span>

</body>
</html>



Bu örneğin hazır yazılmışını çalıştırmak için buraya tıklayabilirsin. Karşına aşağıdaki gibi bir sayfanın gelmesi gerekiyor.


Tamam, kabul ediyorum. Birazcık daha uzun. Ama sırf birazcık daha az kod yazacağız diye, oturup sil baştan yeni bir kütüphane öğrenilmez ki. Bize daha elle tutulur bir sebep lazım (En azından bana lazım).


Klasik Kodlamaya Karşı MVC

Evet, buraya biraz dikkat edelim. Zaten makalenin sonuna yaklaştık ve en önemli kısma geldik.

Yukarıdaki iki örnek birbirleri ile tıpa tıp aynı işi yapsa da ve her ikisi de kolay gözükse de, aralarında çok ciddi bir mantık farkı var ve bu fark, bize kompleks uygulamalar ile başa çıkma imkanını veriyor.

JQuery ile başlayalım. Ekrana koyduğumuz buton ve yazının yazdırılacağı "span" tagına birer ID veriyoruz. Ardından öncelikle butonun ID'si üzerinden bir Event Handler yazıyor, bu Handler içerisinde de yine ID'si üzerinden Span'a ulaşarak içeriğini değiştiriyoruz.

Peki bu sıkıntı mı? Aslında evet. Küçük bir uygulama yazarken çok sorun olmasa da, kompleks uygulamalarda işi çok zorlaştıracaktır. Çünkü burada asıl kod yazdığımız kısmın, ön yüzde gözüken sayfayı ezbere bilmesi gerekiyor. Hatta sadece ID olarak da değil, bileşenin tipini de bilmesi gerekiyor. Çünkü eğer bu bir metin kutusu ise, içeriğini "text" fonksiyonu ile değil "val" fonksiyonu ile değiştirmemiz gerekecektir.

İşte tüm bu birbirini ezbere bilme durumu, "Separation of Concerns" prensibine aykırı oluyor. Bu prensibe göre herkes kendi işine bakmalı ve işi olmayan şeylerle ilgilenmemeli. Örneğin yukarıdaki butonun Event Handler'ı, yazılacak içeriğin ne olduğuna karar vermeli ama ekranın hangi köşesine, hangi bileşenin içerisine yazılacağını bilmemeli. Çünkü bu konu, bambaşka bir uzmanlık alanı.

Bunu geliştirme yapan iki farklı yazılım geliştirici olarak düşünelim. Biri asıl iş mantığını geliştiren Core Developer, diğeri de ön yüzde fırtınalar estiren bir Front End Developer. Core Developer gereksinim olan kodu yukarıdaki gibi yazdı diyelim. Sonrasında Front End Developer baktı, bu Span iyi durmuyor, bunu bir metin kutusuna çevireyim dedi. Ne oldu? Yukarıda anlattığım sebepten ötürü program çalışmaz hale geldi. Çünkü buradaki mantıkta Front End Developer, Core Developer'ın kodu yazış şeklini ve kendi imkanlarının esneklik sınırlarını bilmek zorunda. Oysa onun tek derdi, müşteri için daha rahat kullanılabilir bir ekran tasarlamak olmalıydı.

Bir de Angular'lı buton örneğimize bakalım. Buton bir değişkenin değerini değiştiriyor ve ekrandaki bileşen de bu değişkene bağlanıyor. Buton ile bileşen arasında bire bir bağlantı yok. Artık Front End Developer isterse oraya metin kutusu da koyabilir, resim de koyabilir. Çünkü tek bildiği, ekranda gözükecek değerin bu değişkende saklandığı. Nasıl saklandığı umurunda değil.

Biraz toparlayalım. Burada butonun tıklanması sonucu değişkenin değerinin değiştiği kısma (şu anda çok şık gözükmese de) Controller diyebiliriz. Asıl iş mantığına ilişkin tüm kodlamalar bu blokta yapılır. İşlem sonucunu ekrandaki bir bileşende gösteren kısma da View diyebiliriz. Burası sadece HTML ile çıktı üretmek için kullanılır ve herhangi bir iş mantığını barındırmaz. Controller ile View'ın arasına girerek birbirinden izole etmeye yarayan buradaki "test" değişkenimize de Model diyebiliriz. Bu kısım sadece Controller ile View arasında veri taşımaktan sorumludur.

Yukarıda bahsettiğim Model, View ve Controller'ı yan yana getirdiğimizde, karşımıza daha tanıdık gözüken MVC kısaltması çıkar ki, işin özü de budur. Biliyorum, şu anda tek bir sayfada kod yazdığımız için çok da MVC gibi gözükmüyor ancak burada MVC'nin üzerine oturduğu mantığı anlamak önemli.

Dikkat : Yukarıda anlattığım kısım çok basit gibi gözükmesine karşın inanılmaz önemli. Angular'a veya diğer MVC Framework'lere yeni başlayan insanların sık sık, JQuery'den kalma alışkanlıklarını devam ettirdiklerine şahit oluyorum. Controller içerisinden Model'i güncelleyip onu da View'da göstermek yerine, direk View'da bulunan bileşenlere ID değeri üzerinden ulaşıp değişiklik yaptıkları oluyor ki ortaya akraba evliliğinden üremiş bir uygulama çıkıyor.

Çok çok istisnai durumlar haricinde, Angular ile yapılan sayfalarda bileşenlerin ID'leri bulunmaz. Özellikle başlangıçta ID değerlerini yazmamak, MVC mimarisine uygun düşünme alışkanlığı kazanmaya yardımcı olacaktır.


Elbette buradaki kadar basit bir örnekte MVC'nin faydasını görmek çok da mümkün değil. Ancak uygulamamızda yüzlerce ekran, bu ekranlarda da yüzlerce form kontrolü olduğunu düşünürsek, "Controller'ların View içeriklerini ezbere bilmesini istemek mi, yoksa Controller'lardan değişkenlere değer atayıp, bu değişkenleri de View'da ihtiyaca uygun yerlere koymak mı?" sorusu daha bir anlamlı hale gelir.

Not : İşin aslı, Angular MVC yerine "MVW" ifadesini kullanıyor. Buradaki "W", "Whatever - Her neyse" şeklinde açılıyor ve Angular'ın ihtiyaca yönelik olarak esneyebildiğini gösteriyor. Ancak 1970'lerde çıkan MVC mimarisini Türkiye'de, ASP.Net ile çıkmış gibi algılayan bir dolu insan varken, bu kısmı serbest bırakarak işin asıl mantığının yanlış anlaşılmasına imkan vermek istemiyorum.


Daha ilk buluşmamızda iyice derine inip olayları anlaşılmaz hale getirmeyeceğim. Makalemizi burada noktalarken öğrendiklerimizi özetleyelim.
  • Angular (yukarıdaki notu da hesaba katarak), MVC mimarisi üzerinde SPA (Single Page Application) türünde uygulamalar geliştirmemize imkan sağlayan bir Framework'tür.
  • Bu Framework ile benzerlerinden daha az kod yazarak, büyük işler başarmamız mümkündür.
  • Angular'ı kullanmamız için kütüphanesini sayfamıza eklememiz gerekir.
  • Angular, kendi içerisinde JQuery'nin Light bir versiyonunu bulundurur.
  • "<html>" tagımıza ekleyeceğimiz "ng-app" ifadesi ile, sayfanın bir Angular uygulaması olduğunu tarayıcıya belirtmiş oluruz.
  • Bu noktadan sonra, sayfadaki Angular için özel anlam ifade eden direktifler, uygun şekilde çalıştırılarak işletilir.
  • "ng-model" direktifi, çift yönlü binding için kullanılır.
  • {{xxxx}} ifadesi, "xxxx" değişkeninin değerini ekrana yazmak için kullanılır.
  • "ng-click" direktifi, tıklama olayının Angular tarafındaki Event Handler'ı olarak görülebilir.
  • MVC'nin temelde ne olduğunu artık biliyoruz ancak burada tek satırda özetleyemeyeceğim.


Geri
Bismillah
İleri
Bu en son makaledir

Yorum Gönder

  1. Neden Angular JS diyenlere cevap niteliğinde faydalı bi yazı olmuş elinize sağlık .

    YanıtlaSil
  2. hevesle devamını bekliyorum, çok güzel olmuş.

    YanıtlaSil
  3. tebrik ederim devamını bekliyoruz

    YanıtlaSil
  4. eee devamo nerdeee...

    YanıtlaSil
  5. Bu ay işimi değiştirdim ve yeni bir oluşum içine girdim. Bu sebeple vakit bulup da yeni bir makale yazamadım, kusura bakmayın. İnşallah yakında hem bu sınıftaki yeni makaleler ile, hem de Phonegap için açmayı planladığım yeni sınıf ile kendimi affettireceğim.

    YanıtlaSil
  6. Teşekkürler benim için çok güzel bir yazı oldu, devamını bekliyorum kolay gelsin :)

    YanıtlaSil
  7. Gerçekten çok kaliteli bir seri olabilir. İnşallah devamı gelir.

    YanıtlaSil
  8. konunun web tasarım kısmında olan biri olarak sonuna kadar soluksuz okudum-denedim. Güzel bir anlatımla anlaşılır anlatmışsın.Bunu bende yapmalıyım dedirtiyorsun.teşekkürler :)

    YanıtlaSil
  9. Türk yazılım geliştiricilerinin üniversitelerdeki gibi klişeleşmiş sönük, basit ve ezberlerinden ziyade sizin gibi renklere ihtiyacı var. Umarım bu blog yarım kalmaz.

    YanıtlaSil
  10. I accept there are numerous more pleasurable open doors ahead for people that took a gander at your site.Those guidelines additionally worked to become a good way to recognize that other people online have the identical fervor like mine to grasp great deal more around this condition.WE are providing AngularJs training in Velachery.
    For more details:AngularJs training in Velachery

    YanıtlaSil

 
Top