Angular JS için ufak bir adım daha (II)

Dün gece angular-js-e-gec-giris başlığıyla Angular Js’e geçte olsa giriş yaptığımı belirtmiş, ufak ufak yeni öğrendiğim bilgileri sizlerle paylaşmaya niyetlenmiş, ve iyi/kötü bunu başarabilmiştim.
Yorgunlukla birlikte yazıyı istemeden bitirirken, kullanılacak bir başka değişkeni; “ng-click, bildiğimiz onClick()’in Angular cası” diyerek özetlemiş ve yazıya son vermiştim. Bugün ise bununla ilgili ufakta olsa bir örneği şuraya bırakıp, “show must go on” diyip öyle günü sonlandırayım diyorum 🙂

Angular JS için her zaman ilk olarak ng-app ve ng-controller

Bu ikiliyi unutmamamız gerekiyor, geçen konuda bahsettiğim gibi;
ng-app : Angular JS’in nerede çalışacağını belirtiyordu.
ng-controller : İçerisinde özellik ve fonksiyonları saklayan bir nesnedir diyebiliriz. Her controller kendi içerisinde parametre olarak $scope alır.

Kısa bir hatırlatmadan sonra, bu örnekteki kullanımlarına geçebiliriz.

Ben bu form için tüm sayfada çalışmasını istedim, o yüzden html tagına ekledim. ng-controller için ise myController adını verdim.
Gerekli javascript dosyasını da cdn üzerinden kullanmayı tercih ettim.

Bu arada örnek olarak bir market sepeti yapıyorum, daha önceden tanımlı 3 ürünüm var ve form vasıtası ile yenilerini ekleyebilecek ve bu kayıtları silebileceğim.

Öncelikle bir formum olacak.

Bu formda basit bir şekilde anlatırsam, 2 input ve 1 işlem yapmam için gerekli butonum var.  ng-model ile urunAdi ‘ni verdiğim input’uma veri girildikçe de Şu anda girilen ürün alanında bu değer gözükecek. ng-click işleminde ise, Jquery’deki onClick() işlemi gibi fonksiyonumu tanımlayıp, belirtilen işlemleri yaptıracağım.

Birazdan tanımını göstereceğim urun sınıfım içerisinde ise urunAdi ve tutar değişkenlerim var. Burada sadece bu 2 değişkeni alıp, urun sınıfına ekleyip, listeleteceğim.

Formdaki görüntümüz şu şekilde olacak ;

Ben burada ürün adı olarak Domates yazdığımdan dolayı girilen ürün kısmında da bu kelime belirtildi.

Ürün listesi için gene ng-repeat

Foreach’imizin yerini alan ng-repeat ile listemizin gösterimini yapacağız. Css düzenlemelerine girmemek için bir tablo ile bu işlemi yapacağım;

$index ile belirtilen sınıfın sıra numarasını alabiliyoruz. Dizi içerisinde numaralar 0 dan başladığından dolayı da +1 yaparak daha düzgün gözükmesini sağlıyoruz.

Ayrıca dikkat edersek bir ng-click de burada var. Form içerisinde ekleme için kullanmıştık, burada ise silme işleminde kullanacağız.

Buradaki çıktımız da şu şekilde olacak;

İlk 3 ürünü (Un, süt ve yumurta) sayfanın yüklenmesinde tanımlamıştım. Bu tanımı ng-init ile yapabildiğimiz gibi function içerisinde $scope da da tanımlayabiliyoruz.

Ve geldik javascript’imize

Aslında bütün işlemi yapan burası diyebiliriz.
ng-controller‘da belirttiğimiz isimle oluşturduğumuz fonksiyona $scope değişkenini veriyoruz ve başlıyoruz işlemlerimizi yapmaya.

$scope.urun ile urun isimli, içerisinde urunAdi ve tutar değişkenleri bulunan bir sınıf oluşturdum.
$scope.urunListesi ile urunListesi isimli dizime, urun isimli sınıfımı kullanarak değerler atadım.

Günün konusu olan ng-click için can alıcı noktaya geldiğimizde ise urunEkle ve urunSil fonksiyonlarını oluşturdum ve ne iş yapacaklarını belirtmiş oldum.
$scope.urunEkle fonksiyonuna, input’lara girilen urunAdi ve tutar değerlerini, daha önceden tanımladığım urunListesi dizisine, javascript’in push işlemi ile değer ekledim.
$score.urunSil fonksiyonunda ise, gelen siraNo değişkenine göre javascript’in splice işlemi ile değer kaldırdım ve listeyi bu şekilde güncelledim.

İşler hala kolay ve rahat gidiyor şu anlık.

Tabi ki Angular JS dedikleri sadece bunlar değil, ben sadece temel aşamasında olduğum ve basitliğin verdiği rahatlıkla bir şeyler ekliyorum şu anda. Umarım daha da fazlasını öğrendikçe buralara ekleyip, vakit buldukça paylaşacağım.

Şimdilik bol gülüşlü, eğlenceli günler diliyorum.
Sevdiklerinize sarılmayı unutmayın !

Genel olarak web üzerine yoğunlaşan, gaza gelmek için müzik dinleyen, amatör olarak resim çekmeye çalışan, bir yandan özel bir şirkette çalışıp, diğer yandan da okumaya devam eden sıradan bir ölümlü. He bide buraların sahibi.

2 comments On Angular JS için ufak bir adım daha (II)

Leave a reply:

Your email address will not be published.