Download - Angular Js
1. ANGULAR JS
Angular JS adalah front-end framework untuk javascript open-source yang
dikembangkan oleh Google. Dengan fitur-fitur powerfull dari Angular JS, proses
defelopment bias menjadi jauh lebih singkat. Di sisi lain, organisasi kode
javascript menjadi lebih terstruktur dan “bersih” karena penggunaan framework
ini mendorong penerapan pola MVC ataupun MV-Whatever pada aplikasi yang
kita Kembangkan.
2. Tag / Notable AngularJS
Tag AnggularJS memungkinkan pengembang untuk menentukan kustom
dan tag HTML dapat digunakan kembali dengan unsur-unsur tertentu
Tag Definisi
Ng-app
Menyatakan elemen sebagai elemen root dari aplikasi
yang memungkinkan perilaku yang akan diubah melalui
tag HTML kustom.
Ng-bindSecara otomatis mengubah teks dari elemen HTML
dengan nilai ekspresi yang diberikan.
Ng-modelMirip dengan ng-bind, namun memungkinkan data dua
arah mengikat antara tampilan dan ruang lingkup.
Ng-class Memungkinkan atribut kelas yang akan dimuat secara
dinamis
Ng-controllerMenentukan javascript controller kelas yang
mengevaluasi ekspresi HTML
Ng-repeat Instantiate sebuah elemen sekali per item dari koleksi
Ng-show & Ng-
hide
Persyaratan menampilkan atau menyembunyikan
elemen yang tergantung pada nilai ekspresi Boolean.
Ng-switchPersyaratan instantiate satu template dari suatu set
plihan,tergantung pada nilai ekspresi seleksi.
Ng-view
Basis derektif bertanggung jawab untuk menangani rute
yang menyelesaikan JSON sebelum manampilkan
template di dukung oleh controller
Ng-ifJika pernyataan direktif yang memungkinkan untuk
menampilkan elemen berikut jika kondisi benar
3. AngularJS-Biding
Biding merupakan fitur utama dari AngularJS.ia menyediakan mekanisme
sederhana untuk meng-integrasi HTML dengan data kita melalui “. Data-Biding
di web aplikasi. Angular adalah sikronisasi otomatis antara komponen model
dan view.Cara yang angular implementasi pada data-biding memungkinkan kita
melakukan model sebagai satu-satunya sumber kebenaran di aplikasi kita.
View adalah gambaran dari model setiap saat. Ketika model berubah, view
menggambarkan perubahan, begitujuga sebaliknya.
Data-Biding di system Tamplete klasik
Sebagian besar sistem template mengikat data hanya dalam 1 arah: mereka
menggabungkan komponen template dan model bersama-sama kedalam
sebuah view, seperti di ilustrasikan pada diagram di atas. Setelah
penggabungan terjadi, perubahan pada model atau bagian terkati pada view
tidak otomatis terceminkan pada view. Lebih buruk, segala perubahan yang
user buat di view tidak di cerminkan pada model. Ini artinya developer harus
menulis kode yang selalu sinkron view dengan model anda model dengan view.
Data-Binding di template Angular
Cara template angular bekerja berbeda, seperti di ilustrasikan pada diagram di
atas. Mereka berbeda karena template pertama (yang merupakan HTML
uncompiled bersama dengan markup tambahan dan directive) di compile pada
browser, dan kedua, langkah kompilasi menghasilkan live view. Kita katakan
live karena segala perubahan pada view secara langsung dicerminkan pada
model, dan segala perubahan pada model di sebarkan ke view. Ini membuat
model selalu satu-satunya-sumber-kebenaran untuk keadaan aplikasi, sangat
menyederhanakan model pemrograman untuk developer. Anda dapat
menganggap view seperti hanya sebuah proyeksi instan model Anda.
4. Instalasi AngularJS
Sebelum memulai, download terlebih dahulu AngularJS pada
http://angularjs.org/. Pilih versi stabil dan minified.
Setelah di install kita akan belajar hal yang paling dasar, misalkan untuk
memunculkan Hello World.
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.
5. Mengambil Data Dari Controller
Setiap variable yang terdapat pada AngularJS memiliki scope tersendiri.
Scope ini dibatasi dengan controller, jadi suatu blok html hanya bias
mengakses variable yang terdapat pada controller yang merupakan scope-nya.
Langkah pertama tulis terlebih dahulu kerangka dasar html-nya dimana
kita me-load file angularjs dan sebuah file javascript dengan nama aplikasi.js
yang nanti akan memuat fungsi controller. Tambahkan ng-app pada tag body
Selanjutnya untuk variable pada controller yang akan di akses oleh html,
buatlah menggunakan JSON dengan menulis langsung di controller pada file
aplikasi.js.
Dari kode diatas perhatikan nama fungsi –nya karena fungsi tersebut
berhubungan dengan scope data yang akan di akses pada html.
Pada file html, di dalam tag body tambahkan sebuah blok div dimana di
dalamnya akan memunculkan data yang diambil dari controller.
Blok diatas memiliki attribute ng-controller yang bernilai BukuController
(sama dengan nama fungsi pada aplikasi.js). artinya blok ini memiliki fungsi
scope BukuController sehingga bisa mengakses variable yang ada didalamnya.
Kemudian ng-repeat digunakan sebagai perulangan untuk mendapatkan isi
array dari variable pada controller yaitu buku, 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 berikut
Ketika dibuka di bowser akan ditampilkan data-data yang ada pada controller
6. Filter pada AngularJS
AngularJS mengenal yang namanya filter, yang fungsinya digunakan
untuk memformat data yang ditampilakan pada user. Pengguanaan filter pada
angularJS cukup mudah, dengan menambahkan karakter pipe diikuti filter yang
diinginkan pada expression.
1. {{expression | filter }}
Setelah berhasil menampilkan data yang ada di controller pada view. Kemudian
akan di tambahkan dengan menggunakan filter. Bagian yang akan di ubah
adalah judul menjadi uppercase dan penulis menjadu lowercase
Data sebelum difilter
Setelah difilter
Apabila kita memerlukan sebuah filter yang tidak tersedia secara biuilt in,
artinya kita perlu membuatnya sendiri. Untuk membuatnya tambahkan kode
pada file aplikasi.js diatas seperti berikut
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 pada html untuk menerapkan filter yang baru dibuat.