Scribd
Unggah
104 tayangan

Angular Js

Tulisan ini memberikan penjelasan tentang cara menggunakan filter pada AngularJS untuk memformat data yang ditampilkan ke pengguna. Tulisan ini mendemonstrasikan penggunaan beberapa filter built-in seperti uppercase dan lowercase, serta cara membuat filter kustom untuk membalikkan sebuah teks. Tulisan ini juga menjelaskan bagaimana filter diterapkan dengan menambahkan karakter pipe diikuti nama filter pada expression yang ingin difilter.

Diunggah oleh

Dirham Revolusioner
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
104 tayangan

Angular Js

Tulisan ini memberikan penjelasan tentang cara menggunakan filter pada AngularJS untuk memformat data yang ditampilkan ke pengguna. Tulisan ini mendemonstrasikan penggunaan beberapa filter built-in seperti uppercase dan lowercase, serta cara membuat filter kustom untuk membalikkan sebuah teks. Tulisan ini juga menjelaskan bagaimana filter diterapkan dengan menambahkan karakter pipe diikuti nama filter pada expression yang ingin difilter.

Diunggah oleh

Dirham Revolusioner
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 18

AngularJS Instalasi dan Katakan Halo

Bagi mereka yang awas dengan perkembangan dunia web maka akan menangkap bahwa jaman
sekarang adalah era bermunculannya JavaScript framework. Dari sekian banyak tipe JavaScript
framework, yang menarik perhatian adalah yang mengusung MVC, kadang ada yang menulisnya
MVW dimana W adalah Whatever atau juga MV*.

Beberapa nama yang sudah bermain di sini adalah Ember, Backbone, CanJS serta AngularJS.
Sebagai panduan untuk memilih akan berinvestasi di mana silahkan baca tulisan A Comparison
of Angular, Backbone, CanJS and Ember. Kalau saya pribadi memilih AngularJS karena
pengaruh tulisan tadi juga karena faktor bahwa Pak Endy juga menggunakannya hahaha
Sebelum memulai, download terlebih dahulu AngularJS pada http://angularjs.org/. Pilih versi
stabil dan minified

Kita akan belajar hal yang paling dasar dulu semacam Hello World. Ketikkan kode di bawah ini
1
2
3
4
5
6
7
8
9
10
11
12

<html>
<head>
<title>Belajar AngularJS</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app="">
<input type="text" placeholder="Masukkan Nama Kamu" ng-model="nama"/>
<h3>{{"Halo "+nama}}</h3>
</body>
</html>

Menginstal AngularJS adalah semudah meload file angular.min.js kedalam file html, perhatikan
pada baris nomor 4. Kemudian berganti ke baris nomor 6, apa itu ada ng-app? directive ini
digunakan untuk menandai bahwa html yang kita tulis menggunakan AngularJS sebagai
JavaScript frameworknya, dalam kata lain directive ini digunakan supaya html bisa mengerti
AngularJS. Baris 8 dan 9 adalah pertunjukan untuk kita. Pada baris 8 terdapat input dengan
directive ng-model yang digunkan untuk melakukan binding data ke dalam sebuah property
yang diberi nama nama. Baris 9 bertugas memunculkan kata Halo plus property tadi yang
sudah di-bind dengan teks yang diinputkan. Silahkan langsung saja dicoba!

Apapun yang kita ketikkan pada input teks maka seketika itu juga akan dimunculkan tanpa harus
menekan tombol submit dan sejenisnya.

Biar lebih seru sekarang ubah index.html menjadi seperti di bawah ini
[sociallocker]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
<head>
<title>Belajar AngularJS</title>
<style type="text/css">
.merah{
border:3px solid #c6535f;
border-radius: 5px;
padding: 5px;
}
.hijau{
border:3px solid #35a06e;
border-radius: 5px;
padding: 5px;
}

18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

