AngularJS : Modules dan Directives

Mahir Koding – Modul dalam AngularJS digunakan untuk mendefinisikan scope tag tersebut menggunakan AngularJS. Oleh karena itu, pendefinisian module biasanya diletakkan di tag body sebagai root element dari sebuah html. Module juga berfungsi sebagai container bagi controller nantinya. AngularJS modules dideklarasikan menggunakan directive ng-app.

Directive adalah sebuah attribute yang biasanya berawalan dengan prefix ng- dan berfungsi sebagai marker layaknya class dan id ataupun sebagai event driven. Bisa dikatakan juga bahwa directive adalah tag-khususnya si AngularJS. Ada beberapa macam directive yang akan kita gunakan selama pembahasan ini, untuk lebih lengkapnya, bisa dipelajari di dokumentasi AngularJS.

Berikut adalah contoh sederhana penggunaan directive :

<!DOCTYPE html>
<html>
<head>
	<title>AngularJS - Tutorial</title>
	<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-body="">
	<input type="" ng-model="name">
	<h1>Hello, {{ name }}</h1>
</body>
</html>

Directive ng-app digunakan untuk mendeklarasikan bahwa scope body menggunakan AngularJS. Tanpa deklarasi ng-app, maka AngularJS tidak akan berjalan.

directive ng-model digunakan untuk mendeklarasikan menghubungkan antara view dengan controller. Ng-model juga bisa digunakan sebagai perantara two way binding.

{{ name }} digunakan untuk mengeluarkan isi sebuah data, dalam kasus ini yang di output adalah data dari model name.

<!DOCTYPE html>
<html>
<head>
	<title>AngularJS - Tutorial</title>
	<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-body="">
	<input type="" ng-model="name" ng-init="name='John Doe'">
	<h1 ng-bind="name"></h1>
</body>
</html>

Jika ingin menginisialisasi nilai awal model name, bisa menggunakan directive ng-init seperti contoh diatas. Inisialisasi data model tidak selamanya melalui directive ng-init, namun juga bisa lewat controller yang akan dijelaskan nanti.

Proses mengeluarkan isi dari model name bisa dilakukan dengan 2 cara, bisa dengan menggunakan scope {{ }} ataupun menggunakan directive ng-bind. Hasilnya sama saja.

Untuk penggunaan directive sendiri dapat dilakukan dengan 4 metode :

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

Di AngularJS, kita juga bisa membuat custom directive sesuai keinginan kita. Misalnya :

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="testCtrl">
	<my-directive></my-directive>
</body>
<script type="text/javascript">
	var app = angular.module("myApp", []);

	app.directive("myDirective", function(){
		return {
			restrict : 'EA',
			template : "<h1>{{ material }} Lesson!</h1>"
		}
	})

	app.controller("testCtrl", function($scope){
		$scope.material = "Javascript";
	})
</script>
</html>

Custom directive yang kita buat akan menampilkan “Javascript Lesson!” di bagian yang telah kita deklarasikan. Lalu, perlu diketahui bahwa naming convention di AngularJS menggunakan aturan lowerCamelCase sehingga huruf pertama pada kata kedua menggunakan huruf kapital.

Property restrict ‘EA’ berfungsi untuk mendeklarasikan bahwa directive my-directive hanya boleh digunakan sebagai Element Directive dan Attribute Directive. Jika ingin menggunakan my-directive sebagai Comment Directive, berarti kita tinggal menambahkan simbol M, sehingga menjadi : EAM.

Secara default, jika property restrict tidak dibuat maka custom directive kita hanya dapat digunakan pada mode EA.

Jika ada pertanyaan yang kurang jelas silahkan berkomentar di bawah. Atau, jika ingin request tutorial juga dapat ke halaman ini. Dukung terus Mahir Koding agar dapat selalu mengupdate artikel dengan share dan like artikel ini. Terima Kasih.