Ads by Yasya El Hakim
Tutorial Lengkap AngularJS: Ekspresi (Expressions) - Bagian 2

AngularJS dapat mengikat (Binding) data ke dalam dokumen HTML dengan menggunakan Ekspresi (Expressions).




Expression pada AngularJS

Ekspresi pada AngularJS dapat ditulis dengan menggunakan dua buah buka dan tutup kurung: {{ekspresi}}.

Ekspresi pada AngularJS juga dapat ditulis dengan menggunakan Directive: ng-bind="ekspresi".

AngularJS akan menyelesaikan atau menjalankan suatu ekspresi, dan mengembalikan atau menampilkan hasilnya tepat di mana ekspresi itu ditulis.

Ekspresi pada AngularJS sangat mirip dengan ekspresi yang ada pada JavaScript: Ekspresi tersebut dapat berisi literal, operator, dan variabel.

Contoh

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Ekspresi pertamaku: {{ 5 + 5 }}</p>
</div>

</body>
</html>

Outputnya akan seperti berikut:

Ekspresi pertamaku: 10


Jika kalian menghapus directive ng-app maka HTML akan menampilkan ekspresi apa adanya:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<body>

<div>
  <p>Ekspresi pertamaku: {{ 5 + 5 }}</p>
</div>

</body>
</html>

Outputnya akan seperti berikut:

Ekspresi pertamaku: {{ 5 + 5 }}


Kalian dapat menulis suatu ekspresi di mana pun yang kalian suka karena AngularJS hanya akan menyelesaikan suatu ekspresi dan mengembalikan hasilnya.

Contoh: AngularJS akan mengubah nilai properti pada CSS.
Ubah nama warna pada kotak input di bawah ini, dan lihatlah hasilnya:


<div ng-app="" ng-init="warnaKu='lightblue'">

<input style="background-color:{{warnaKu}}" ng-model="warnaKu">

</div>

Angka pada AngularJS

Angka pada AngularJS juga sama seperti angka pada JavaScript:

<div ng-app="" ng-init="jumlah=1;biaya=5000">

<p>Jumlah: {{ jumlah * biaya }}</p>

</div> 

Berikut adalah contoh yang sama dengan menggunakan ng-bind:

<div ng-app="" ng-init="jumlah=1;biaya=5000">

<p>Jumlah: <span ng-bind="jumlah * biaya"></span></p>

</div> 

Output dari kedua contoh diatas akan seperti berikut:

Jumlah: 5000


Menggunakan ng-init tidaklah biasa. Kalian akan mempelajari cara yang lebih baik untuk menginisialisasi data pada bab selanjutnya.

String pada AngularJS

String pada AngularJS juga sama seperti String pada JavaScript:

<div ng-app="" ng-init="namaDepan='Yasya';namaBelakang='El Hakim'">

<p>Namaku adalah {{ namaDepan + " " + namaBelakang }}</p>

</div> 

Berikut adalah contoh yang sama dengan menggunakan ng-bind:

<div ng-app="" ng-init="namaDepan='Yasya';namaBelakang='El Hakim'">

<p>Namaku adalah <span ng-bind="namaDepan + ' ' + namaBelakang"></span></p>

</div> 

Output dari kedua contoh diatas akan seperti berikut:

Namaku adalah Yasya El Hakim


Objek pada AngularJS

Objek pada AngularJS juga sama seperti Objek pada JavaScript:

<div ng-app="" ng-init="orang={namaDepan:'Yasya',namaBelakang:'El Hakim'}">

<p>Namaku adalah {{ orang.namaDepan }}</p>

</div> 

Berikut adalah contoh yang sama dengan menggunakan ng-bind:

<div ng-app="" ng-init="orang={namaDepan:'Yasya',namaBelakang:'El Hakim'}">

<p>Namaku adalah <span ng-bind="orang.namaDepan"></span></p>

</div> 

Output dari kedua contoh diatas akan seperti berikut:

Namaku adalah Yasya


Array pada AngularJS

Array pada AngularJS juga sama seperti Array pada JavaScript:

<div ng-app="" ng-init="poin=[1,15,19,2,40]">

<p>Hasil ketiga adalah {{ poin[2] }}</p>

</div>

Berikut adalah contoh yang sama dengan menggunakan ng-bind:

<div ng-app="" ng-init="poin=[1,15,19,2,40]">

<p>Hasil ketiga adalah <span ng-bind="poin[2]"></span></p>

</div>

Output dari kedua contoh diatas akan seperti berikut:

Hasil ketiga adalah 19


Perbedaan Expresi AngularJS dengan JavaScript

  • Sama seperti ekspresi yang ada pada JavaScript, ekspresi pada AngularJS juga dapat berisi literal, operator, dan variabel.
  • Tidak sama seperti ekspresi yang ada pada JavaScript, ekspresi pada AngularJS dapat ditulis ke dalam dokumen HTML.
  • Ekspresi pada AngularJS tidak mendukung Conditional, loop, dan pengecualian, sedangkan ekspresi JavaScript bisa menggunakanya.
  • Ekspresi pada AngularJS mendukung filter, sedangkan ekspresi pada JavaScript tidak mendukungnya.

Sebelumnya: Tutorial Lengkap AngularJS: Pendahuluan - Bagian 1
Selanjutnya: Tutorial Lengkap AngularJS: Module - Bagian 3
Daftar Isi: Tutorial Lengkap AngularJS

0Komentar

Sebelumnya Selanjutnya