04_AngularJs_ngInclude

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…

Print Friendly, PDF & Email

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.