Ekspresi AngularJS: Array, Objek, $eval, String

Oleh: James Hartman James Hartman
Hours Updated

⚡ Ringkasan Cerdas

Ekspresi AngularJS adalah fragmen kode yang ditempatkan di dalam tanda kurung kurawal ganda yang mengikat data langsung ke dalam template. Ekspresi ini mengevaluasi angka, string, objek, dan array, dan fungsi $eval melakukan evaluasi yang sama dari dalam controller.

  • 🧩 Sintaks Pengikatan: Double Tanda kurung kurawal menampilkan nilai di tempat ekspresi berada, memberikan hasil yang sama dengan direktif ng-bind.
  • 🔢 Jenis yang Didukung: Numbers, senar, JavaObjek skrip yang diakses dengan notasi titik, dan array yang diakses berdasarkan indeks semuanya dievaluasi dengan benar.
  • ️ Variabel Inline: Direktif ng-init mendeklarasikan variabel tingkat tampilan yang kemudian dapat dibaca oleh ekspresi tanpa memerlukan pengontrol.
  • 🛡️ Evaluasi yang Memaafkan: Properti yang tidak terdefinisi akan menghasilkan undefined alih-alih melempar ReferenceError secara langsung. JavaSkrip akan meningkat.
  • 🚫 Batasan Keras: Perulangan, pengecualian, deklarasi fungsi, ekspresi reguler, serta operator koma dan void tidak tersedia.
  • ⚙️ Evaluasi Pengontrol: $scope.$eval mengevaluasi string ekspresi dalam kode controller dan menampilkan hasilnya ke view.
  • ⚠️ Status Dukungan: AngularJS mencapai akhir masa pakainya pada 31 Desember 2021 dan tidak menerima pembaruan keamanan lebih lanjut.
Baca Selengkapnya

Ekspresi AngularJS

Apa itu Ekspresi AngularJS?

Ekspresi adalah variabel yang ditulis di dalam kurung kurawal ganda. {{ }}. Fitur ini sangat umum digunakan dalam AngularJS, dan muncul di sepanjang tutorial sebelumnya dalam seri ini.

⚠️ Pemberitahuan dukungan: AngularJS telah mencapai akhir hayat pada 31 Desember 2021 dan tidak menerima patch atau perbaikan keamanan lebih lanjut. Sintaks di bawah ini tetap akurat untuk memelihara aplikasi AngularJS 1.x yang sudah ada; proyek baru harus menggunakan versi modern. Kaku, di mana tanda kurung interpolasi masih ada tetapi ng-init ke $eval jangan.

Jelaskan Ekspresi AngularJS dengan sebuah contoh.

Ekspresi AngularJS ditulis di dalam kurung kurawal ganda, seperti pada {{expression}}.

sintaks: Contoh sederhana dari sebuah ekspresi adalah {{5 + 6}}.

Ekspresi AngularJS mengikat data ke HTML dengan cara yang sama seperti direktif ng-bind, dan AngularJS menampilkan data tepat di tempat ekspresi tersebut ditempatkan.

Dalam contoh ini, kita menunjukkan penjumlahan sederhana angka sebagai sebuah ekspresi.

Ekspresi AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="">
        Addition : {{6+9}}
    </div>

</body>
</html>

Code Penjelasan:

  1. Direktif ng-app kosong, yang berarti tidak ada modul yang menyediakan controller. arahan, atau layanan ke halaman ini.
  2. Ekspresi sederhana menjumlahkan dua angka.

Keluaran:

Ekspresi AngularJS

Penjumlahan antara 9 dan 6 dilakukan dan hasilnya, 15, ditampilkan.

AngularJS Numbers

Ekspresi bekerja dengan angka. Contoh ini mengalikan dua variabel angka, margin ke profit, dan menampilkan produk tersebut.

AngularJS Numbers

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/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>

