Cara Membuat Template Dengan Module Directive AngularJs

Pada artikel sebelumnya saya sudah membahas tentang Cara Membuat Template Dengan Menggunakan AngularJs. Dan pada artikel ini saya akan membahas tentang Cara Membuat Template Dengan Module Directive AngularJs. Dimana idenya masih sama seperti pembahasan sebelumnya, yaitu memisahkan struktur html yang sama pada setiap halamnnya sepeti header atau footer. Namun yang berbeda adalah caranya, karena disini saya akan menggunakan module directive dari angularJs.

Langsung saja Cara Membuat Template Dengan Module Directive AngularJs kita buat struktur htmlnya terlebih dahulu. Disini saya masih menggunakan struktur html di pembahasan sebelumnya dengan menggunakan bootsrap dan berikut ini adalah scriptnya.

<!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">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
  </head>
  <body ng-App="paramApp">
  <div class="card text-center">

     <header-dumet> </header-dumet>

  	 <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>
	<!-- 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>

Jika sudah kita buat module angularJs dengan parameter untuk di panggil di ng-App.

var modul = angular.module('paramApp', []);

Kemudian di lanjutkan dengan membuat directive yang didalamnya ada 2 parameter. Berikut ini adalah scriptnya.

modul.directive('headerDumet', function(){
        return{
	
          restirct:'E',
          templateUrl:'header.html'

        }
      });

Dan terakhir kita buat struktur header di file header.html seperti berikut ini.

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

Oke saya akan menjelaskan alur atau flownya dari awal. Yang pertama tentu buat struktur htmlnya dan module angular, teman-teman jangan lupa berikan direktif ng-App di html dengan parameter yang di ambil dari module angularJs. Jadi nama parameternya wajib sama.

Kedua teman-teman buat tag html kosong yang nanti akan dimasukkan untuk menjadi parameter kedua di modul directive. Kemudian buat Â modul direktif dengan 2 parameter yang dimana parameter pertama di ambil dari tag html yang sudah dikosongkan tadi. Dan parameter kedua adalah function untuk memanggil file lain yang sudah kita pisahkan strukturnya. Ada dua cara yang bisa pakai, bisa berdasarkan attribute (A) atau elemen (E). Penulisan dua kata yang dipisahkan dengan simbol cukup ditulis dengan format camelCase di parameter pertama directive.

Berdasarkan Elemen

Berdasarkan Attribute

Berikut tampilan keseluruhan.

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

Cara Membuat Template Dengan Module Directive AngularJs

Kategori