Table of Content
Expressions
Angular Expressions atau biasa disebut Expression merupakan kode ‘mirip’ Javascript yg dapat disisipkan ke html untuk menampilkan output tertentu. Expression dapat berisikan output data langsung, operasi perhitungan aritmatika serta penggunaan variabel.
Format penulisan :
{{ expression }}Expression dapat diletakkan pada tag html sebagai nilai dari atribut.
<span title="{{ expression }}"></span>Penerapan Expressions
String in Action
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
{{ 'Halo' }}
</body>
</html>Menggabungkan Beberapa String
Operasi penggabungan string (concenate) dapat dilakukan menggunakan tanda + (plus).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
{{ 'Halo ' + 'Andaru' }}
</body>
</html>Menggunakan Expression dan Tag Html
Tag HTML dapat digunakan untuk melakukan format sederhana pada expression.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
<h1>{{ 'Halo ' + 'Andaru' }}</h1>
</body>
</html>Melakukan Format Expression Bertipe String
Sebagai contoh kita akan menggunakan fungsi js seperti .toUpperCase() dan .toLowerCase()
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
<h1>{{ 'Halo'.toUpperCase() }}</h1>
<h2>{{ 'Andaru Triadi'.toLowerCase() }}</h2>
</body>
</html>Directive ngBind
Selain dengan Expression untuk menghasilkan nilai output juga dapat dilakukan menggunakan directive ngBind sebagai atriut tag html.
Format Penulisan :
<p ng-bind="'expression'"></p>Note : Gunakan single quotes atau atau double quotes
Expression ini dapat berupa : string, numerik, array, operasi aritmatika, dan lain-lain.
Format String Pada ngBind
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
<p ng-bind='"Human"'></p>
</body>
</html>Penggunaan dan Pengolahan Variabel
Variabel merupakan suatu besaran yg mewakili nilai tertentu yg dapat diubah-ubah.
Mengenal Directive ngInit
Directive ngInit merupakan directive dalam AngularJS yg bertugas menginisialisasi suatu nilai dalam lingkup tertentu
Dalam beberapa kasus lebih disarankan untuk menggunakan Controller untuk keperluan inisialisasi
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
<h1>Latihan AngularJS</h1>
<div ng-init="nama ='Andaru'"></div>
<p>{{ nama }}</p>
</body>
</html>Multi Variabel di ngInit
Directive ngInit juga mampu menampung lebih dari satu variabel dalam sekali inisialisasi.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
<h1>Latihan AngularJS</h1>
<div ng-init="nama ='Andaru'; umur = 22"></div>
<p>{{ nama }}, {{ umur+' Tahun' }}</p>
</body>
</html>Looping Menggunakan ngRepeat
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
<h1>Latihan AngularJS</h1>
<div ng-init="nama = ['Andaru','Bagus','Dimas','Fahri']"></div>
<ul>
<li ng-repeat="nm in nama">{{ nm }}</li>
</ul>
</body>
</html>