Code Penjelasan:

  1. Direktif ng-init mendefinisikan variabel dan nilainya di dalam tampilan itu sendiri, mirip dengan variabel lokal di aplikasi mana pun. bahasa pemrograman. di sini margin ke profit dinyatakan dan ditetapkan.
  2. Ekspresi tersebut kemudian mengalikan kedua variabel lokal tersebut.

Keluaran:

AngularJS Numbers

Perkalian antara 2 dan 200 dilakukan dan hasilnya, 400, ditampilkan.

String AngularJS

Ekspresi juga berfungsi dengan string. Contoh ini mendefinisikan firstName ke lastName dan menampilkan keduanya.

String AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/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>

Code Penjelasan:

  1. Direktif ng-init mendefinisikan firstName dengan nilai “Guru"Dan lastName dengan nilai “99”.
  2. Ekspresi {{firstName}} ke {{lastName}} Baca variabel-variabel tersebut dan tampilkan di tampilan.

Keluaran:

String AngularJS

Kedua nilai tersebut muncul di layar.

ARTIKEL TERKAIT

Objek AngularJS

Ekspresi bekerja dengan JavaNaskah objek, yang terdiri dari pasangan nama-nilai. Sintaks dari sebuah JavaObjek skrip terlihat seperti ini:

var car = {type: "Ford", model: "Explorer", color: "White"};

Contoh ini mendefinisikan sebuah person objek yang menyimpan dua pasangan kunci-nilai, firstName ke lastName.

Objek AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/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>

Code Penjelasan:

  1. Direktif ng-init mendefinisikan objek tersebut. person dengan pasangan kunci-nilai firstName diatur ke “Guru"Dan lastName diatur ke “99”.
  2. Ekspresi {{person.firstName}} ke {{person.lastName}} Bacalah anggota-anggota tersebut. Karena mereka termasuk dalam objek, notasi titik diperlukan untuk mendapatkan nilainya.

Keluaran:

Objek AngularJS

Nilai-nilai firstName ke lastName muncul di layar.

Array AngularJS

Ekspresi bekerja dengan array. Contoh ini mendefinisikan array yang menyimpan nilai siswa dalam tiga mata pelajaran dan menampilkan setiap nilainya.

Array AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/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]}}
</div>

</body>
</html>

Code Penjelasan:

  1. Direktif ng-init mendefinisikan array marks dengan tiga nilai yaitu 1, 15, dan 19.
  2. Ekspresi berbentuk marks[index] Baca setiap elemennya.

Keluaran:

Array AngularJS

Nilai yang ditentukan dalam larik akan ditampilkan.

Kemampuan dan Keterbatasan Ekspresi AngularJS

Kemampuan

  1. Ekspresi AngularJS menyerupai JavaEkspresi skrip memiliki banyak kekuatan dan fleksibilitas yang sama.
  2. Where JavaSkrip akan menimbulkan ReferenceError atau TypeError pada properti yang tidak terdefinisi, namun evaluasi AngularJS bersifat toleran dan menghasilkan undefined atau null.
  3. Filter dapat diterapkan di dalam ekspresi untuk memformat data sebelum ditampilkan.
  4. Operator ternary didukung, jadi {{ isReady ? 'Yes' : 'No' }} adalah benar.

keterbatasan

  1. Perulangan dan penanganan pengecualian tidak dapat digunakan di dalam ekspresi AngularJS. Logika kondisional terbatas pada operator ternary; if Pernyataan tidak tersedia.
  2. Fungsi tidak dapat dideklarasikan dalam sebuah ekspresi, bahkan di dalam direktif ng-init sekalipun.
  3. Ekspresi reguler tidak dapat dibuat di dalam ekspresi. Ekspresi reguler adalah kombinasi simbol dan karakter yang digunakan untuk mencocokkan string, seperti .*\.txt$, dan literal semacam itu ditolak.
  4. Operator koma (,) Dan void Operator tidak diizinkan.

