AngularJS

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.

 

Yorum

  • Emege saygi ama bir kac seyi elestirmeden gecemeyecegim. Kopyala yapistir yaparken degisken isimlerine dikkat edersen hem senin sayfan hem de okuyucular icin güzel bir gelisme olur. Ve degisken isimlerini daha aciklayici kullanirsan yeni baslayanlarda olusacak kafa karisikliginin önüne gecmis olursun. Angular yazinca google`da üst siralarda cikan bir site icin daha derli toparli bir bilgi aktarimi beklentisi icerisinde olmamiz gayet normal olsa gerek.
    Basarilar

    • Bir zamanlar İngilizce sayfa yapma merakı vardı. İki siteye de farklı yazmak zor olduğu için birine yazdığımı diğerine de ekleme yapıyordum. Ama yine de kopyala yapıştır konusunda haklısın. Daha fazla dikkat etmek gerekiyor.

  • 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.

Umut için bir cevap yazın X