Angularjs direktif template belirleme ve $templateCache servisi

12 Eyl

Angularjs direktiflerinin görünüm tarafını template özelliği üzerinden belirleyebiliriz. Template özelliğini belirlemenin bazı yöntemleri vardır. Bunlar:

  • Düz metin şeklinde belirleme
  • URL ile dosya yolunu göstererek belirleme
  • $templateCache servisi ile belirleme

Bu işlemleri örnek bir personel kartı tanımlayarak gerçekleştirmeye çalışalım.

Düz Metin Şeklinde Template Belirlemek

Direktiflerin template özelliğini düz metin şeklinde belirlemek aşağıdaki yöntem izlenmelidir.

 

URL ile Dosya Yolunu Göstererek Belirleme

Bu yöntemde templateUrl özelliği olarak bir html dosya yolu verilir. HTML dosya üzerinde istediğimiz gibi düzenlemeleri yaparak yolunu bu şekilde direktife kolayca verebiliriz.

 

$templateCache Servisi ile Belirleme

URL ile template belirlerken yapılan işlem önceden hazırlanmış bir HTML dosyasının yolunu templateUrl özelliğine bildirmektir.

$templateCache servisini kullanırken HTML metinini önceden servise belirtmek gerekmektedir. Servisin kullanımı put() ve get() metodları üzerinden yapılmaktadır.

  • $templateCache.put(“templateAdı”, “template içeiği”)
  • $templateCache.get(“templateAdı”)

Template içeriğini uygulama başlatılırken yani modülün run fonksiyonu çalıştırıldığında gerçekleştirebiliriz.

 

$templateCache içerisindeki veriye templateUrl üzerinden aşağıdaki şekilde erişmek mümkündür.

Not: Angularjs uygulamalarında script şeklinde tanımlanan html içerikleri doğrudan $templateCache içerisine kaydedilir.

Bunu şu şekilde inceleyebiliriz:

Burada html içeriği script olarak tanımlanmıştır ve id değeri olarak card.html verilmiştir. İçeriğe javascript tarafından $templateCache.get(‘card.html’) şeklinde erişilebilmektedir.