Cuma , 20 Ekim 2017
Anasayfa » JavaScript » AngularJS » AngularJS ng-include Yönergesi

AngularJS ng-include Yönergesi

Bu yazıda AngularJS ng-include direktifi ile  harici HTML sayfalarını mevcut HTML sayfasına dahil edeceğiz.

Hazırladığımız sayfada kodların bazılarını çeşitli sayfalara parçalayarak hem sayfanın kod kalabalığını azaltmış hem de yazdığımız kodların okunurluğunu arttırmış oluruz.

Hazırladığımız bileşenleri birden fazla sayfada kullanmak istediğimizde de aynı kodları tekrar tekrar yazmaktan bizi alıkoymuş olacaktır.(Güzel birşey 🙂 ) Aslında burada yapılan da yazılmış olan kodları parçalamak ve programlamayı kolaylaştırmak.  ng-include yönergesi için kullandığım kodlar ve model bu yazıdan alınmıştır.

Hazırladığımız sayfayı yüklemek için tek yapmamız gereken ng-include yönergesi içine sayfanın ismi yazmak olacaktır.( Çok basitmiş )

Bu kadar yazıdan sonra gelelim ng-include yönergesinin kullanımını

Tempalate olarak kullanılacak personel tablosunun HTML kodlarını aşağıdaki şekilde oluşturduk.

personel-template.html

 

SCRIPT Kodları

 

index.html sayfasında kullanımı:

harici olarak yüklemek istediğimiz sayfayı sadece ng-include yönergesi içinde ismi ile çağırmamız gerekiyor.(Dikkat: Doğrudan sayfa ismi ile çağırırken sayfa ismi metinsel bir ifade olduğu için include içine tek tırnaklı şekilde yazıldığına dikkat edin.)

 

$scope üzerine parametre geçerek sayfa ismini verebiliriz. O zaman da ng-iclude içine sadece $scope ile belirtilen parametreyi yazmak gerekecektir. index.html sayfasındaki model parametreli olarak hazırlandığında şu şekilde olacaktır.

SCRIPT

 

HTML

 

AngularJS ile harici oluşturulan parçaları tek sayfada toplayıp dinamik sayfalar oluşturabilirsiniz. angularjs ng-include ile ilgili daha detaylı bilgi için  https://docs.angularjs.org/api/ng/directive/ngInclude adresini ziyaret edebilirisiniz.

 

AngularJS Örnek Uygulama İçin :angularjs-ng-include-ornek

 

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 …

Bir Cevap Yazın

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