AngularJS’e Giriş

Selamlar;

Öncelikle herkese iyi bayramlar. Bugünkü makalemde yeni başlayanlar için AngularJS’i anlatacağım.

VisualStudio 2015’de yeni boş bir MVC projesini yaratıyoruz. Ve Nugetten AngularJS Framework’ünü indiriyoruz.

Aşağıda ilk örnek maddlere halinde açıklanmıştır.

  1. Burada “ng-app” AngularJS framework’ünün çalışacağı alanı belirtir.
  2. “ng-model” directive’i input alana “Name” property’sini bağlar.
  3. “ng-bind” directive’i “<p>” elementinin innerHTML’ine “Name” değişkenini basar.
  4. “{{SurName}}”operationı da aynı “ng-bind” gibi ilgili “<p>” elementine “SurName” değişkenini basar.

İlgili ekran aşağıdaki gibidir.

AngularStart2

  1. AngularJS modulelü yani View Model AngularJS uygulaması altında aşağıda görüldüğü gibi “<script></script>” tagları arasında tanımlanır.
  2. “ng-app” directive’i application’ı temsil ederken, “ng-controller” directive’i controller’ı temsil eder. “ng-app”‘i bir çeşit namespace gibi düşünebiliriz.
  3. AngularJS controller’ı altında AngularJS uygulaması çalışır.
  4. “$scope” root yapısındaki en üst katmandır. Tüm tanımlamalar “$scope”‘dan sonra yapılır.

İlgili ekran çıktısı aşağıdaki gibidir.

angular2

AngularJS’de sayıların kullanımı: Aşağıda görüldüğü gibi “ng-init” ile ilgili değişkenler tanımlanmış ve “{{}}” parantezleri içinde matematik işlemleri yapılmıştır.

İlgili ekran çıktısı aşağıdaki gibidir:

AngularNumber

AngularJS’de Object kullanımı aşağıdaki gibi yapılabilmektedir:

Burda person sınıfına ait Name ve Age propertyleri tanımlanmıştır. Daha sonra ilgili sınıfın özellikleri ekranan basılmıştır.

İlgili ekran çıktısı aşağıdaki gibidir:

Object

AngularJS’de dizi kullanımı aşağıdaki gibidir:

İlgili ekran çıktısı aşağıdaki gibidir:

Array

AngularJS’de DataBind aşağıdaki gibi yapılmaktadır:

“ng-model” directive ile ilgili Html Element AngularJS’deki ilgili modele bağlanmaktadır. Model’de oluşacak bir değişiklik bunu kullanan tüm nesneleri etkilemektedir. Mesela aşağıda görüldüğü gibi fiyat bilgisi değiştiği zaman buna bağlı olan “cost” modeli değişmektedir. Toplam Fiyat’da “cost”‘u kullandığı için o da bu değişiklikten etkilenmektedir.

İlgili ekran çıktısı aşağıdaki gibidir:

bind

AngularJS’de Repeat İşlemleri:

Aynı “Foreach” yapısında olduğu gibi “ng-repeat”‘de de ilgili data kümesi tek tek gezilerek ilgili işlemler yapılır.

Ekran çıktısı aşağıdaki gibidir:

Repeat

AngularJS’de Controller’da Method Kullanımı:

AngularJs’de Controller kullanılacak model, parametre, değişken gibi yapıların tanımlandığı alandır. Aşağıda “personalController” içinde Per_Info() function’ı tanımlanmıştır. Bu function ile ilgili kişinin detay bilgileri alınmakta ve ekrana basılmaktadır.

İlgili ekran çıktısı aşağıdaki gibidir:

aboutme

Geldik bir makalenin daha sonuna. AngularJS’in devamını ilerki makaleler de hep beraber ele alıcağız.

Yeni bir makalede görüşmek üzere hoşçakalın.

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

11 Cevaplar

  1. buğra dedi ki:

    elinize sağlık

  2. Selçuk İtmiş dedi ki:

    Merhaba,
    Yazınızı büyük bir heyecanla okudum, çok faydalı bir yazı dizisine benziyor. Yazı dizinizin devamını dört gözle bekliyorum. Özellikle beklediğim konular; hash yapısı, ajax ve json kullanımı.
    Elinize sağlık.

  3. Ahmet dedi ki:

    Bora hocam teşekkür ederim az javascript bilgim var buna rağmen gayet anlaşılır bir yazı oluş. Size şunu sormak istiyorum ben jquery veya angularjs bilmiyorum az biraz javascript bilgim var sizce jquery vee angularjs ten hangisini öğrenmeliyim ya da önce javascript mi öğrenmeliyim ?

  4. Umut Koçak dedi ki:

    VS 2015’te MVC Dosyası açamadım yardımcı olabilirmisiniz? VS 2015’e yeni geçiş yaptım da.

  5. Ekrem ÖZER dedi ki:

    Hocam sitenizi bugün gördüm, gayet özgün ve kaliteli makaleler var. Elinize sağlık.

buğra için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir