Ekspresi AngularJS: ARRAY, Objek, $eval, Strings [Contoh]
James Hartman
Apa itu Ekspresi Angular JS?
Ekspresi adalah variabel yang didefinisikan dalam kurung kurawal ganda {{ }}. Ekspresi sangat umum digunakan dalam Angular JS, dan Anda akan melihatnya dalam tutorial kami sebelumnya.
Jelaskan Ekspresi Angular.js dengan sebuah contoh
Ekspresi AngularJS adalah ekspresi yang ditulis di dalam kurung kurawal ganda {{expression}}.
sintaks:
Contoh sederhana dari ekspresi adalah {{5 + 6}}.
Ekspresi Angular.JS digunakan untuk mengikat data ke HTML dengan cara yang sama seperti direktif ng-bind. AngularJS menampilkan data tepat di tempat ekspresi ditempatkan.
Mari kita lihat contoh ekspresi Angular.JS.
Dalam contoh ini, kami hanya ingin menampilkan penjumlahan angka sederhana sebagai ekspresi.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="">
Addition : {{6+9}}
</div>
</body>
</html>
Penjelasan Kode:
- Arahan ng-app dalam contoh kita kosong seperti yang ditunjukkan pada gambar di atas. Ini hanya berarti bahwa tidak ada modul untuk menetapkan pengontrol, arahan, layanan yang dilampirkan pada kode.
- Kami menambahkan ekspresi sederhana yang terlihat pada penjumlahan 2 angka.
Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
Dari keluarannya,
- Terlihat terjadi penjumlahan dua angka 9 dan 6 dan ditampilkan nilai tambah 15.
Sudut.JS Numbers
Ekspresi juga dapat digunakan untuk bekerja dengan angka. Mari kita lihat contoh ekspresi Angular.JS dengan angka.
Dalam contoh ini, kami hanya ingin menampilkan perkalian sederhana dari 2 variabel angka yang disebut margin dan profit serta menampilkan nilai perkaliannya.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="margin=2;profit=200">
Total profit margin
{{margin*profit}}
</div>
</body>
</html>
Penjelasan Kode:
- Direktif ng-init digunakan di angle.js untuk mendefinisikan variabel dan nilainya yang terkait dalam tampilan itu sendiri. Ini seperti mendefinisikan variabel lokal untuk dikodekan di mana pun bahasa pemrograman. Dalam hal ini, kita mendefinisikan 2 variabel yang disebut margin dan keuntungan dan memberikan nilai padanya.
- Kami kemudian menggunakan 2 variabel lokal dan mengalikan nilainya.
Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
Dari keluarannya,
- Terlihat jelas bahwa terjadi perkalian 2 angka 2 dan 200, dan ditampilkan nilai perkalian 400.
String AngularJS
Ekspresi juga dapat digunakan untuk bekerja dengan string. Mari kita lihat contoh ekspresi Angular JS dengan string.
Dalam contoh ini, kita akan mendefinisikan 2 string “firstName” dan “lastName” dan menampilkannya menggunakan ekspresi yang sesuai.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="firstName='Guru';lastName='99'">
First Name : {{firstName}}<br>
last Name : {{lastName}}
</div>
</body>
</html>
Penjelasan Kode:
- Direktif ng-init digunakan untuk mendefinisikan variabel firstName dengan nilai “Guru” dan variabel lastName dengan nilai “99”.
- Kami kemudian menggunakan ekspresi {{firstName}} dan {{lastName}} untuk mengakses nilai variabel ini dan menampilkannya dalam tampilan yang sesuai.
Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
Dari outputnya terlihat jelas bahwa nilai FirstName dan LastName ditampilkan di layar.
Objek Angular.JS
Ekspresi dapat digunakan untuk bekerja JavaNaskah objek juga.
Mari kita lihat contoh ekspresi Angular.JS dengan objek javascript. Objek javascript terdiri dari pasangan nama-nilai.
Di bawah ini adalah contoh sintaks objek javascript.
sintaks:
var car = {type:"Ford", model:"Explorer", color:"White"};
Dalam contoh ini, kita akan mendefinisikan satu objek sebagai objek orang yang akan memiliki 2 pasangan nilai kunci “Nama Depan” dan “Nama Belakang”.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">
First Name : {{person.firstName}}<br>
Last Name : {{person.lastName}}
</div>
</body>
</html>
Penjelasan Kode:
- Direktif ng-init digunakan untuk mendefinisikan objek orang yang pada gilirannya memiliki pasangan nilai kunci FirstName dengan nilai “Guru” dan variabel LastName dengan nilai “99”.
- Kami kemudian menggunakan ekspresi {{person.firstName}} dan {{person.secondName}} untuk mengakses nilai variabel ini dan menampilkannya dalam tampilan yang sesuai. Karena variabel anggota sebenarnya adalah bagian dari objek orang, mereka harus mengaksesnya dengan notasi titik (.) untuk mengakses nilai sebenarnya.
Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
Dari keluarannya,
- Terlihat jelas bahwa nilai “firstName” dan “secondName” ditampilkan di layar.
Array AngularJS
Ekspresi juga dapat digunakan untuk bekerja dengan array. Mari kita lihat contoh ekspresi Angular JS dengan array.
Dalam contoh ini, kita akan mendefinisikan sebuah array yang akan menampung nilai siswa dalam 3 mata pelajaran. Dalam tampilan, kami akan menampilkan nilai tanda tersebut sesuai.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="" ng-init="marks=[1,15,19]">
Student Marks<br>
Subject1 : {{marks[0] }}<br>
Subject2 : {{marks[1] }}<br>
Subject3 : {{marks[2] }}<br>
</div>
</body>
</html>
Penjelasan Kode:
- Direktif ng-init digunakan untuk mendefinisikan array dengan nama “marks” dengan 3 nilai 1, 15 dan 19.
- Kami kemudian menggunakan ekspresi tanda [indeks] untuk mengakses setiap elemen array.
Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
Dari outputnya terlihat jelas bahwa tanda-tanda yang ditampilkan ditentukan dalam array.
Kemampuan dan Keterbatasan Ekspresi AngularJS
Kemampuan Ekspresi Angular.JS
- Ekspresi sudutnya seperti JavaEkspresi skrip. Oleh karena itu, ia memiliki kekuatan dan fleksibilitas yang sama.
- In JavaScript, saat Anda mencoba mengevaluasi properti yang tidak terdefinisi, akan menghasilkan ReferenceError atau TypeError. Dalam Angular, evaluasi ekspresi bersifat pemaaf dan menghasilkan undefined atau null.
- Seseorang dapat menggunakan filter dalam ekspresi untuk memformat data sebelum menampilkannya.
Batasan Ekspresi JS Sudut
- Saat ini tidak ada ketersediaan untuk menggunakan kondisional, loop, atau pengecualian dalam ekspresi Angular
- Anda tidak dapat mendeklarasikan fungsi dalam ekspresi Angular, bahkan di dalam direktif ng-init.
- Seseorang tidak dapat membuat ekspresi reguler dalam ekspresi Angular. Ekspresi reguler adalah kombinasi simbol dan karakter, yang digunakan untuk mencari string seperti .*\.txt$. Ekspresi seperti itu tidak dapat digunakan dalam ekspresi Angular JS.
- Selain itu, seseorang tidak dapat menggunakan, atau membatalkan ekspresi Angular.
Perbedaan antara ekspresi dan $eval
Fungsi $eval memungkinkan seseorang untuk mengevaluasi ekspresi dari dalam pengontrol itu sendiri. Jadi, ketika ekspresi digunakan untuk evaluasi dalam tampilan, $eval digunakan dalam fungsi pengontrol.
Mari kita lihat contoh sederhana mengenai hal ini.
Dalam contoh ini,
Kita hanya akan menggunakan fungsi $eval untuk menambahkan 2 angka dan membuatnya tersedia di objek cakupan sehingga dapat ditampilkan dalam tampilan.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div ng-app="sampleApp" ng-controller="AngularController">
<h1> Guru99 Global Event</h1>
{{value}}
</div>
<script>
var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('AngularController',function($scope){
$scope.a=1;
$scope.b=1;
$scope.value=$scope.$eval('a+b');
});
</script>
</body>
</html>
Penjelasan Kode:
- Pertama-tama kita mendefinisikan 2 variabel 'a' dan 'b', masing-masing memiliki nilai 1.
- Kami menggunakan fungsi $scope.$eval untuk mengevaluasi penambahan 2 variabel dan menugaskannya ke 'nilai' variabel cakupan.
- Kami kemudian hanya menampilkan nilai variabel 'nilai' dalam tampilan.
Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
Keluaran di atas menunjukkan keluaran ekspresi yang dievaluasi di pengawas. Hasil di atas menunjukkan bahwa ekspresi $eval digunakan untuk melakukan penambahan 2 variabel cakupan 'a dan b' dengan hasilnya dikirim dan ditampilkan dalam tampilan.
Kesimpulan
- Kita telah melihat bagaimana ekspresi dalam JS sudut dapat digunakan untuk mengevaluasi secara teratur JavaEkspresi seperti skrip, misalnya penjumlahan angka sederhana.
- Direktif ng-init dapat digunakan untuk mendefinisikan variabel sebaris yang dapat digunakan dalam tampilan.
- Ekspresi dapat dibuat untuk bekerja dengan tipe primitif seperti string dan angka.
- Ekspresi juga dapat digunakan untuk bekerja dengan tipe lain seperti JavaObjek dan array skrip.
- Ekspresi di Angular JS memang memiliki beberapa keterbatasan seperti misalnya tidak memiliki ekspresi reguler atau menggunakan fungsi, loop, atau pernyataan kondisional.
