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

TagDefinisi

Ng-appMenyatakan 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-classMemungkinkan atribut kelas yang akan dimuat secara dinamis

Ng-controllerMenentukan javascript controller kelas yang mengevaluasi ekspresi HTML

Ng-repeatInstantiate sebuah elemen sekali per item dari koleksi

Ng-show & Ng-hidePersyaratan 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-viewBasis 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 ControllerSetiap 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.