Selamlar,

AngularJs ile yeni yeni tanıştım ve öğrenildiğinde bir çok şeyi çok kolayladığımı söyleyebilirim, bugün e-ticaret sitelerinde kullanılan ‘sepete ekle’ olayını angular ile yapmaya çalışacağım.

Ben editör olarak Visual Studio 2013′ ü kullanacağım.

Öncelikle bir proje klasörü oluşturup içine birer html, javascript ve css dosyası atıyorum. Ardından basit bi tasarım yapıyorum, kafamdaki tasarım şu :  sol tafarta bir ürün listesi ve sağ tarafta sepetim olacak ürünlere tıkladıkça sepetime eklenecekler ve birinci tıklamadan sonra sepetimdeki adeti artacak.

1

Html’imin ilk hali bu şekilde, uygulamanın temel yapısını yapıp alttaki resimde gösteriyorum her hareketim için resim kullanmak zaman kaybı olur bu yüzden resim üzerindeki numaraların açıklamalarını aşağıda yapıyorum.

2

 

  • 1-Angularjs kütüphanesini dosyama kaynak olarak ekliyorum.
  • 2-ng-app parametresini uygulamayı kapsayan bir div’e yazıp uygulama ismi yazıyorum. Aynı zamanda uygulama içerisinde ki nesneleri kullanabilmek için bir ng-controller oluşturuyorum.
  • 3-Bu adımda yanda duran js dosyama ilk olarak angular.module(“onlineShopping”, []) komutuyla app adlı değişkene uygulamanın kapsadığı alanı atıyorum. Ve bu app değişkeniyle js tarafında bir controller oluşturup bize parametre olarak gelen $scope isimli değişkeni yazıyorum. $scope bizim javascript ve html tarafındaki veri alışverişini gercek zamanlı olarak yapacak olan değişkenimiz diyebiliriz. Uygulama içerisindeki bütün olaylar bu controller fonksiyonu içerisinde gerçekleşecek.
  • 4-Burada ürünler listesinde görünmesi için $scope’a bir products listesi ekleyip içine örnek ürünler atıyorum.
  • 5-ul içindeki li’ye ng-repeat ile her ürün için dönmesini söylüyorum (product in ptoducts) ‘taki mantık: ürünler listesi içinden sırayla her nesneyi product isimli değişkene atar bu sayede li içinde nesnenin bütün özelliklerine ulaşıp ekrana bastırabiliriz.
  • 6-li içindeki a bloğuna eklediğim ng-click olayı ile js tarafında çalışacak olan addMyproducts metodunu çağırıp parametre olarak o an dönen product değişkenimizi gönderiyoruz.
  • 7-Önceden açtığımız controller fonksiyonumuzun içine $scope parametresini kullanarak yeni bir myProducts listesi oluşturup altına product parametresi ile çağırdığımız metodu tanımlıyoruz. Ve içerisinde myProducts listesine gelen product nesnesini ‘push’ methodu ile ekliyoruz.
  • 8-Buradada yukarıdakiyle aynı mantıkta myProducts listesindeki ürünleri sağdaki kutuya bastırıyoruz. Böylece soldaki kutuda tıkladığımız her ürünün sağdaki kutuyada eklendiğini görüyoruz.

Fakat daha önce eklediğimiz bir ürüne tekrar tıkladığımızda tarayıcının console penceresinde hata çıktığını görürüz ve daha sonraki işlemlerimizde çalışmaz, bizde zaten listeye 1’den fazla miktarda aynı ürünü eklemek yerine o ürünün miktar isimli property sini 1 artıracağız. Bunun için en son oluşturduğumuz addMyproducts  isimli fonksiyonumuzu şu şekilde düzenliyoruz…

3

 

Evet açıklamasınıda resimde yaptım. Çalışan halini görelim.

4

Unutmadan birşey daha eklemek istiyorum mesela sepetimizde biriken ürünlerin toplam fiyatını güncel gösteren bir şey yapalım.

5

Evet önce ekleme metodumun üstünde $scope içerisine $scope.totalPrice isimli bir değişken tanımlıyorum metodumun girişindede gelen ürünün fiyatını değişkene ekliyorum son olarak soldaki h1 taginde bunu bastırıyorum. Çalışan son halini görelim.

6

 

Evet ufak bir matematik hesabıyla son hamlemizin doğru çalıştığını görmekteyiz.

Umarım yararlı olmuştur.

Kodları buradan indirebilirsiniz.

Kolay gelsin.

Facebook'dan yorumla