Mengenal AngularJS Expressions

AngularJS, sebagai kerangka kerja JavaScript, memperkenalkan konsep ekspresi yang memungkinkan pengembang untuk mengevaluasi nilai dalam tampilan web. Ekspresi dalam AngularJS merupakan kode JavaScript ringkas yang ditempatkan di dalam tanda kurung kurawal ganda ({{}}) pada dokumen HTML. Mereka memberikan cara yang mudah untuk memanipulasi data dan menampilkan informasi secara dinamis kepada pengguna.

Dasar-dasar Ekspresi AngularJS

1. Penyisipan Nilai Variabel

Ekspresi memungkinkan Anda untuk menyisipkan nilai variabel ke dalam dokumen HTML:

htmlCopy code

<p>{{ nama }}</p>

Variabel nama akan digantikan dengan nilai yang sesuai saat halaman di-render.

2. Evaluasi Ekspresi Aritmatika dan Logika

Ekspresi AngularJS dapat melakukan operasi aritmatika dan logika secara langsung di dalam tampilan:

htmlCopy code

<p>{{ harga * jumlah }}</p> <p>{{ status === 'aktif' ? 'Online' : 'Offline' }}</p>

3. Panggilan Fungsi

Anda dapat memanggil fungsi dari dalam ekspresi untuk melakukan operasi lebih kompleks:

htmlCopy code

<p>{{ hitungTotal(harga, jumlah) }}</p>

Hal-hal yang Perlu Diperhatikan

1. Tidak Mengizinkan Penggunaan Ekspresi yang Berpotensi Berbahaya

AngularJS dengan sengaja membatasi ekspresi untuk mencegah eksekusi kode berbahaya (seperti eksekusi fungsi). Ini membantu mencegah serangan XSS (Cross-Site Scripting).

2. Ringkas dan Mudah Dibaca

Ekspresi dirancang untuk menjadi ringkas, mudah dibaca, dan mempermudah penggunaan variabel, operasi matematika, dan pemanggilan fungsi langsung di dalam tampilan.

Penggunaan Ekspresi dalam Aplikasi AngularJS

Ekspresi digunakan luas dalam menghubungkan data model ke tampilan. Mereka memungkinkan aplikasi web untuk menjadi dinamis, dengan konten yang berubah saat data yang mendasarinya berubah.

Contoh penggunaan ekspresi dalam AngularJS Controller:

javascriptCopy code

app.controller('MainCtrl', function($scope) { $scope.nama = 'John Doe'; $scope.harga = 50; $scope.jumlah = 2; $scope.hitungTotal = function(harga, jumlah) { return harga * jumlah; }; });

Dalam tampilan HTML:

htmlCopy code

<div ng-controller="MainCtrl"> <p>Nama: {{ nama }}</p> <p>Total: {{ hitungTotal(harga, jumlah) }}</p> </div>

Kesimpulan

Ekspresi adalah fitur fundamental dalam AngularJS yang memungkinkan pengembang untuk menampilkan data dengan dinamis dalam tampilan HTML. Mereka memberikan cara sederhana untuk memanipulasi nilai variabel, melakukan operasi matematika, dan memanggil fungsi langsung di dalam kode HTML, menjadikan tampilan web lebih interaktif dan responsif.