Scribd
Unggah
112 tayangan8 halaman

Paper KabulKurniawan AngularJS

Angular JS adalah framework Javascript yang dirilis pada tahun 2012 oleh Google untuk membangun aplikasi web dinamis dari sisi klien. Angular JS memisahkan logika presentasi dari logika bisnis dengan menggunakan konsep MVW dan mengizinkan pengembang untuk mengikat data ke HTML, memperluas HTML, dan mengelola event melalui directive dan expression. Angular JS juga memungkinkan pengembangan form validasi, komunikasi dengan server, dan modularisasi aplikasi.

Diunggah oleh

Kabul Kurniawan
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
112 tayangan8 halaman

Paper KabulKurniawan AngularJS

Angular JS adalah framework Javascript yang dirilis pada tahun 2012 oleh Google untuk membangun aplikasi web dinamis dari sisi klien. Angular JS memisahkan logika presentasi dari logika bisnis dengan menggunakan konsep MVW dan mengizinkan pengembang untuk mengikat data ke HTML, memperluas HTML, dan mengelola event melalui directive dan expression. Angular JS juga memungkinkan pengembangan form validasi, komunikasi dengan server, dan modularisasi aplikasi.

Diunggah oleh

Kabul Kurniawan
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 8

TEKNOLOGI WEB KONTEMPORER

MENGENAL FRAMEWORK JAVASCRIPT : ANGULAR JS

Oleh : Kabul Kurniawan


13/353925/PPA/04267
A. Pendahuluan
Apa itu Angular JS?
Angular JS merupakan framework javascript yang relatif baru. Angular JS dirilis pada
tahun 2012 oleh Misko Hevery, seorang pegawai Google yang mulai mengembangkan
AngularJS pada tahun 2009. Dan ternyata ide ini sangat baik sehingga proyek inipun diambil
alih untuk dikembangkan oleh Tim Pengembangan dari Google. Angular JS merupakan
sebuah framework Javascript yang dapat ditambangkan pada Tag/Script HTML.
Angular JS meng-Extends atribut HTML menggunakan Instruksi (Directive) dan
membinding data ke HTML menggunakan ekspresi. Angular JS merupakan library yang
ditulis menggunakan Javascript dan di distribusikan berupa file javascript dan dapat
ditambahkan pada halaman web dengan menggunakan tag.
AngularJs merupakan sebuah framework struktural untuk apilkasi web dinamis dari
sisi client yang berkonsep MVW . MVW merupakan singkatan dari Model View Whatever,
tujuannya adalah untuk memisahkan logika presentasi dari logika bisnis dimana javascript
berperan untuk mengelola model dan logika dan html untuk layer persentasi. Ini kebanyakan
web developer mengenal konsep ini ketika model dan logika bisnis dalam sisi server.
2. Extend AngularJS terhadap HTML
AngularJS melakukan extends terhadap HTML dengan Instruksi ng- (ng-directive).
Instruksi tersebut antara lain:

ng-app, ng-model, dan ng-bind. Instruksi ng-app

mendefinisikan sebuah Aplikasi AngularJS, Instruksi ng-model melakukan binding nilai dari
HTML-Control (seperti input, select, textarea) pada data aplikasi, sedangkan ng-bind

melakukan binding data aplikasi ke tampilan HTML. Berikut contoh implementasi ngdirective seperti yang ditunjukkan pada gambar 1.1
<!DOCTYPE html>
<html>
<body>
<div ng-app=""><p>Name: <input type="text" ngmodel="name"></p>
<p ng-bind="name"></p></div>
<script src="http://ajax.googleapis.com/ajax/libs/an
gularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Gambar 1.1 : ng-directive Angular JS pada HTML


AngularJS dimulai secara otomatis ketika halaman web telah di-load. ng-app
memberitahu AngularJS bahwa elemen <div> adalah "pemilik" dari aplikasi AngularJS.
Instruksu ng-model melakukan binding nilai field input ke nama variable aplikasi. Instruksi
ng-binds melakukan binding innerHTML dari elemen <p> ke nama variable aplikasi.
3. Ekspresi AngularJS
Ekspresi AngularJS ditulis dalam kurung ganda: {{ekspresi}}. Ekspresi
AngularJS melakukan binding data ke HTML dengan cara yang sama seperti ng-binds.
AngularJS akan menghasilkan output data persis di mana ekspresi tertulis. Seperti yang
ditunjukkan pada gambar 2.

<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.
2.15/angular.min.js"></script>
</body>
</html>

Gambar 2. : Ekspresi Angular JS pada HTML

4. AngularJS Controller
Aplikasi AngularJS dikendalikan oleh Controller. Instruksi ng-controller mendefinisikan
Controller. Kode kontroler akan dieksekusi ketika halaman web di-load.
<div ng-app="" ng-controller="personController">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
function personController($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
}
</script>

Gambar 3. : Ekspresi Angular JS pada HTML


5. Angular JS Filter
Filter dapat ditambahkan kedalam ekspresi dan instruksi menggunakan karakter
(|). Contohnya seperti yang ditunjukkan pada gambar 4.
<div ng-app="" ng-controller="personController">
<p>The name is {{ person.lastName | uppercase }}</p>
</div>

Gambar 4. Ekspresi menggunakan karakter |


Selain itu Angular JS digunakan untuk melakukan transformasi data, seperti yang
ditujukan pada Tabel 1
Mata uang

Memformat nomor to a format mata uang.

filter

Memilih sejumlah a bagian item dari sebuah array.

lowercase

Memformat string menjadi lower case.

orderBy

Mengurutkan array menggunakan sebuah ekspressi.

uppercase

Memformat sebuah string menjadi upper case.


Tabel1. Transformasi Data menggunakan Angular JS

6. AngularJS HTTPRequest
AngularJS memiliki service untuk membaca data dari remote server yang
berupa $http. Service ini dapat membaca sebuah file JSON yang disimpan dalam web server.
AngularJS membaca file JSON menggunakan fungsi $http.get(url) seperti yang ditunjukkan
padan Gambar 6.
<div ng-app="" ng-controller="customersController">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
function customersController($scope,$http) {
$http.get("http://www.w3schools.com/website/Customers_JSON.php")
.success(function(response) {$scope.names = response;});
}
</script>

Gambar 6. File JSON statis dari web server


7. Angular JS Table
AngularJS dapat menampilkan table dengan melakukan instruksi ng-repeat.
Instruksi ini sangar sempurna untuk menampilkan table.
<div ng-app="" ng-controller="customersController">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
function customersController($scope,$http) {
$http.get("http://www.w3schools.com/website/Customers_JSON.p
hp")
.success(function(response) {$scope.names = response;});
}
</script>

Gambar 7. AngularJS menampilkan Tabel

8. AngularJS SQL
AngularJS juga memiliki kemampuan untuk mencari data dari server PHP ke MySQL seperti
yang ditunjukkan pada gambar 8.
<div ng-app="" ng-controller="customersController">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
function customersController($scope,$http) {
var site = "http://www.w3schools.com";
var page = "/website/Customers_MySQL.php";
$http.get(site + page)
.success(function(response) {$scope.names = response;});
}
</script>

Gambar 8. Kemampuan AngularJS untuk mencari data dari server PHP ke MySQL

8. AngularJS HTML DOM


AngularJS memiliki instruksi untuk melakukan binding data ke atribut HTML Elemen Dom.
Ng-disable membinding data aplikasi AngularJS ke atribut yang disable dari atribut elemen
HTML seperti yang ditunjukkan pada Gambar 9.
<div ng-app="">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>
</div>
Gambar 9. AngularJS melakukan binding ke atribut HTML
5

9. Angular JS Event
Angular JS sudah memiliki,instruksi sendiri untuk mengelola event. Instruksi ngclick mendefinisikan Angular JS click event seperti yang ditunjukkan pada gambar 10.
<div ng-app="" ng-controller="myController">
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</div>
Gambar 10. Angular JS Event
10. AngularJS Module
Modul mendefinikan sebuah aplikasi. Semua controller aplikasi seharusnya dimiliki
sebuah modul. Modul membuat aplikasi Anda lebih mudah dibaca, dan menjaga namespace
global bersih seperti yang ditunjukkan pada gambar 11.
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angular
js/1.2.15/angular.min.js"></script>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
Gambar 11. AngularJS module
11. AngularJS Forms
AngularJS Forms merupakan koleksi dari input controller. Input elemen HTML
disebut juga called HTML controls:

input elements

select elements

button elements

textarea elements

13, AngularJS Validasi Input


Form dan control AngularJS dapat digunakan untuk melakukan validasi data. Form
dan Kontrol AngularJS dapat menyediakan layanan validasi, dan memberitahu pengguna input

tidak valid. Seperti yang ditunjukkan pada gambar 12


<!DOCTYPE html>
<html>
<body>
<h2>Validation Example</h2>
<form ng-app="" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ngmodel="user" required>
<span style="color:red" ng-show="myForm.user.$dirty &&
myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is
required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ngmodel="email" required>
<span style="color:red" ng-show="myForm.email.$dirty &&
myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is
required.</span>
<span ng-show="myForm.email.$error.email">Invalid email
address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid
||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/angular
js/1.2.15/angular.min.js"></script>
<script>
function validateCtrl($scope) {
$scope.user = 'John Doe';
$scope.email = '[email protected]';
}
</script></body></html>
Gambar 12. AngularJS validasi
7

Kesimpulan
AngularJS merupakan salah satu framework Javascript yang telah menjadi
standarisasi untuk keperluan pembuatan aplikasi web dinamis dari sisi client. AngularJS
memiliki kemudahan dan kecepatan dalam melakukan komunikasi ke server.
Daftar Pustaka
http://w3schools.com/angular/default.asp diakses pada tanggal 11 Oktober 2014
Wahlin, Dan. 2013. AngularJS in 60 Minutes, Wahlin Consulting

Anda mungkin juga menyukai