Cuma , 21 Temmuz 2017
Anasayfa » JavaScript » AngularJS » AngularJS ng-src Yönergesi

AngularJS ng-src Yönergesi

Bu yazıda ng-src bildiriminin kulllanımını ve neden kullanılması gerektiğini açıklayacağım.Hadi bunu bir örnek ile açıklayalım.
Örneği açıklamadan önce controller ve modül konuları ile ilgili makaleleri okumanızı tavsiye ederim.

Uye adında bir JavaScript nesnemizin olduğunu düşünelim. Üye nesnemiz isim, doğum tarihi ve profil özelliklerini barındırıyor olsun.  Uye nesnesine ait özellikleri görüntü tarafında göstermek istiyoruz. Bu işlem için yazılması gereken kod ve HTML şu şekilde olmalıdır.
SCRIPT:Controller ile aşağıdaki uye modelini inşaa ederiz. Uye nesnesi isim,dtarih ve profil özelliklerini tutacaktır. Bu nesneyi oluşturduktan sonra $scope parametresine yapıştırıyoruz.

 

HTML: View tarafında  kaynağı isim,dtarih ve profil şeklinde bağlıyoruz.

 

Burada img etiketinin src kısmına uye.profilin yazıldığına dikkat edin.

Uygulama çalışıyor. Resim de var. Sorun yok gibi görünebilir. Ancak şöyle bir sorun mevcut. Geliştirici ekranına geçtiğimizde resmin bulunamadığı için 404 hatası oluşturduğunu göreceksiniz.

angular-ng-src

Problemi anlamaya çalışalım. AngularJS en kısa sürede DOM nesnesini ayrıştırmaya çalışır. Fakat ayrıştırılma sayfanın yüklenmesinden sonra yapıldığı için img etiketine ait src özelliği içindeki ifade o sırada HTML için anlam ifade etmemektedir. Bu nedenle resim yüklenmez ve 404 hatası verir.

404 hatasını onarmak için  ng-src direktifi : src yerine ng-src bildirimini kullanmanız. 404 hatasının giderilmesini sağlayacaktır. AngularJS sayfa yüklendikten sonra resmi çağıracak ve yükleyecektir. Aşağıdaki kod ng-src ile düzeltilmiştir.

 

AngularJS Örnek Uygulama

 

AngularJS ile ilgili diğer yazıları da okumak istermisiniz.

 

Hakkında Hayri

İlginizi Çekebilir

AngularJS Template (Asp.net WebService)

Bu yazıda oluşturduğumuz ürünler template sayfasını ile veri tabanındaki kayıtları birleştireceğiz. Öncelikle bilmeniz gereken bu …

5 Yorumlar

  1. Hocam ilk 2 dersinizde ki örneklerle beraber yapmaya çalıştığımda hata veriyor. Yani hesaplama sonra isim sosyisim yazdırma beraber oluyor ama bunu ekleyince hata alıyorum gözükmüyor birşey. 2 ayrı var ekledim ornUyg ve ornUyg isminde ama modül isimleri aynı ornekModul diye yine çalıştıramadım.

Bir Cevap Yazın

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