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.

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

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

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

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.

Cara Membuat Template Dengan Module Directive AngularJs

Cara Membuat Template Dengan Module Directive AngularJs

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

Cara Membuat Template Dengan Module Directive AngularJs

Cara Membuat Template Dengan Module Directive AngularJs

Berdasarkan Attribute

Cara Membuat Template Dengan Module Directive AngularJs

Cara Membuat Template Dengan Module Directive AngularJs

Berikut tampilan keseluruhan.

Cara Membuat Template Dengan Module Directive AngularJs

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