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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var myApp = angular .module("kModul", []) .uye("kController", function ($scope) { var uye = { sim: "Ali İhsan", dtarih: "10.10.1980", profil: "/profil/k08.jpg" }; $scope.uye = uye; }); |
HTML: View tarafında kaynağı isim,dtarih ve profil şeklinde bağlıyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!doctype html> <html ng-app="kModul"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> var kModul = angular .module("kModul", []) .controller("kController", function ($scope) { var uye = { isim: "Ali İhsan", dtarih: "10.10.1980", profil: "profil/k08.jpg" }; $scope.uye = uye; }); </script> </head> <body> <div ng-controller="kController"> <div> Adı: {{ uye.isim }} </div> <div> Doğum Tarihi: {{ uye.dtarih }} </div> <div> <img src="{{uye.profil}}" alt="{{ uye.isim }}" style="height:100px; width:100px" /> </div> </div> </body> </html> |
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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!doctype html> <html ng-app="kModul"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script> var kModul = angular .module("kModul", []) .controller("kController", function ($scope) { var uye = { isim: "Ali İhsan", dtarih: "10.10.1980", profil: "profil/k08.jpg" }; $scope.uye = uye; }); </script> </head> <body> <h1>NG-SRC İLE</h1> <div ng-controller="kController"> <div> Adı : {{ uye.isim }} </div> <div> Doğum Tarihi : {{ uye.dtarih }} </div> <div> <img ng-src="{{uye.profil}}" alt="{{ uye.isim }}" style="height:100px; width:100px" /> </div> </div> </body> </html> |
AngularJS ile ilgili diğer yazıları da okumak istermisiniz.
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.
Yapmak istediğin örneğin kodlarını paylaşırsan yardımcı olmaya çalışırım.
http://prntscr.com/fh9j6c – HTML Kod
http://prntscr.com/fh9jej – AngularJS Kod
2 tane modül kullanamıyormuyuz? Ders 2-3’te ki örnekleri ekleyince bu çalışmıyor. Modüller çakışıyor ondan mı? Aynı anda Ders 2-3-4 örneklerini nasıl çalıştırabilirim.
Birden fazla modül de kullanılır. Birden fazla kontroller da kullanılabilir. Ekrandaki kodda hatalı olan kısım var ile tanımladığın değişkeni tekrar var ile tanımlamaya çalıştığın için hata vermiş görünüyor. Örnek olması için bir tane hazırladım. Umarım istediğin cevaptır yada cevaba yakındır. https://www.yazilimbilisim.net/wp-content/uploads/2016/04/cevap.zip
[…] Konu 4: AngularJS ng-src Yönergesi […]