Özer Gül

AngularJS nedir – örnekler

2015 01 04 AngularJS

AngularJS, basit tabirle javascript tabanlı bir MVC kütüphanesidir. Kalabalık bir communityyi ve Googleı arkasına almış olan AngularJS, az ama öz kod yazmamıza yarayan bir kütüphanedir.

AngularJS in en güzel tarafı(bence), çift taraflı çalışmasıdır(two way binding). Örneğin, bir inputtaki değeri değiştirdiğinizde anlık olarak bir span içindeki veri de değişir. Ne demek istediğimi az sonra örneklerden anlayacaksınız.

Ayrıca Angular, hiç js kodu yazmadan, template kısmında koşullu ifadeler ve deyimlerle çalışma olanağı sağlar ki işin en güzel tarafı budur 🙂

Ben direkt örneklere geçeyim. Bu yazıda “Neden AngularJS Kullanmalıyız?” sorusuna kendi başına cevap verebilecek 5 minik örnek göstermek istiyorum.

Örnek 1

Fazla detaya inmeden, Angular ile matematiksel işlemlerin nasıl yapıldığına dair ufak bir örnek göstermek istiyorum. Sadece template kısmında geçen bu örnekte detaylara pek fazla takılmayın.

Örnek 2

Bir önceki örnekte, hiç js kullanmamıştık, şimdiki örnekte de hiç js kodu yazmadan nasıl arraydan liste yaratmayı ve o listeyi filtrelemeyi göreceksiniz.

Örnek 1de olduğu gibi örnek 2de de ng-app ve ng-init attributelerini kullandık. Bunların açıklamasını daha sonra yapacağım fakat ng-init in az çok ne olduğunu tahmin etmişsinizdir.

Örnek 3

Angular çift taraflı çalışır demiştim. Ona bir örnek vereyim.

Farkettiğiniz üzere Input 1 e birşey yazdığınız anda, Input 2 içeriği de değişiyor. Ne kadar kolay değil mi? 🙂
Bu işlemi salt jQuery ile yapmak isteseydik yazmamız gereken kod şöyle olurdu:

$("input.class").keyup(function() {
  $("input.class").val( $(this).val() )
})

Örnek 4

Şimdide az önceki örnekleri biraz daha harmanlayalım, kalabalık görünen ama gayet basit bir sayaç uygulaması yapalım:


Yine gördüğünüz gibi, inputa girdiğiniz sayı anında sayaçda beliriyor. Bunun sebebi ng-keyup da gizli. Ng-keyup, aynı jQuery deki .keyup() metodunun görevini üstlenir. Ng-click de aynı şekilde jQuery deki .click() metoduyla aynıdır.

Ng-click, butona, div e vs tıklandığında olacak event i belirler.
Ng-keyup ise inputa, textareaya vs yazı yazıldığında gerçekleşecek eventtir.

Yeri gelmişken belirteyim, birçok Angular attribute adı jQuery ile aynıdır, öğrenmekte kesinlikle zorlanmazsınız.

Örnek 5

Anguların en sevdiğim özelliklerinden biri olan ng-showla alakalı bir örnek.

Örnekte deger adlı değişken; bir, iki ve üç butonlarına tıklandığında sırasıyla 1,2 ve 3 değerlerini alıyor. deger değişkeni, hangi sayıya eşitse, o span gösteriliyor.

Son

Yazı biraz dağınık oldu gibi ama olsun. Örnekler Angular ın kolaylığını ve az kod çok iş mantığını göstermeye yetiyor. Angulara giriş dersi olma niteliği taşıyan bu yazıyı buraya kadar takip ettiyseniz, doğru yoldasınız demektir.

Kalın sağlıcakla 🙂

6 responses to “AngularJS nedir – örnekler”

  1. Kaya Bilir says:

    hayda bre

  2. emrullah says:

    yararlı olmuş güzel olmuş iyi olmuş teşekkürler 😀

  3. Selahattin says:

    İlk örnekte matematiksel işlemlerde toplama işleminde hata var toplama yapacağı yerine birleştirme işlemi yapıyor 😀

    • admin says:

      Gerçekten hiç farketmemiştim bunu…

      Sorunu şu şekikde çözdüm.

      {{sayi_1--sayi_2}}

      Uyardığınız için teşekkürler 🙂

  4. Bahadır says:

    Güzel bir yazı olmuş eline sağlık.Ama arttır,sıfırla,50 yap örneğinde inputa girilen değeri aldıktan sonra arttırma işleminde bozulma mevcut.attırması gerekirken her seferinde yanına 1 yazıyor.

Leave a Reply

Your email address will not be published. Required fields are marked *

(c) Özer Gül, css framework w3.css