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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<table border=1> <thead> <tr> <th>İSİM</th> <th>SOYİSİM</th> <th>TARİH</th> <th>MAAŞ</th> </tr> </thead> <tbody> <tr ng-repeat="personel in personeller"> <td> {{ personel.isim }} </td> <td> {{ personel.soyisim }} </td> <td> {{ personel.cinsiyet }} </td> <td> {{ personel.maas }} </td> </tr> </tbody> </table> |
SCRIPT Kodları
|
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 |
<script> var app = angular .module("persModul", []) .controller("persController", function ($scope) { var personeller=[ { "isim": "Yezdan","soyisim": "Erdurak","cinsiyet": "Erkek","maas": "3569" }, { "isim": "Elfiye","soyisim": "Şencin","cinsiyet": "Erkek","maas": "4143" }, { "isim": "Ezfer","soyisim": "Ovacık","cinsiyet": "Erkek","maas": "2705" }, { "isim": "Teberhun","soyisim": "Karadağ sazak","cinsiyet": "Kız","maas": "2337" }, { "isim": "Çağar","soyisim": "Alkan","cinsiyet": "Kız","maas": "1883" }, { "isim": "Mükafi","soyisim": "Düşer","cinsiyet": "Kız","maas": "3869" }, { "isim": "Süreha","soyisim": "Karakaya","cinsiyet": "Erkek","maas": "1796" }, { "isim": "Taberi","soyisim": "Abacılı","cinsiyet": "Kız","maas": "4054" }, { "isim": "Bala","soyisim": "Merkan","cinsiyet": "Erkek","maas": "2703" }, { "isim": "Nil","soyisim": "Aksaç","cinsiyet": "Erkek","maas": "3510" }, { "isim": "Ulualp","soyisim": "Seziş","cinsiyet": "Erkek","maas": "2688" }, { "isim": "Çağlar","soyisim": "Selçuk atay","cinsiyet": "Erkek","maas": "3524" }, { "isim": "Berkem","soyisim": "Erdoğan","cinsiyet": "Kız","maas": "2290" }, { "isim": "Özgünel","soyisim": "Demirtaş","cinsiyet": "Erkek","maas": "3193" }, { "isim": "Mübelliğ","soyisim": "Ölçer","cinsiyet": "Kız","maas": "3603" } ]; $scope.personeller = personeller; }); </script> |
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.)
|
1 2 3 4 5 6 7 |
<body ng-app="persModul"> <div ng-controller="persController"> <div ng-include="'personel-template.html'"></div> </div> </body> |
[divider]
$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
|
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 |
<script> var app = angular .module("persModul", []) .controller("persController", function ($scope) { var personeller=[ { "isim": "Yezdan","soyisim": "Erdurak","cinsiyet": "Erkek","maas": "3569" }, { "isim": "Elfiye","soyisim": "Şencin","cinsiyet": "Erkek","maas": "4143" }, { "isim": "Ezfer","soyisim": "Ovacık","cinsiyet": "Erkek","maas": "2705" }, { "isim": "Teberhun","soyisim": "Karadağ sazak","cinsiyet": "Kız","maas": "2337" }, { "isim": "Çağar","soyisim": "Alkan","cinsiyet": "Kız","maas": "1883" }, { "isim": "Mükafi","soyisim": "Düşer","cinsiyet": "Kız","maas": "3869" }, { "isim": "Süreha","soyisim": "Karakaya","cinsiyet": "Erkek","maas": "1796" }, { "isim": "Taberi","soyisim": "Abacılı","cinsiyet": "Kız","maas": "4054" }, { "isim": "Bala","soyisim": "Merkan","cinsiyet": "Erkek","maas": "2703" }, { "isim": "Nil","soyisim": "Aksaç","cinsiyet": "Erkek","maas": "3510" }, { "isim": "Ulualp","soyisim": "Seziş","cinsiyet": "Erkek","maas": "2688" }, { "isim": "Çağlar","soyisim": "Selçuk atay","cinsiyet": "Erkek","maas": "3524" }, { "isim": "Berkem","soyisim": "Erdoğan","cinsiyet": "Kız","maas": "2290" }, { "isim": "Özgünel","soyisim": "Demirtaş","cinsiyet": "Erkek","maas": "3193" }, { "isim": "Mübelliğ","soyisim": "Ölçer","cinsiyet": "Kız","maas": "3603" } ]; $scope.personeller = personeller; /*scope üzerine personelListe parametresini ekleyip içine template sayfasının adını yazdık.*/ $scope.personelListe="personel-template.html"; }); </script> |
HTML
|
1 2 3 4 5 6 7 8 9 |
<body ng-app="persModul"> <div ng-controller="persController"> <!-- scope ile belirtilen parametreyi yükledik --> <div ng-include="personelListe"></div> </div> </body> |
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.
[divider]
AngularJS Örnek Uygulama İçin :angularjs-ng-include-ornek
[…] Konu 16: AngularJS ng-include direktifi […]