AngularJS Giriş

Uzun bir ara oldu JavaScript kategorisinde içerik yayınlamayalı. Son zamanlarda ilgimi çeken AngularJS ile sizleri de tanıştırmayı düşünüyorum açıkcası. Bu tip işlerde duayen olan jQuery artık yerini daha kısa bir şekilde işlerimizi çözen ve de MVC (Model-View-Controller) yapısına sahip olan AngularJS, VueJS, React gibi mimarilere bıraktı diyebilirim.

Bu dersimizi biraz da olsa jQuery ile benzerlikleri üzerinden giderek anlatmaya çalışacağım. Hatırlarsanız JavaScript taraflı işlemlerde ilerleme kaydettiğimizin en belirgin özelliği olarak "nesneyi bul" daha sonra ise "nesnenin içini değiştir" şeklindeydi. En azından kendim için heyecanlandırıcıydı. Bunu bir örnekle hatırlayalım.
HTML Betikleri

<div class="ilgili-katman">İçeriği değişecek olan katman<div>

Oluşan HTML'e class, id veya element ismi ile erişim yapabiliyorduk. O da şu şekildeydi: "Döküman hazır olduğunda erişim sağladığımız nesnenin text vb.. özelliğini değiştir".
jQuery Betikleri

$(document).ready(function () {
   $(".ilgili-katman").text('İçerik değişti');
});

---

Biraz daha işi ilerletelim. Mesela bir input olsun ve buna anlık girilen değeri başka bir element üzerinde gösterimini sağlayalım

Örnek1: jQuery ile Yapalım

jQuery Betikleri

        $(document).ready(function() {
            $(".girdi-kutusu").on("keyup", function() {
                var strDeger = $(this).val();
                $(".cikti").text(strDeger);
            });
        });

HTML Betikleri

    <div class="kapsul">
        <label>Ad Soyad:</label>
        <input type="text" class="girdi-kutusu" placeholder="Lütfen ad soyad gir!!">
        <hr>
        <h3>Merhaba <span class="cikti"></span></h3>
    </div>

Örnek

Örnek1: AngularJS ile Yapalım

AngularJS için direkt olarak HTML içerisinde girdi ve çıktı elementlerini belirtebilirsiniz. Aşağıdaki kodda görüldüğü üzere kapsul değerli olan div elementine data-ng-app="" niteliğini belirterek onun bir AngularJS ile işleme tabi tutulacağını söylemiş oluyoruz. Sonrasında ise input elementine ng-model="modeladsoyad" niteliği ekliyoruz. Bu ise AngularJS tarafına işlemler için girdi elementim bu şeklinde beyanda bulunmuş oluyoruz.{{modeladsoyad}} özelliği ile de beyan ettiğim girdi modelinin değerini sanki bir değişken kullanıyormuş gibi ekrana yazdırmaya sağlıyoruz.

HTML-AngularJS Betikleri

    <div class="kapsul" data-ng-app="">
        <label>Ad Soyad:</label>
        <input type="text" ng-model="modeladsoyad" class="girdi-kutusu" placeholder="Lütfen ad soyad gir!!">
        <hr>
        <h3>Merhaba {{modeladsoyad}}</h3>
    </div>

Örnek