ng-bind vs Kurung Kurawal Ekspresi: Mana yang Harus Digunakan

Double Tanda kurung kurawal dan direktif ng-bind menghasilkan output yang sama, sehingga pilihan di antara keduanya tampak sembarangan. Padahal tidak. Keduanya berperilaku berbeda pada saat sebelum AngularJS selesai memuat, dan perbedaan itu terlihat oleh orang yang menggunakan halaman tersebut.

Aspek {{ expression }} ng-bind
Ditulis dalam Konten elemen Atribut elemen
Sebelum AngularJS dimuat Kawat gigi mentah muncul di layar. Tidak ada yang ditampilkan
minat Lebih tinggi — nilainya sejajar Lebih rendah — nilai tersembunyi dalam atribut
Beberapa nilai per elemen Ya Tidak, hanya satu jilid saja
Pengikatan satu kali Ya dengan {{::value}} Ya dengan ng-bind="::value"

Kemunculan singkat tanda kurung kurawal mentah dikenal sebagai kilatan konten yang tidak diinterpolasi, dan itu terjadi karena browser merender markup sebelum AngularJS mengompilasinya. Gunakan ng-bind, atau tambahkan direktif ng-cloak, untuk konten yang terlihat di bagian atas halaman. Tanda kurung kurawal tetap menjadi pilihan yang lebih jelas dan mudah dibaca di tempat lain, terutama di mana beberapa nilai muncul di dalam satu elemen.

Perbedaan antara ekspresi dan $eval

The $eval Fungsi ini mengevaluasi ekspresi dari dalam controller. Ekspresi dievaluasi di view, sedangkan $eval dievaluasi dalam kode pengontrol.

Contoh ini menggunakan $eval untuk menambahkan dua angka dan menempatkan hasilnya pada objek cakupan sehingga tampilan dapat menampilkannya.

Perbedaan antara ekspresi dan $eval

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.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>

Code Penjelasan:

  1. Dua variabel cakupan, a ke b, masing-masing memiliki nilai 1.
  2. $scope.$eval mengevaluasi penjumlahan mereka dan menetapkan hasilnya ke variabel cakupan. value.
  3. Tampilan kemudian menampilkan value.

Keluaran:

Perbedaan antara ekspresi dan $eval

Output tersebut menunjukkan ekspresi yang dievaluasi di dalam pengawas, dengan jumlah dari kedua variabel cakupan yang dikirim ke dan ditampilkan di tampilan.

Pertanyaan Umum Demo Slot

Menambahkan dua titik dua di depan suatu ungkapan, seperti pada {{::name}}, berhenti memantau setelah suatu nilai terselesaikan. Ini menghapus pengawas dan menurunkan biaya digest pada halaman dengan banyak pengikatan statis.

$eval mengevaluasi string secara langsung terhadap cakupan. $parse Mengembalikan fungsi yang dapat digunakan kembali untuk evaluasi berulang. $interpolate menangani seluruh string templat yang berisi tanda kurung kurawal, bukan hanya satu ekspresi.

Kebanyakan. AI Tools mempertahankan tanda kurung kurawal dan menulis ulang filter sebagai tanda pipa, tetapi variabel ng-init tidak memiliki padanan di Angular dan harus dipindahkan ke kelas komponen secara manual.

Alat AI memindai templat untuk panggilan fungsi di dalam pengikatan, yang dijalankan ulang pada setiap siklus pencernaan, dan menyarankan untuk menyimpan hasil dalam cakupan atau beralih ke pengikatan satu kali.

Evaluasi AngularJS memang sengaja dibuat toleran. Properti yang hilang akan menghasilkan undefined, yang kemudian dirender sebagai string kosong, sehingga nilai kosong biasanya berarti kesalahan pengetikan pada jalur properti, bukan kesalahan saat runtime.

Ringkaslah postingan ini dengan: