Belajar AngularJS : Menggunakan Ekspresi dan Contohnya Pada AngularJS Part 1

Ekspresi pada AngularJS ditulis dengan {{ ekspresi }} selain itu juga bisa diulis dengan perintah ng-bind ="ekspresi" . Dalam ekspresi ini kalian bisa mengisinya dengan literal, operator aritmatika (+, -, /, *). Langsung saja kita buat contohnya dengan menggunakan operator aritmatika.

Operator Aritmatika
Contoh Hasil AngularJS Operator Aritmatika
Untuk codenya silahkan kalian lihat dibawah ini:

<!DOCTYPE html>
<html>
<head>
<title>Ekspresi dalam fungsi Aritmatika</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p> Penjumlahan 5 + 5 = {{ 5+ 5 }}</p>
<p> Pengurangan 5 - 5 = {{ 5-5 }}</p>
<p> Pembagian 5 : 5 = {{ 5/5 }}</p>
<p> Perkalian 5 * 5 = {{ 5 * 5 }}</p>
</div>
</body>
</html>
Baca Juga : Belajar AngularJS Perkenalan dan Cara Install AngularJS
Selanjutnya kita coba membuatka style untuk hasil operator aritmatika di atas, kita wadahi dalam div dimana div tersebut warnanya bisa diganti-ganti berdasarkan warna yang diinput oleh user.
Contoh gambarnya seperti dibwah ini:
Ekspresi pada AngularJS
Contoh penggunaan ng-init Angular JS
 untuk code nya bisa sobat lihat di bawah ini, saya rasa enggak perlu dijelasin silahkan kalian pahami sendiri code nya :
<!DOCTYPE html>
<html>
<head>
<title>Ekspresi dalam fungsi Aritmatika</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="warna='white'">
<input type="text" ng-model="warna" placeholder="masukkan warna disini..">
<div style="background-color: {{warna}}; width: 300px;">
<p> Penjumlahan 5 + 5 = {{ 5+ 5 }}</p>
<p> Pengurangan 5 - 5 = {{ 5-5 }}</p>
<p> Pembagian 5 : 5 = {{ 5/5 }}</p>
<p> Perkalian 5 * 5 = {{ 5 * 5 }}</p>
</div>
</div>
</body>
</html>

Keterangan Fungsi :
ng-init ng-init berfungsi untuk menampung nilai default, selain itu biasa digunakan untuk mengetahui nilai ekspresi secara realtime

Perhatikan source code pada bagian 2, kita bisa memberi nilai pada CSS menggunakan ekspresi yang terdapat pada AngularJS, bagi kalian yang suka web disain sangat cocok digunakan untuk mengganti gambar secara dinamis. Jadi klien bisa memilih tanpa kita masuk ke source code.

Artikel Terkait


EmoticonEmoticon