Belajar AngularJS : Menggunakan Ekspresi dan Contohnya Pada AngularJS Part 2

Diposting pada

Pada artikel sebelumnya kita sudah belajar menggunakan ekspresi pada AngularJS, sekarang kita akan melanjutkan kembali penggunaaan ekspresi pada AngularJS. Sebelum lanjut pada artikel ini, sebaiknya anda baca artikel sebelumnya.

Baca JugaBelajar AngularJS : Menggunakan Ekspresi dan Contohnya Pada AngularJS Part 1

Untuk mengingat kembali penggunaan ekspresi dan penggunaan kontroler ng-init, saya coba buat contoh kecil yaitu konversi dollar ke rupiah.

<!DOCTYPE html>
<html>
<head>
<title>Ekspresi 2</title>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
</head>
<body>
<!–Konversi Dolar –>
<div ng-app=”” ng-init=”jumlahdolar=2;hargarupiah=13300″>

<p>Total Dalam Rupiah: {{ jumlahdolar * hargarupiah }}</p>

</div>
</body>
</html>

Sebagai permulaan silahkan kalian coba biar terbiasa menggunakan AngularJS dan kontrolernya, pada contoh di atas saya deklarasikan semua nilai pada ng-init.

Pada pembelajaran sekarang kita akan menggunakan ng-bind untuk menampung sebuah ekspresi, langsung saja kita akan menggunakan 2 form input untuk menampung nilai jumlah dollar dan nilai rupiah nya. Contohnya seperti di bawah ini:
Contoh Penggunaan ng-bind pada ekspresi
Untuk source code nya silahkan pahami yang di bwah ini :

<!DOCTYPE html>
<html>
<head>
<title>Ekspresi 2</title>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
</head>
<body>
<!–Konversi Dolar –>
<div ng-app=”” ng-init=”jumlahdolar=0; nilairupiah=0″>
<input type=”number” ng-model=”jumlahdolar” placeholder=”Masukkan Jumlah Dollar..”></br></br>
<input type=”number” ng-model=”nilairupiah” placeholder=”Masukkan Harga Dollar..”></br>

<p>Jumlah Rupiah :<span ng-bind= “jumlahdolar * nilairupiah”></span></p>
</div>
</body>
</html>

 

Pada code di atas akan terlihat sekali penggunaan ng-init, untuk melihat secara signifikat perbedaanya silahkan kalian hapus kode ng-init beserta variabel yang ada didalamnya, lihat apa yang terjadi
Kenapa menggunakan ng-bind ketimbang {{}}, berdasarkan beberapa kasus penggunaan {{}} kode tersebut bisa saja terlihat oleh user saat loading halaman lambat. Selain itu, ng-bind lebih cepat dari {{}}. Maka dari itu usahakan menggunakan ng-bind untuk mengambil nilai dari form atau membuat ekspresi menggunakan ng-bind.
Contoh lainnya penggunaan {{}} dan ng-bind.
Dengan {{}} :

<div ng-app=”” ng-init=”namadepan=’Ari’;namabelakang=’Sudarma’”>

<p>Nama Lengkap : {{ namadepan+ ” ” + namabelakang }}</p>

</div>

Dengan ng-bind :

<div ng-app=”” ng-init=”namadepan=’Ari’;namabelakang=’Sudarma’”>

<p>Nama Lengkap : <span ng-bind=”namadepan + ‘ ‘ + namabelakang”></span></p>

</div>

Kesimpulan :

Secara langsung memang tidak terlihat langsung perbedaan penggunaan {{}} dan ng-bind. Namun lebih disarankan menggunakan ng-bind kalau membuat project besar agar lebih cepat dan code yang kita tulis tidak terlihat oleh user walaupun hanya sebentar.

One thought on “Belajar AngularJS : Menggunakan Ekspresi dan Contohnya Pada AngularJS Part 2

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.