Skip to main content
Pengenalan AngularJS

Belajar Angular JS Cara Memahami Directive dan Data Binding

Masih kita membahas tentang Belajar Angular JS ,kali ini kita buat kelanjutan nya yaitu tentang Belajar Angular JS Cara Memahami Directive dan Data Binding. Seperti pada pemabahasan awal mengenal AngularJS, kita akan melanjutkan pembahasan berikutnya agar lebih terfokus untuk mempelajari AngularJS.

Baca : Belajar Awal AngularJS

Topik Pembahasan:

  • Mengenal Directive
  • Mengenal Data Binding
  • Contoh Source Code

PENGENALAN DIRECTIVE ANGULAR JS

sekilas Directive adalah penanda pada elemen Data Object Modelling (DOM) seperti attribut, nama element, atau kelas Cascading Style Sheet (CSS). Penggunaan nya dalam AngularJS, bisa dilakukan Custom. Untuk lebih jelas tentang Directive Coba kita lihat dari contoh Script berikut :

<html data-ng-app><head>

<script src=”lib/angular.js”</script></head>

<body>

<div><label>Nama:</label><input type=”text” data-ng-model=”nama”/>

<hr><h1>Hai apa kabar {{nama}}</h1></div>

</body></html>

Pada contoh sederhana script diatas, Yang saya tebalkan dan beri warna merah merupakan standar penggunaan directive dasar. Berikut pembahasan nya tentang Directive :

  • Source code “data-ng-app” atau bisa juga ditulis dengan “ng-app” (tanpa data). Script ini berfungsi agar AngularJS berjalan pada blok elemen dimana angular directive “ng-app” ini berada pada element <hml>, artinya semua yang ada pada blok <html> bisa menggunakan Angular, jadi setiap kali kita melihat “ng-” maka itu merupakan directive bawaan angular.
  • Script kode “{{nama}}” ini merupakan data binding Expression, akan kita bahas selanjutnya.

PENGENALAN DATA BINDING ANGULAR JS

Data Binding adalah Sinkronisasi data secara otomatis antara data model dengan View, setiap kali kita melakukan perubahan pada model maka otomatis view akan berubah dan begitu juga sebaliknya ketika View berubah, maka model akan otomatis ikut berubah. Lihat ilustrasi pada gambar berikut:

Belajar Framework Angular JS
Cara Kerja Data Binding Angular JS

Saya anggap itu beberapa hal untuk mengenal apa itu Directive dan Data Binding pada AngularJS. Hal tersebut saya kutip dari beberapa sumber, kemudian saya ringkaskan kembali.

Contoh Source Code Angular JS

– Source Code Contoh Directive

Seperti biasa, buka Editor anda kemudian ketikkan code berikut:

Simpan dengan nama file : directive.html

<html data-ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<body>

<div>
<label>Nama Lengkap Anda:</label><input type="text" data-ng-model="nama"/>
<label>Alamat Anda:</label><input type="text" data-ng-model="alamat"/>
<label>Nomor HP Anda:</label><input type="text" data-ng-model="hp"/>

<hr>
<h1>Nama Anda : {{nama}}</h1>
<h3>Alamat Anda :{{alamat}}</h3>
<h3>No HP Anda :{{hp}}</h3>

</div>

</body>
</html>

Penjelasan kode :

  • Untuk memanggil file AngularJS langsung via CDN
  •  Saya buatkan tiga buah data Inputan dengan menggunakan “<input type=”text”>” setiap inputan saya beri nama yang berbeda dengan menggunakan AngularJS (Directive) yaitu : data-ng-model=”nama”, data-ng-model=”alamat” dan data-ng-model=”hp”.
  • Selanjutnya memanggil data nilai inputan menggunakan Data Binding : Nama Anda : {{nama}} , Alamat Anda : {{alamat}}, dan Nomor HP Anda : {{hp}}

Selanjutnya coba kita jalankan via Browser hasil nya adalah :

Belajar Framework Angular JS
Demo Directive AngularJS

– Source Code Contoh Data Binding

Ketikkan Source code berikut di Editor :

simpan dengan nama : binding.html


<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">
{{counter}} - {{status}}
<br>
<button ng-click="stop()">STOP</button>
</body>
</html>

<script type="text/javascript">
function MainCtrl($scope, $timeout){
$scope.counter=0;
$scope.status='Bilangan Genap';
$scope.onTimeout=function(){
$scope.counter++;
$scope.counter=$scope.counter == 10 ? 0 : $scope.counter;
$scope.status = $scope.counter %2 == 0 ?
'Bilangan Genap' : 'Bilangan Ganjil';
mytimeout = $timeout($scope.onTimeout,1000);
};
var mytimeout = $timeout($scope.onTimeout,1000);
$scope.stop=function(){
$timeout.cancel(mytimeout);
};
}
</script>
<p style="text-align: justify;">

Coba jalankan di Browser dan lihat hasilnya.

Facebook Comments

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

More Posts - Website

Follow Me:
TwitterFacebookYouTube

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

  • Achmad Setiaman

    Bapak admin untuk script yang terakhir kenapa hasil di browser saya begini ???

    Dari yang saya baca kalau misalnya data binding itu menampilkan output yang berasal dari data (contohnya javascript)