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
Merhaba
Ö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