angularjs-untuk-pemula.pdf - Google Drive

AngularJs Untuk Pemula

Table of Contents Introduction

0

Bab 1 Dasar-Dasar

1

Bab 2 Directive

2

Bab 3 Service

3

Bab 4 Route

4

Bab 5 $watch, $digest dan $apply

5

Bab 6 Contoh Aplikasi CRUD Menggunakan Web API

6

2

AngularJs Untuk Pemula

Buku yang ditujukan untuk pemula ini membahas AngularJs , framework JavaScript besutan Google yang digunakan untuk frontend development khususnya Single Page Application (SPA). ` Materi yang disajikan bersifat praktik dan diharapkan pembaca bisa langsung coding untuk langsung merasakan dan mulai mengenal AngularJs . Diharapkan tidak copy - paste karena belajar ngoding memang harus beneran ngoding. AngularJs dalam buku ini merupakan versi 1, untuk versi 2 harap menunggu penulis

mempelajarinya terlebih dahulu :D Ebook ini gratis dan boleh disebarkan dengan syarat harus link dari domain ini, tidak boleh dihost pada domain lain. Source code contoh-contoh program akan segera ditaruh Github, untuk saat ini mohon maaf masih belum :) Buku ini ditulis oleh Agung Setiawan. Jika ada pertanyaan, kritik, dan saran silahkan untuk mengirim email ke [email protected] .

Introduction

3

AngularJs Untuk Pemula

Introduction

4

AngularJs Untuk Pemula

Bab 1 Dasar-Dasar Materi yang dipelajari pada bab ini : Memasang AngularJs Hello World Workflow Filter Basic Directive

1.1 Memasang AngularJs Proses instalasi atau pemasangan AngularJs ke dalam aplikasi yang akan kita bangun sangatlah mudah. Kita hanya perlu meng-include file AngularJs di dalam file HTML menggunakan tag

Atau jika pembaca lebih memilih untuk mengunduh filenya terlebih dahulu untuk direferensikan melalui folder lokal maka menjadi seperti di bawah ini.

1.2 Hello World

Bab 1 Dasar-Dasar

5

AngularJs Untuk Pemula

Supaya belajarnya jadi semangat maka akan saya tunjukkan sedikit kesaktian dari AngularJs. Idenya sangat sederhana namun akan membuat kita paham bagaimana flow dari AngularJs. 1. Buat sebuah file dengan nama index.html dan pasang AngularJs seperti pada contoh di atas. 2. Buat sebuah folder baru bernama js sejajar dengan file index.html. 3. Buat file dengan nama app.js di dalam folder js tadi dan isikan kode berikut. var app=angular.module('FirstApp',[]);

4. Include file app.js di dalam file index.html menggunakan tag

Karena kita mengatur nilai property restricted sebagai EA yang artinya Element dan Attribute maka kita bisa menggunakan directive baik sebagai element maupun attribute. Untuk class dan comment, string yang digunakan berurutan adalah C dan M .

Ngomong-ngomong kenapa directive kita menggunakan my-directive padahal kita di kodingan menuliskannya dengan myDirective ?. Itu adalah convention dari AngularJs. Sekarang buka file view pada browser dan lihat hasil yang muncul.

Bab 2 Directive

23

AngularJs Untuk Pemula

Bisa dipahami?. Kalimat Dunia Indonesia muncul berasal dari variabel dunia yang ada pada controller kemudian dimunculkan melalui ekpresi {{dunia}} yang ada di dalam directive. Dari sini bisa diketahui bahwa semua variabel yang ada di scope controller juga bisa diakses dari directive yang berada di bawah controller tersebut. Selanjutnya ketika dilihat melalui jendela inspect element terlihat bahwa kalimat Hello Dunia Indonesia yang menggunakan tag h2 terletak di dalam tag directive yang kita buat.

Hello Dunia Indonesia

Jika ingin posisi dari template yang kita gunakan tidak berada di dalam tag directive kita bisa mengaturnya dengan menggunakan properti replace yang bernilai true . Ketika replace bernilai true maka directive akan digantikan / di-replace dengan apa yang ada pada properti template. app.directive('myDirective',function(){ return { restrict:'EA', template:'Hello {{dunia}}', replace:true }; });

Bab 2 Directive

24

AngularJs Untuk Pemula

Sampai sini saya minta pembaca untuk memahami dulu bagaimana tulisan Hello Dunia Indonesia bisa muncul. Amati baik-baik tiap langkah dan penjelasa yang saya berikan, dan

sebisa mungkin untuk mencobanya sendiri dengan mengetikkan kode, bukan copy – paste hehe. Meskipun directive yang kita buat masih sederhana namun ada hal-hal penting yang bisa kita pelajari. Kita sudah menggunakan tiga buah properti dari directive. Mari bahas satu per satu. 1. restricted – property ini untuk mengatur bagaimana directive kita akan digunakan. Ingat ada 4 jenis penggunaan directive. Ada 4 string untuk masing-masing yaitu E,A,C,M . Penggunaanya bisa digabung missal EA ,

2. template – propertiini sebagai template yang akan ditampilkan ketika directive dirender. Jika ingin yang di-render adalah sebuah halaman HTML dari file lain maka yang digunakan adalah property templateUrl dengan nilai lokasi path file html yang bersangkutan. 3. replace – untuk mengatur apakah template yang ditampilkan me-replace tag directive atau tidak.

2.2 Scope Pada sub bab sebelumnya saya sudah sempat menyinggung masalah scope yang ada didalam directive yang sebenarnya adalah scope yang berada di parent-nya. Lihat kembali kode terakhir dimana ekspresi mengambil variabel dunia yang ada di controller. Bisa jadi ada kasus di mana kita membuat sebuah directive yang menggunakan scope yang bukan berasal dari parent-nya. Ada 2 cara untuk melakukannya yaitu : 1. Child Scope 2. Isolated Scope Sebelum kita lari ke dua jenis scope tersebut akan lebih baik saya menjelaskan terlebih dahulu kenapa kita ingin menggunakan baik child scope maupun isolated scope. Scope yang ada di directive itu secara default berasal dari scope yang dimiliki oleh parentnya seperti yang sudah saya katakan sebelumnya. Pahami benar-benar kalimat saya yang itu. Karena scope tersebut merujuk ke scope yang sama maka ketika scope yang ada pada directive berubah, secara automatis scope yang ada di parent juga berubah, make sense kan? Berikut ini contoh dari penjelasan di atas. Kita masih menggunakan controller yang sama dengan contoh sebelumnya.

Bab 2 Directive

25

AngularJs Untuk Pemula

app.controller('MainController',['$scope', function($scope){ $scope.dunia="Dunia Indonesia"; }]);

Untuk directive dan view ada sedikit perubahan. Berikut directive yang digunakan, ada tambahan properti link di dalamnya (materi link akan saya jelaskan pada sub bab berikutnya). app.directive('myDirective',function(){ return { restrict : 'EA', template : 'Hello {{dunia}}', replace : true, link : function(scope,elem,attrs){ elem.bind('click',function(){ scope.dunia='Saya diklik'; scope.$digest(); }); } }; });

Maksud dari link di atas adalah ketika directive diklik maka variabel dunia yang ada pada scope akan diganti nilainya menjadi Saya diklik . View juga mengalami sedikit perubahan. Bagian atas digunakan untuk menampilkan variabel dunia yang ada di controller (parent) sedangkan yang bawah untuk variabel yang ada di directive. dunia dari parent scope
Hello {{dunia}} dunia dari directive scope


Ketika dijalankan maka yang muncul adalah seperti pada gambar di bawah.

Bab 2 Directive

26

AngularJs Untuk Pemula

Sekarang kita coba klik tulisan Hello Dunia Indonesia yang berada pada bagian bawah yaitu pada bagian directive yang sudah kita tambahai fungsi untuk mengubah nilai variabel dunia ketika diklik. Maka yang terjadi adalah bukan hanya tulisan yang bawah yang berubah tetapi juga tulisan bagian atas. Hal ini sesuai penjelasan saya di atas, karena variabel yang diacu adalah variabel yang sama maka ketika berubah semuanya ikut berubah. Hal – hal seperti inilah yang ingin dihindari karena bisa menyebabkan kekacauan jika variabel yang ada pada directive mengacu ke variabel yang sama pada parent-nya. Sebenarnya kita ingin mengubah yang ada pada directive saja, eh namun yang ada pada parent ikut berubah juga.

Bab 2 Directive

27

AngularJs Untuk Pemula

Gambar di atas menunjukkan perubahan yang terjadi ketika directive diklik. Tampak jelas bagian parent juga ikut berubah.

2.2.1 Child Scope Child scope adalah scope yang merupakan prototype dari parent scope. Artinya bentuknya sama dengan punya parent cuma dia itu tiruannya, alias semacam nge-copy dari parent. Karena nge-copy berarti dia merupakan scope yang berbeda dengan yang dimiliki oleh parent. Hal ini menyebabkan perubahan scope di directive tidak akan berpengaruh di parent. Untuk menggunakan child scope kita menggunakan properti scope dengan nilai true pada objek directive.

Bab 2 Directive

28

AngularJs Untuk Pemula

app.directive('myDirective',function(){ return { scope : true, restrict : 'EA', template : 'Hello {{dunia}}', replace : true, link : function(scope,elem,attrs){ elem.bind('click',function(){ scope.dunia='Saya diklik'; scope.$digest(); }); } }; });

Sekarang coba jalankan kembali dan klik sekali lagi pada directive. Kali ini perubahan hanya terjadi pada bagian directive (bagian sebelah bawah).

2.2.2 Isolated Scope

Bab 2 Directive

29

AngularJs Untuk Pemula

Sesuai dengan namanya, isolated scope berarti scope yang sifatnya terisolasi, berlaku hanya di area directive, tidak merembet sampai parent. Kalau child scope tadi tidak mempengaruhi parent juga tetapi dia bentuknya merupakan kopian dari parent, isolated scope harus kita definisikan tersendiri untuk bisa digunakan. Mari kita ubah kode directive sebelumnya dengan mengubah scope yang semula child scope menjadi isolated scope. Untuk mendefiniskan isolated scope kita menggunakan properti scope yang berupa objek. app.directive('myDirective',function(){ return { scope : { }, restrict : 'EA', template : 'Hello {{dunia}}', replace : true, link : function(scope,elem,attrs){ elem.bind('click',function(){ scope.dunia='Saya diklik'; scope.$digest(); }); } }; });

Di atas kita membuat isolated scope yang bernilai kosong, nanti akan kita isi dan bagaimana contoh penggunaanya. Sekarang coba jalankan lagi contoh aplikasi kita. Kali ini bagian directive tidak bisa membaca variabel dunia yang ada pada scope. Kejadian ini disebabkan karena kita menggunakan isolated scope, jadi directive tidak mengenali scope selain yang ada di isolated scope.

Bab 2 Directive

30

AngularJs Untuk Pemula

Sekarang pertanyaannya bagaimana directive bisa menggunakan isolated scope?. Mungkin pembaca akan mengira-ngira dengan seperti ini definisikan variabel di dalam objek scope dan kasih nilainya , seperti berikut.

app.directive('myDirective',function(){ return { scope : { dunia : 'Halo Saya Isolated Scope' }, … … … }; });

Namun setelah kode diatas ditulis dan dieksekusi maka tidak berjalan seperti yang kita inginkan haha. Ya karena memang bukan seperti itu cara menggunakan isolated scope. Pun misal cara di atas bisa maka >



Tampilan awal ketika dijalankan sudah bisa pembaca tebak?, coba cocokkan perkiraan pembaca dengan screen shot berikut ini.

Directive pertama akan menghasilkan teks Title Inside : static karena pada directive ini kita mem-passing nilai ke variabel inside dengan nilai static .

Sedangkan directive kedua akan kosong karena nilai yang kita passing adalah berupa teks yang didapat dari variabel title yang pada saat awal tidak bernilai. Sekarang coba isi input teks yang ada dengan kata apapun, maka directive akan ikut berubah.

Bab 2 Directive

33

AngularJs Untuk Pemula

Ngomong-ngomong, jika menggunakan @ untuk mem-passing variabel maka yang bisa dipassing hanyalah string, itu mengapa kita menggunakan ekspresi {{title}} saat mempassing variabel title.

Terus masalah one way-nya sudah saya jelaskan pada bagian parent scope dan isolated scoped ya. Untuk mencobanya silahkan klik pada kedua directive maka title akan berubah menjadi JavaScipt tetapi variabel pada title yang ada pada inputan teks tidak berubah.

Bab 2 Directive

34

AngularJs Untuk Pemula

= untuk two way binding Perbedaan dengan menggunakan @ adalah 1. Yang di-passing berupa object bukan string 2. Perubahan scope di parent berpengaruh ke child dan berlaku sebaliknya Dengan menggunakan contoh koding yang masih sama kita hanya perlu mengganti tanda dari @ menjadi =

Bab 2 Directive

35

AngularJs Untuk Pemula

app.directive('oneWay',function(){ return { restrict:'E', scope:{ title:'=' }, template:'Title Inside : {{title}}', link : function(scope,elem,attrs){ elem.bind('click',function(){ scope.$apply(function() { scope.title = "JavaScript"; }); }); } }; });

Selain itu kita tidak lagi menggunakan ekspresi ( {{var}} ) saat mem-passing sebuah nilai. Perhatikan contoh di bawah ini pada HTML-nya.



Ketika diklik parent akan ikut berubah

Bab 2 Directive

36

AngularJs Untuk Pemula

2.3 link function Pembaca pasti sudah berkali-kali melihat dari beberapa contoh di atas terdapat properti link pada directive yang berupa fungsi. Saya juga yakin pembaca sudah mengerti apa

kegunaannya. link digunakan untuk melakukan utilisasi terhadap scope. Bahasa gampangnya, kalau

mau ngapa-ngapain scope misal mengubah nilainya ya gunakan link. link memiliki 3 buah parameter yaitu :

1. scope – scope yang ada pada directive 2. elem – elemen dari directive, digunakan untuk manipulasi DOM 3. attrs – attribute dari directive Jika mau mengubah nilai variabel pada scope maka gunakan parameter scope untuk mengubahnya, misal ada variabel dengan nama title yang ingin diubah maka kode berikut diperlukan. scope.title = "Nilai baru";

Bab 2 Directive

37

AngularJs Untuk Pemula

Nilai scope tidak akan berubah kalau tidak ada apa-apa. Masa iya tiba-tiba nilai bisa berubah? Pasti tidak kan?. Paling sering, suatu nilai berubah pada saat ada event klik. Untuk mengakomodasi hal seperti itu digunakanlah parameter elem . Misal kita ingin memberi nilai baru pada title ketika ada klik pada directive, maka gunakan elem supaya bereaksi ketika diklik. elem adalah jQLite (subset dari jQuery ) jadi cara penggunaanya sama saja dengan jQuery untuk melakukan manipulasi DOM. link : function(scope,elem,attrs){ elem.bind('click',function(){ scope.$apply(function() { scope.title = "Nilai baru"; }); }); }

Click adalah hanya sebagian dari event yang bisa digunakan di sini, untuk event apa saja yang ada silahkan merujuk ke dokumentasi resmi dari jQuery atau googling. Diperhatikan secara seksama maka pembaca akan menemukan kode yang sedikit aneh yaitu adanya scope.$apply , apa kegunaannya? Sabar dulu ya nanti pada bab men> {{judul}}

Berikut adalah kode awal yang ada di controller. app.controller('MainController', ['$scope', function($scope){ $scope.judul='Demo Penggunaan AngularJs Directive'; }]);

Jalankan pada browser dan pastikan tulisan Demo Penggunaan AngularJs Directive muncul. Langkah selanjutnya adalah membuat directive yang menggunakan template berupa file HTML. PERHATIAN, untuk bisa menggunakan template yang berupa halaman HTML, kita harus menjalankan aplikasi AngularJs melalui web server, semisal Apache. Kode di bawah ini merupakan directive kita. app.directive('agsTable',function(){ return { restrict:'E', scope:{ books:'=' }, templateUrl:'js/directives/AgsTable.html' }; });

Adapaun file HTML yang kita jadikan sebagai template yang bisa digunakan berulang kali bisa dilihat di bawah ini.

Bab 2 Directive

39

AngularJs Untuk Pemula

Judul	Penulis	Rating
{{b.judul}}	{{b.penulis}}	{{b.rating}}

Kembali lagi ke controller. Tambahkan sebuah variabel bernama books yang menampung > {{judul}}

Jika pembaca bingung mengikuti bagaimana struktur foldernya, di bawah ini saya sertakan struktur folder dari pekerjaan di atas.

Bab 2 Directive

41

AngularJs Untuk Pemula

Selesai sudah utak-atik kita untuk membuat directive. Buka file index.html di browser maka seharusnya yang pembaca lihat adalah seperti pada gambar di bawah.

Bab 2 Directive

42

AngularJs Untuk Pemula

Manfaat dari penggunaan directive ini adalah jika pada bagian lain dari aplikasi kita ingin menampilkan > {{title}} Angka 1 :
Angka 2 :
Hasil : {{hasil}}

+ - * /

Dan terakhir, bagian yang penting adalah di-controller, bagaimana cara kita menggunakan factory untuk melakukan operasi matematika. app.controller('MainController',['$scope','KalkulatorFactory',function($scope,KalkulatorFactory){ $scope.title='Kalkulator Factory'; $scope.penambahan=function(){ $scope.hasil=KalkulatorFactory.tambah($scope.angkaA,$scope.angkaB); } $scope.pengurangan=function(){ $scope.hasil=KalkulatorFactory.kurang($scope.angkaA,$scope.angkaB); } $scope.perkalian=function(){ $scope.hasil=KalkulatorFactory.kali($scope.angkaA,$scope.angkaB); } $scope.pembagian=function(){ $scope.hasil=KalkulatorFactory.bagi($scope.angkaA,$scope.angkaB); } }]);

Seperti sudah selazimnya, kita meng-inject factory ke dalam controller dengan cara mempassing nama factory di dalam parameter fungsi. Selanjutnya, karena nilai kembalian dari factory adalah objek kalkulator yang memiliki 4 buah method, maka kita bisa memanggil 4 buah method tersebut di dalam controller. Coba jalankan di browser, masukkan angka pada text box dan tekan salah satu tombol operasi. Pastikan kode pembaca sudah berjalan dengan benar.

Bab 3 Service

48

AngularJs Untuk Pemula

3.3 Service Pendekar ketiga kita adalah service. Kalau saya bilang, service ini mirip dengan factory. Perbedaan antara keduanya adalah, jika pada factory yang di-inject adalah nilai kembalian dari factory maka pada service yang di-inject adalah service itu sendiri. Service bekerja pada module dengan menggunakan method service. var app=angular.module('MyApp',[]); app.service('myService', function(){ this.methodA=function(){ ... } this.methodB=function(){ ... } });

Bab 3 Service

49

AngularJs Untuk Pemula

Dengan masih menggunakan aplikasi kalkulator sebagai contoh, maka kita ubah operasi matematika yang tadinya menggunakan factory menjadi menggunakan service. var app=angular.module('MyApp',[]); app.service('KalkulatorService', function(){ this.tambah=function(angkaA, angkaB){ return parseInt(angkaA)+parseInt(angkaB); }; this.kurang=function(angkaA, angkaB){ return angkaA-angkaB; }; this.kali=function(angkaA, angkaB){ return angkaA*angkaB; }; this.bagi=function(angkaA, angkaB){ return angkaA/angkaB; }; });

Pada bagian view sama sekali tidak ada perubahan. Pada controller tinggal ubah yang tadinya nama factory kita menjadi nama service kita, sebagai berikut kodenya. app.controller('MainController',['$scope','KalkulatorService',function($scope,KalkulatorService){ $scope.title='Kalkulator Service'; $scope.penambahan=function(){ $scope.hasil=KalkulatorService.tambah($scope.angkaA,$scope.angkaB); } $scope.pengurangan=function(){ $scope.hasil=KalkulatorService.kurang($scope.angkaA,$scope.angkaB); } $scope.perkalian=function(){ $scope.hasil=KalkulatorService.kali($scope.angkaA,$scope.angkaB); } $scope.pembagian=function(){ $scope.hasil=KalkulatorService.bagi($scope.angkaA,$scope.angkaB); } }]);

Bab 3 Service

50

AngularJs Untuk Pemula

Pada kode di atas kita yang pertama kita lakukan adalah meng-inject KalkulatorService. Karena service kita ini memang sudah berupa objek dari sananya maka kita bisa menggunakannya untuk memanggil method-method yang dimiliki. Pada bagian belakang, yang dilakukan oleh AngularJs adalah melakukan instantiasi dari KalkulatorService. var theService = new KalkulatorService();

Jalankan pada browser dan pastikan kalkulator berjalan dengan benar, tidak ada error yang terjadi.

3.4 Contoh Service Http Bagian ini memuat contoh penggunaan service yang memanfaatkan komponen $http pada AngularJs untuk mengambil ; }]);

{{title}}

Selanjutnya kita buat service yang menggunakan $http . Ketikkan kode di bawah ini.

Bab 3 Service

51

AngularJs Untuk Pemula

app.service('UsersService', ['$http',function($http){ this.index=function(){ return $http.get('http://jsonplaceholder.typicode.com/users'); } }]);

Pada service di atas, kita melakukan injeksi komponen $http sehingga bisa digunakan di dalam service. Salah satu method yang dimiliki oleh $http adalah get , digunakan untuk mengambil ; UsersService.index().success(function(> {{title}}

Name	Username	Email	Website	Company
{{u.name}}	{{u.username}}	{{u.email}}	{{u.website}}	{{u.company.name}}

Untuk Http method yang lain seperti POST , DELETE dan PUT penggunaannya hampir sama, nanti akan saya perlihatkan contohnya pada bab yang membahas studi kasus.

Bab 3 Service

53

AngularJs Untuk Pemula

Bab 4 Route Materi yang dipelajari pada bab ini : Route Provider Route Param Suatu aplikasi yang berguna sangat jarang atau bahkan tidak ada yang hanya memiliki satu halaman tanpa adanya halaman yang lain. Khusus untuk aplikasi web, halaman – halaman yang satu berkolaborasi dengan halaman melalui perantara sebuah link. Berbeda dengan aplikasi web pada umumnya dimana ketika sebuah link diklik dan berpindah ke halaman lain yang terjadi adalah adanya proses reload, maka jika menggunakan AngularJs, transisi akan terasa smooth tanpa adanya proses reload.

4.1 Route Provider Route provider adalah komponen pada AngularJs yang digunakan untuk mengkonfigurasi route yang ada pada aplikasi kita. Apa saja yang dikonfigurasi? Sebelum saya menjawabnya saya perlu memperlihatkan kepada pembaca contoh url dari aplikasi AngularJs yang memiliki route. http://sample.com/index.html#books http://sample.com/index.html#authors http://sample.com/index.html#books/123

Url – url di atas mengakses aplikasi yang sama tetapi memiliki route yang berbeda. Route ditandai dengan adanya tanda # . Di belakang tanda # tersebut adalah route-nya. Balik ke pertanyaan tadi, apa saja yang dikonfigurasi menggunakan route provider?. Ada 2 hal yang dikonfigurasi, yaitu : 1. Template yang akan ditampikan 2. Controller yang bekerja pada template yang ditampilkan Langsung ke contoh saja ya biar paham maksudnya bagaimana dan cara menggunakannya seperti apa. Kasusnya misal kita ingin membuat 3 buah halaman yaitu home , about dan contact . Masing – masing halaman memiliki konten yang berbeda satu sama lain. Mari

langsung kita terjun ke koding.

Bab 4 Route

54

AngularJs Untuk Pemula

Di bawah ini adalah struktur akhir dari folder dan file dari contoh yang akan kita kerjakan. Jika di tengah jalan nanti pembaca merasa bingung dengan peletakan folder serta file maka bisa merujuk ke gambar ini.

Buat sebuah modul di dalam file app.js seperti yang sudah-sudah. Akan tetapi, kali ini ada sedikit perbedaan, coba lihat perbedaannya di mana. var app=angular.module('AngularRouteApp',['ngRoute']);

Perbedaannya terletak pada apa yang ada di dalam tanda kurung kurawal, yaitu ada nya ngRoute yang merupakan modul untuk route yang memang dibuat terpisah dari modul

utama AngularJs. Untuk bisa menggunakan route kita harus memuatnya ke dalam modul yang kita buat. Selanjutnya buat 3 buah controller yang terletak di dalam folder controllers, masing-masing adalah HomeController , AboutController , dan ContactController .

Bab 4 Route

55

AngularJs Untuk Pemula

app.controller('HomeController',['$scope', function($scope){ $scope.title = 'Home'; $scope.message = 'My name is Agung Setiawan and I am a Software Engineer'; }]);

app.controller('AboutController',['$scope', function($scope){ $scope.title = 'About'; $scope.message = 'MI have various kind of experience developing software';

$scope.technologies = ['C#','ASP.NET MVC','LINQ','Entity Framework','SQL','GIT','Ruby','Ruby on Ra }]);

app.controller('ContactController',['$scope', function($scope){ $scope.title = 'Contact'; $scope.contacts = ['[email protected]','@agungsetiawanmu','http://agung-setiawan.com']; }]);

Dari masing-masing controller di atas kita buatkan halaman html-nya yang terletak di dalam folder pages. Pertama adalah halaman atau template untuk HomeController . {{title}} {{message}}

Kemudian template untuk AboutController {{title}} {{message}}

• {{t}}


Dan terakhir adalah template untuk ContactController . {{title}}
• {{c}}


Bab 4 Route

56

AngularJs Untuk Pemula

Nah karena controller sudah siap dan template juga sudah siap maka sekarang saatnya kita melakukan konfigurasi untuk route. Seperti yang sudah saya katakan di awal bab bahwa yang perlu dikonfigurasi adalah controller yang mana dan template yang mana yang akan dipilih ketika route yang sedang diakses adalah yang ini. Karena kita sudah memuat modul ngRoute ke dalam modul dari aplikasi kita maka kita memiliki akses untuk menggunakan $routeProvider . Komponen inilah yang kita gunakan untuk melakukan konfigurasi. Pada file route.js ketikkan kode di bawah ini yang berperan mengatur route pada aplikasi Angular kita. app.config(function($routeProvider){ $routeProvider.when('/',{ templateUrl : 'pages/home.html', controller : 'HomeController' }) .when('/about',{ templateUrl : 'pages/about.html', controller : 'AboutController' }) .when('/contact',{ templateUrl : 'pages/contact.html', controller : 'ContactController' }) .otherwise({ redirectTo : '/' }) });

Tanpa membutuhkan penjelasan yang canggih, kode di atas sudah menjelaskan dirinya sendiri, istilah kerennya self explanatory. Method when digunakan untuk mengatur ketika route yang ada pada url bernilai x maka controller dan template yang digunakan adalah y dan z. Sudah hanya sesederhana itu. Pada kode di atas berarti ketika url yang diakses adalah http://xxx/#/about maka controller yang bekerja adalah AboutController dan template yang digunakan adalah about.html .

Selain when ada satu lagi pada kode di atas yaitu otherwise yang digunakan untuk menangani route-route yang tidak dikenal. Jika ada route yang tidak dikenal maka method ini yang digunakan. Pada kode di atas jika ada route tidak dikenal maka akan dialihkan ke root url. Bagin terakhir adalah membuat halaman utama yang akan memuat semua controller serta template ketika route bernilai sesuai. Pada file index.html ketikkan kode html berikut ini.

Bab 4 Route

57

AngularJs Untuk Pemula

AngularJs Route Home About Contact

Bentuk html-nya masih mirip dengan yang sebelum – sebelumnya, hanya ada 2 tambahan yang baru. Tambahan pertama adalah kita memuat file angular-route.min.js . File inilah yang di dalamnya terdapat modul ngRoute . Tambahan kedua adalah penggunaan directive ng-view yang digunakan sebagai place holder untuk template yang akan dimuat sesuai

dengan route. Penting untuk diperhatikan. Pembaca harus menjalankan kode-kode diatas pada sebuah web server seperti sebelumnya pada bab yang membahas directive. Jika tidak, makan akan terjadi error. Setelah bisa dijalankan silahkan nikmati perpindahan antar halaman yang terasa sangat smooth. Berikut di bawah adalah screenshot-nya.

Bab 4 Route

58

AngularJs Untuk Pemula

Bab 4 Route

59

AngularJs Untuk Pemula

Bab 4 Route

60

AngularJs Untuk Pemula

4.2 Route Params Komponen yang satu ini digunakan untuk menangkap parameter yang ada di url. Kalau pembaca sudah pernah menggunakan bahasa pemrograman yang bekerja di sisi server pasti tidak asing dengan yang dimaksud url parameter. Pada contoh url-url yang memiliki route pada sub bab 4.1 sebelumnya saya menyertakan satu yang memiliki parameter yaitu http://sample.com/index.html#books/123

Angka 123 adalah parameter. Dengan adanya parameter ini kita bisa mengambil nilai 123 untuk kemudian menggunakannya untuk kepentingan aplikasi kita, misalnya mengambil data buku yang memiliki id sama dengan 123. Sekali lagi, jika pembaca sudah pernah ngoding aplikasi web pasti sangat paham dengan konsep ini. Kembali kita terjun ke koding supaya paham cara mengambil nilai parameter yang ada pada url. Contoh kode yang akan dikerjakan lanjutan dari kode sebelumnya saja ya. Buat sebuah controller baru dengan nama ParamControlle r dan di bawah ini adalah kodenya.

Bab 4 Route

61

AngularJs Untuk Pemula

app.controller('ParamController',['$scope','$routeParams', function($scope,$routeParams){ $scope.title = 'Parametes'; $scope.param = $routeParams.theparam; }]);

Di bagian controller ini ada sebuah komponen baru yang di-inject yaitu $routeParams yang digunakan untuk mengambil nilai parameter yang ada di url. Pada bagian isi ada kode seperti ini $scope.param = $routeParams.theparam;

Dari mana bagian theparam didapatkan? Jawabannya adalah ada pada bagian konfigurasi route. Pada konfigurasi yang sudah ada tambahkan route baru sebagai berikut. when('/param/:theparam',{ templateUrl : 'pages/param.html', controller : 'ParamController' })

Pada konfigruasi route kita mendefiniskan nama parameter yang akan diambil melalui controller, pada kode di atas nama parameternya adalah theparam . Pada kedua bagian itu nama harus sama, jika di konfigurasi namanya adalah paramsay a maka pada controller juga harus paramsaya .Sudah jelas bukan sekarang? Selanjutnya membuat template yang akan ditampilkan. {{title}} The parameter is {{param}}

Dan langkah terakhir adalah menambahkan link untuk menuju halaman parameter dan menambahkan file controller baru pada file index.html . … Param … … … …

Coba akses link baru tersebut dan di bawah ini adalah hasilnya.

Bab 4 Route

62

AngularJs Untuk Pemula

Bab 4 Route

63

AngularJs Untuk Pemula

Bab 5 $watch, $digest dan $apply Sudah kita pelajari bersama pada bab – bab awal bahwa ketika ada perubahan nilai pada view maka perubahan juga akan terjadi pada scope yang ada di controller dan begitu juga sebaliknya ketika nilai scope di controller berubah maka perubahan pada view pun akan terjadi juga. Kemampuan Angular untuk melakukan hal – hal tersebut berhubungan dengan method – method yang dimiliknya yaitu $watch , $digest dan $apply . Secara umum, $watch dan $digest akan dijalankan secara automatis oleh Angular untuk memperbaharui nilai tetapi

ada kondisi dimana kita harus menggunakannya secara manual untuk mengupdate nilai.

5.1 $watch $watch berfungsi untuk mengawasi perubahan nilai yang terjadi pada sebuah variabel di

scope. Parameter pertama dari method ini adalah string dari nama variabel yang akan diawasi kemudian parameter kedua adalah berupa fungsi yang akan dijalankan (listener) ketika nilai yang diawasi berubah. Saya sertakan potongan kode contoh di bawah ini untuk memahami cara kerja $watch . {{book}} Book has been changed {{count}} times.