div{
margin-top: 20px;
}
</style>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-app="">
<input type="text" placeholder="Masukkan Nama Kamu" ng-model="nama"/>
<br>
<input type="text" placeholder="Masukkan Theme" ng-model="kelas"/>
<br>
<div>
<span class="{{kelas}}">{{"Halo "+nama}}</span>
<div>
</body>
</html>

[/sociallocker]
Kira-kira sudah tahu apa yang akan terjadi?. Coba masukkan merah kemudian masukkan
hijau pada teks input theme dan lihat hasilnya.

Ini baru dasar banget dari AngularJS. Tutorial selanjutnya mengenai seri ini adalah tentang
bagaimana berkomunikasi dengan Controller sekaligus mendapatkan data yang ada pada
Controller. Stay Tune

AngularJS Mengambil Data dari Controller


yang terdapat pada AngularJS memiliki scope tersendiri. Scope ini dibatasi dengan yang
namanya controller, jadi suatu blok html hanya bisa mengakses variabel yang terdapat pada
controller yang merupakan scope-nya. Pusing dengan tulisan mending langsung saja lari ke
kodingnya.

Langkah pertama tulis terlebih dahulu kerangka dasar Html-nya dimana kita me-load file
angularjs dan sebuah file javascript yang bernama aplikasi.js yang nanti akan memuat fungsi
controller. Jangan lupa tambahkan ng-app pada tag body
1
2
3
4
5
6
7
8
9
10
11
12

<html>
<head>
<title>Scope Data</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="aplikasi.js"></script>
</head>
<body ng-app="">
</body>
</html>

Selanjutnya untuk variabel pada controller yang akan diakses oleh Html tadi kita buat
menggunakan JSON dengan cara harcode saja, alias tulis langsung di controller. Simak kodenya
di bawah ini, kode ini ditulis pada file aplikasi.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function BukuController($scope){
$scope.bukus={
"java":{
"kode":"java",
"judul":"Java EE Programming",
"penulis":"Rahman dkk"
},
"javascript":{
"kode":"javascript",
"judul":"Javascript 2014",
"penulis":"Rully"
},
"net":{
"kode":"net",
"judul":"Advanced .Net platform",
"penulis":"Rloio"
},
"php":{
"kode":"php",

21
22
23
24
25
26

"judul":"Php legacy code",


"penulis":"Ruzman"
}
}
}

Dari kode di atas perhatikan nama fungsi-nya karena hal ini sangat penting berhubungan dengan
scope data yang akan diakses pada Html.
Kembali pada Html. Di dalam tag body tambahkan sebuah blok div dimana di dalamnya akan
memunculkan data yang diambil dari controller.
1
2
3
4
5
6
7
8
9

<div ng-controller="BukuController">
<div>
<ul ng-repeat="b in bukus">
<li>Kode : {{b.kode}}</li>
<li>Judul : {{b.judul}}</li>
<li>Penulis : {{b.penulis}}</li>
</ul>
</div>
</div>

Blok di atas memiliki attribut ng-controller yang bernilai BukuController (sama dengan nama
fungsi pada aplikasi.js). Artinya blok ini memiliki scope BukuController sehingga bisa
mengakses variabel yang ada di dalamnya. Kemudian ng-repeat digunakan sebagai perulangan
untuk mendapatkan isi array dari variabel pada controller yaitu bukus, yang sudah terbiasa
dengan JSP+JSTL atau view engine lainnya pasti tidak asing dengan bentuk seperti itu.
Adapun kode lengkap Html setelah ditambahkan blok di atas menjadi seperti ini
1
2
3
4
5
6
7
8
9
10
11

<html>
<head>
<title>Scope Data</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="aplikasi.js"></script>
</head>
<body ng-app="">
<div ng-controller="BukuController">

12
13
14
15
16
17
18
19
20
21
22

<div>
<ul ng-repeat="b in bukus">
<li>Kode : {{b.kode}}</li>
<li>Judul : {{b.judul}}</li>
<li>Penulis : {{b.penulis}}</li>
</ul>
</div>
</div>
</body>
</html>

Ketika di buka pada browser maka akan ditampilkan data-data yang ada pada controller

