Merhaba arkadaşlar, bu yazımda ng-include direktifini anlatacağım. Önce kodumuzu paylaşalım ve kod üzerinden anlatalım.
İndex.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>İndex</title> <script type="text/javascript" src="../resources/js/angular.min.js"> </script> <link rel="stylesheet" href="../resources/css/bootstrap.min.css"> </head> <body ng-app> <div class="container"> <!--<header ng-include="'test.html'"></header>--> <ng-include src="'test.html'"></ng-include> <div class="row" style="background-color:red;width:100%;height:55px;"> <h1>Burası Birinci Parça</h1> </div> </div> </body> </html> |
Test.html
|
1 2 3 |
<div class="row" style="background-color:blue;height:55px;width:100%"> <h1>Burası İkinci Parça</h1> </div> |
ng-include => Harici html parçamızı projemize dâhil etmemize yarıyor. Yani parça parça olan html sayfalarını birleştirmeye yarıyor.
Örneğimizde index.html sayfamız mevcut. Bu sayfaya harici header eklemek istiyorum. ng-include direktifinin src özelliğine test.html parçamızın yolunu vererek bunu yapıyoruz. Burada dikkat edilmesi gereken src özelliğine yolun tek tırnak kullanarak yapılması. Şimdi çıktımıza bakalım:
Görüldüğü gibi İkinci Parça, Birinci Parçanın üst kısmına eklendi. Özet olarak ng-include kullanarak parça parça yazdığımız kodları birleştirebiliriz. Bu yazımı burada bitiriyorum diğer yazılarımda görüşmek üzere…
