Cara Membuat Template Dengan Menggunakan AngularJs

Hallo teman teman, Kali ini saya akan membahas tentang Cara Membuat Template Dengan Menggunakan AngularJs. Halaman yang akan saya buat adalah 2 halaman, dimana nanti header dan footer akan saya bikin file html terpisah karena struktur htmlnya sama.

Cara Membuat Template Dengan Menggunakan AngularJs pertama-tama saya buat struktur htmlnya dengan menggunakan bootstrap dan filenya sudah saya pecah antara header konten dan footer.

Berikut ini adalah file header.html

<div class="card-header">
    DUMET SCHOOL
</div>

Dan ini adalah file footer.html

<div class="card-footer text-muted text-center">
   CopyRight &copy; 2018
</div>

Jika sudah saya akan membuat dua halaman dengan nama angularjs dan javascript.

Berikut ini adalah halaman angularjs.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Cara Membuat Template Dengan Menggunakan AngularJs</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
  </head>
  <body ng-App>
  <div class="card text-center">
	<div ng-include="'header.html'"></div>

	 <div class="card-body">
	    <h5 class="card-title">AngularJs</h5>
	    <p class="card-text">Cara Membuat Template Dengan Menggunakan AngularJs</p>
	    <a href="#" class="btn btn-primary">Go somewhere</a>
	 </div>

	 <div ng-include="'footer.html'"></div>
	 </div>
	<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Dan di bawah ini adlah halaman javascript.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Cara Membuat Template Dengan Menggunakan AngularJs</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
  </head>
  <body ng-App>
  <div class="card text-center">
	 <div ng-include="'header.html'"></div>

	 <div class="card-body">
	    <h5 class="card-title">Javascript</h5>
	    <p class="card-text">Cara Membuat Fitur Copy Text Dengan Javascript</p>
	    <a href="#" class="btn btn-primary">Go somewhere</a>
	 </div>

	 <div ng-include="'footer.html'"></div>
	 </div>
	<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Disini saya menggunakan ng-include untuk menyambungkan file header.html dan footer.html.

Jika sudah maka teman-teman bisa lihat di browser masing-masing file angularjs.html dan javascript.html. Maka header dan footer secara otomatis akan akan tetap ada di dua halaman yang sudah di buat, baik itu di halaman angularjs.html ataupun di javascript.html.

Demikian artikel tentang Cara Membuat Template Dengan Menggunakan AngularJs. Semoga dapat bermanfaat dan selamat mencoba.

Cara Membuat Template Dengan Menggunakan AngularJs

Kategori