Cara Membuat Custom Directive Menggunakan Angular JS Part 1

Halo teman teman pada kesempatan kali ini saya akan membahasa tutorial tentang, Cara Membuat Custom Directive Menggunakan Angular JS Part 1, pada tutorial sebelumnya saya telah membahas tentang pengertian Directive, seperti yang kita ketahui bahwa Directive merupakan tag khusus ynag dimiliki oleh Angular JS. Pada pembahasan tentang Cara Membuat Custome Directive Menggunakan Angular JS kita akan mencoba membuat sebuah directive sendiri yang sesuai dengan kebutuhan.

Oke teman teman kita langsung saja berikut, Cara Membuat Custom Directive Menggunakan Angular JS Part 1, untuk cara penggunaan tag, directive pada Angular JS dibagi menjadi 4 , di antaranya yaitu,

Element Directive ( <my-directive></my-directive> )
Attribute Directive ( <div my-directive></div> )
Class Directive ( <div class=”my-directive”></div> )
Comment Directive ( <!–directive:my-directive–> )

Berikutnya setelah teman teman paham tentang cara penggunaan tag directive yang terdapat pada Angular JS, selanjutnya kita akan lihat sebuah struktur yang paling dasar dari custom directive di dalam Angular JS, untuk mengunaan custom directive pada saat membuat directive kita diharuskan mengembalikan sebuah object directive yang memiliki beberapa property diantaranya ,

Silahkan teman teman simpan script dibawah ini dengan nama MyDirective.js, dengan cara buatlah sebuah folder baru bernama Cara Membuat Custom Directive Menggunakan Angular JS Part 1 didalam folder tersebuat buatlah folder baru dengan nama “js” dan didalam folder “js” buat lah sebuah folder yang bernama directives kemudian silahkan simpan script di bawah ini pada folder tersebut dengan nama MyDirective.js

app.directive('myDirective',function(){
return {
restrict:'EA',
template:'<h2>Hello {{dumet}}</h2>'
};
});

Kemudian kita buat lah sebuah view, dengan nama app.js yang disimpan di dalam folder js berikut script nya seperti dibawah ini,

var app=angular.module('FirstApp',[]);

Berikutnya didalam folder js kita buat sebuah folder baru yang bernama controllers didalam folder controllers kita buat sebuah file yang bernama MainController.js masukan script dibawah ini pada MainController.js tersebut

app.controller('MainController',['$scope', function($scope){
$scope.dumet="Dumet School";
}]);

Selanjutnya silahkan masukan script HTML dibawah ini dengan nama index.html didalam folder Cara Membuat Custom Directive Menggunakan Angular JS Part 1

<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
	<script src="js/app.js"></script>
	<script src="js/controllers/MainController.js"></script>
	<script src="js/directives/MyDirective.js"></script>
</head>
<body ng-app="FirstApp">
	<div ng-controller="MainController">
	<my-directive>
	</my-directive>
<hr/>
	<div my-directive></div>
</div>
</body>
<html>

Jika dijalankan pada browser maka hasilnya seperti dibawah ini,

Oke taman teman bagainama cukup mudah bukan? Cara Membuat Custom Directive Menggunakan Angular JS Part 1 nya,

Semoga bermanfaat, terima kasih

https://www.kursuswebsite.org/cara-membuat-custom-directive-mengunakan-angular-js-part-2/

Cara Membuat Custom Directive Menggunakan Angular JS Part 1

Kategori