Di awal saya sudah mengatakan bahwa suatu blok html hanya bisa mengakses variabel yang
terdapat pada controller yang merupakan scope-nya. Untuk membuktikannya silahkan copas
blok div yang berisi perulangan menampilkan data, taruh di bawah blok sebelumnya dan pada
bagian ng-controller ubah nilainya menjadi kosong. Ketika dibuka pada browser maka tidak
akan tertampil apapun, kosong belaka.

Filter pada AngularJS


AngularJS mengenal yang namanya filter, digunakan untuk memformat data yang ditampilkan
pada user. Pada tulisan ini saya akan memperkenalkan sebagian filter built in pada AngularJS
selain itu juga akan menunjukkan bagaimana cara membuat custom filter dan menggunakannya.

Penggunaan filter pada AngularJS sangatlah mudah, tinggal tambahkan karakter pipe diikuti
filter yang diinginkan pada expression.
1

{{expression | filter }}

Pada tulisan yang lalu AngularJS Mengambil Data dari Controller, kita sudah berhasil
menampilkan data yang ada di controller pada view. Kali ini akan kita modif sedikit dengan
menggunakan filter. Bagian yang akan kita ubah adalah judul menjadi uppercase dan penulis
menjadi lowercase. Perhatikan potongan kode di bawah ini
1
2
3
4
5
6
7
8

<div ng-controller="BukuController">
<div>
<ul ng-repeat="b in bukus">
<li>Kode : {{b.kode}}</li>
<li>Judul : {{b.judul |uppercase}}</li>
<li>Penulis : {{b.penulis |lowercase}}</li>
</ul>
</div>

</div>

sebelum difilter

setelah difilter

Sebegitu mudahnya menggunakan filter pada AngularJS


Lalu apa aja filter built in yang tersedia pada AngularJS? silahkan merujuk ke dokumentasinya.
Lanjut ke materi selanjutnya. Suatu saat sangat mungkin kita memerlukan sebuah filter yang
tidak tersedia secara built in, artinya kita perlu membuatnya sendiri. AngularJS memampukan
kita untuk melakukannya.
Saya ambil contoh gampang, saya akan membuat sebuah filter yang digunakan untuk membalik
sebuah kata. Nanti kita pasang pada kode produk. Pada file aplikasi.js tambahkan kode berikut
pada bagian atas
1
2
3
4
5
6
7

var myApp=angular.module("myApp",[]);
myApp.filter("reverse",function(){
return function(text){
return text.split("").reverse().join("");
}
})

Pada kode di atas pada baris pertama kita membuat sebuah modul dengan nama myApp,
penamaan ini penting karena nanti digunakan pada directive ng-module di mana selama ini
selalu kita kosongkan. Perhatikan pada baris 3 ke bawah, di sanalah pendeklarasian filter kita.
Ubah sedikit html untuk menerapkan filter yang baru saja dibuat
1
2
3
4
5
6
7
8
9
10
11
12

<body ng-app="myApp">
<div ng-controller="BukuController">
<div>
<ul ng-repeat="b in bukus">
<li>Kode : {{b.kode |reverse}}</li>
<li>Judul : {{b.judul |uppercase}}</li>
<li>Penulis : {{b.penulis |lowercase}}</li>
</ul>
</div>
</div>
</body>

Jangan lupa kasih nilai pada ng-app dan pasang filter kita. Berikut hasilnya

Bagaimana, menarik kan ngoprek AngularJS?

AngularJS Menyeleksi Data


Program AngularJS yang sudah kita buat selama ini hanya bisa dilihat, tidak bisa berinterkasi
dengan pengguna, diklik pun dia tidak bereaksi apa-apa. Saatnya tugas kita untuk membuatnya
sedikit interaktif.

