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.