Apa itu Angular JS Expressions?
Ekspresi adalah variabel yang ditentukan dalam tanda kurung kurawal ganda {{}}. Mereka sangat umum digunakan dalam Angular JS, dan Anda akan melihatnya di tutorial kami sebelumnya.
Dalam tutorial ini, Anda akan belajar-
- Jelaskan Ekspresi Angular.js dengan contoh
- Nomor AngularJS
- AngularJS Strings
- Objek AngularJS
- AngularJS Array
- Kemampuan dan Batasan AngularJS Expression
- Perbedaan antara ekspresi dan $ eval
Jelaskan Ekspresi Angular.js dengan sebuah contoh
Ekspresi AngularJS adalah ekspresi yang ditulis di dalam tanda kurung kurawal {{ekspresi}}.
Sintaksis:
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 menunjukkan penambahan angka sederhana sebagai ekspresi.
Event Registration Guru99 Global Event
Addition : {{6+9}}
Penjelasan Kode:
- Arahan ng-app dalam contoh kami kosong seperti yang ditunjukkan pada gambar di atas. Ini hanya berarti bahwa tidak ada modul untuk menetapkan pengontrol, arahan, layanan yang dilampirkan ke kode.
- Kami menambahkan ekspresi sederhana yang melihat penambahan 2 angka.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari keluarannya,
- Terlihat bahwa penjumlahan dua angka 9 dan 6 terjadi dan ditampilkan nilai tambah 15.
Angular.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 menunjukkan perkalian sederhana dari 2 variabel angka yang disebut margin dan profit dan menampilkan nilai kelipatannya.
Event Registration Guru99 Global Event
Total profit margin{{margin*profit}}
Penjelasan Kode:
- Direktif ng-init digunakan di angular.js untuk mendefinisikan variabel dan nilainya yang sesuai dalam tampilan itu sendiri. Ini seperti mendefinisikan variabel lokal untuk dikodekan dalam bahasa pemrograman apa pun. Dalam hal ini, kami mendefinisikan 2 variabel yang disebut margin dan laba dan memberikan nilai padanya.
- Kami kemudian menggunakan 2 variabel lokal dan mengalikan nilainya.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari keluarannya,
- Terlihat jelas bahwa perkalian dari 2 angka 2 dan 200 terjadi, dan ditampilkan nilai perkalian 400.
AngularJS Strings
Ekspresi juga dapat digunakan untuk bekerja dengan string. Mari kita lihat contoh ekspresi JS Angular dengan string.
Dalam contoh ini, kita akan mendefinisikan 2 string "firstName" dan "lastName" dan menampilkannya menggunakan ekspresi yang sesuai.
Event Registration Guru99 Global Event
First Name : {{firstName}}
last Name : {{lastName}}
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 dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari hasil keluaran terlihat jelas bahwa nilai firstName dan lastName ditampilkan di layar.
Objek Angular.JS
Ekspresi juga dapat digunakan untuk bekerja dengan objek JavaScript.
Mari kita lihat contoh ekspresi Angular.JS dengan objek javascript. Objek javascript terdiri dari pasangan nama-nilai.
Di bawah ini adalah contoh sintaks dari objek javascript.
Sintaksis:
var car = {type:"Ford", model:"Explorer", color:"White"};
Dalam contoh ini, kita akan mendefinisikan satu objek sebagai objek person yang akan memiliki 2 pasangan nilai kunci "firstName" dan "lastName".
Event Registration Guru99 Global Event
First Name : {{person.firstName}}
Last Name : {{person.lastName}}
Penjelasan Kode:
- Direktif ng-init digunakan untuk menentukan 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 orang objek, mereka harus mengaksesnya dengan notasi titik (.) Untuk mengakses nilai sebenarnya.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari keluarannya,
- Terlihat jelas bahwa nilai "firstName" dan "secondName" ditampilkan di layar.
AngularJS Array
Ekspresi juga dapat digunakan untuk bekerja dengan array. Mari kita lihat contoh ekspresi JS Angular dengan array.
Dalam contoh ini, kita akan mendefinisikan sebuah array yang akan menyimpan nilai seorang siswa dalam 3 mata pelajaran. Dalam tampilan, kami akan menampilkan nilai dari tanda ini sesuai.
Event Registration Guru99 Global Event
Student Marks
Subject1 : {{marks[0] }}
Subject2 : {{marks[1] }}
Subject3 : {{marks[2] }}
Penjelasan Kode:
- Direktif ng-init digunakan mendefinisikan array dengan nama "tanda" dengan 3 nilai 1, 15 dan 19.
- Kami kemudian menggunakan ekspresi tanda [indeks] untuk mengakses setiap elemen dari array.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari output terlihat jelas bahwa tanda-tanda yang ditampilkan, yang didefinisikan dalam array.
Kemampuan dan Batasan AngularJS Expression
Kemampuan Angular.JS Expression
- Ekspresi sudut seperti ekspresi JavaScript. Karenanya, ia memiliki kekuatan dan fleksibilitas yang sama.
- Di JavaScript, saat Anda mencoba mengevaluasi properti yang tidak ditentukan, ini menghasilkan ReferenceError atau TypeError. Di Angular, evaluasi ekspresi memaafkan dan menghasilkan nilai yang tidak ditentukan atau nol.
- Seseorang dapat menggunakan filter dalam ekspresi untuk memformat data sebelum menampilkannya.
Batasan Angular JS Expression
- 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.
- Ekspresi reguler tidak dapat dibuat dalam ekspresi Angular. Ekspresi reguler adalah kombinasi dari simbol dan karakter, yang digunakan untuk mencari string seperti. * \. Txt $. Ekspresi seperti itu tidak dapat digunakan dalam ekspresi JS Angular.
- Juga, seseorang tidak dapat menggunakan, atau membatalkan dalam ekspresi Angular.
Perbedaan antara ekspresi dan $ eval
Fungsi $ eval memungkinkan seseorang untuk mengevaluasi ekspresi dari dalam controller itu sendiri. Jadi, sementara ekspresi digunakan untuk evaluasi dalam tampilan, $ eval digunakan dalam fungsi kontroler.
Mari kita lihat contoh sederhana tentang ini.
Dalam contoh ini,
Kami hanya akan menggunakan fungsi $ eval untuk menambahkan 2 angka dan membuatnya tersedia di objek lingkup sehingga dapat ditampilkan dalam tampilan.
Event Registration Guru99 Global Event
{{value}}
Penjelasan Kode:
- Kami pertama-tama mendefinisikan 2 variabel 'a' dan 'b', masing-masing memiliki nilai 1.
- Kami menggunakan fungsi $ scope. $ Eval untuk mengevaluasi penambahan 2 variabel dan menugaskannya ke variabel lingkup 'nilai'.
- Kami kemudian hanya menampilkan nilai variabel 'nilai' dalam tampilan.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Keluaran di atas menunjukkan keluaran dari ekspresi yang dievaluasi dalam pengontrol. Hasil di atas menunjukkan bahwa ekspresi $ eval digunakan untuk melakukan penambahan 2 variabel cakupan 'a dan b' dengan hasil dikirim dan ditampilkan dalam tampilan.
Ringkasan:
- Kita telah melihat bagaimana ekspresi di Angular JS dapat digunakan untuk mengevaluasi JavaScript biasa seperti ekspresi seperti penambahan angka.
- Direktif ng-init dapat digunakan untuk mendefinisikan variabel in-line 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 objek JavaScript dan array.
- Ekspresi di Angular JS memang memiliki beberapa batasan seperti misalnya tidak boleh memiliki ekspresi reguler atau menggunakan fungsi, loop, atau pernyataan bersyarat.