Salah satu hal dasar yang ada pada sebuah aplikasi yang berhubungan dengan data adalah
kemampuan untuk memilih data dengan cara diklik kemudian menampilkan detail dari data
tersebut. Pada tulisan ini saya akan mendemokannya kepada para pembaca sekalian yang
budiman
Terlebih dahulu kita siapkan Html-nya sebagai berikut, sangat sederhana
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<html>
<head>
<title>Scope Data</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="aplikasi.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="BukuController">
<div>
<ul>
<li ng-repeat="b in bukus">
<p>Judul : {{b.judul }}</p>
</li>

17
18
19
20
21

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

File aplikasi.js yang memuat fungsi untuk controller mirip dengan yang sebelumnya ada pada
tulisan-tulisan kemarin hanya sedikit perbedaannya, perhatikan pada kode di bawah ini
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

var myApp=angular.module("myApp",[]);
function BukuController($scope){
$scope.bukus={
"java":{
"kode":"java",
"judul":"Java EE Programming",
"penulis":"Rahman dkk"
},
"javascript":{
"kode":"javascript",
"judul":"Javascript 2014",
"penulis":"Rully"
},
"net":{
"kode":"net",
"judul":"Advanced .Net platform",
"penulis":"Rloio"
},
"php":{
"kode":"php",
"judul":"Php legacy code",
"penulis":"Ruzman"
}
}
$scope.selectedBuku=null;
$scope.setBuku=function(code){
$scope.selectedBuku=$scope.bukus[code];
}

33
34

Pada kode di atas saya tuliskan nama module dan juga fungsi controller, ini sudah ada pada
tulisan yang lalu jadi saya anggap para pembaca sudah paham. Kemudian yang saya highlight
adalah kode yang perlu diperhatikan dan memegang peranan kunci di sini.
Baris 28 merupakan variabel yang digunakan untuk menyimpan data buku yang terseleksi. Jadi
nanti akan ada beberapa judul buku yang terpampang pada halaman web dan ketika salah satu
judul buku tersebut diklik maka akan dimunculkan data detailnya. Untuk bisa mencapai hal
tersebut maka buku yang diklik harus disimpan terlebih dahulu pada variabel untuk dimunculkan
kemudian.
Baris 30-31 adalah sebuah fungsi yang digunakan untuk memberikan nilai pada variabel
selectedBuku tadi, atau bahasa lainnya setter.
Sekarang coba jalankan pada browser. Kurang lebih seperti ini hasilnya

Tentu saja ketika diklik belum muncul apa-apa karena kita belum menambahkan event klik pada
daftar judul buku. Oke sekarang kita tambahkan. Tadi pada baris 30-31 pada file aplikasi.js telah
kita buat fungsi setter, nah mari kita manfaatkan. Tambahkan directive ng-click dengan fungsi
setter sebagai nilainya dan kode buku sebagai parameter fungsi pada daftar buku. Perhatikan
potongan kode di bawah
1

<p ng-click="setBuku(b.kode)">Judul : {{b.judul }}</p>

Dengan kode di atas begitu salah satu judul buku diklik maka data detail akan tersimpan pada
variabel selectedBuku. Untuk menampilkan data buku yang terpilih perlu kita tambahkan
beberapa buah baris pada Html seperti di bawah ini
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<html>
<head>
<title>Scope Data</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="aplikasi.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="BukuController">
<div>
<ul>
<li ng-repeat="b in bukus">
<p ng-click="setBuku(b.kode)">Judul : {{b.judul }}</p>
</li>
</ul>
</div>
<div ng-show="selectedBuku">
<p>{{"Kode : "+selectedBuku.kode}}</p>
<p>{{"Judul : "+selectedBuku.judul}}</p>
<p>{{"Penulis: "+selectedBuku.penulis}}</p>
</div>
</div>
</body>
</html>

Coba klik pada salah satu judul buku, berikut adalah hasilnya

Buku JavaEE dipilih

Buku Javascript dipilih

Sekian tutorial AngularJS dari saya mengenai cara menyeleksi data untuk ditampilkan detailnya.
Semoga bermanfaat dan sampai jupa pada tulisan saya selanjutnya.

Anda mungkin juga menyukai