Pengetahuan Dasar AngularJS

Sebelum menggunakan AngularJS sebaiknya kita sudah mengetahui tentang apa itu HTML, CSS dan Javascript. Dan juga lebih baik mengetahui tentang beberapa pengujian otomatis seperti BDD (Behavior Driven Development), TDD (Test Driven Development) dan lain-lain, dan juga pengetahuan tentang beberapa framework dan bahasa pemrograman seperti: JQuery, Ruby on Rail, Python, PHP, Laravel dan juga pengetahuan tentang Database.

Jika kita menggunakan Javascript untuk membuat sebuah website yang dinamis maka Angular adalah pilihan yang tepat dan bijaksana. karena dengan menggunakan Angular kita akan memperoleh beberapa keuntungan yaitu:

Angular akan membantu mengorganisasikan javascript kita.
Angular akan membantu dalam membuat website yang responsive dengan cepat.
Angular bekerja dengan baik jika disandingkan bersama JQuery.
Angular sangat mudah dalam pengujian dan perawatan.

Contoh sederhana AngularJS:

DIRECTIVE

Sebuah tanda directive pada tag html akan memberitahu angular untuk menjalankan beberapa kode javascriptsebagai contoh lihat kode dibawah ini:

1. angular-basic.html

2. angular-basic.js
Directive ng-controller=”BelanjaController” pada tag html memberitahu angular untuk menjalankan javascriptpada function BelanjaController sehingga akan terlihat seperti gambar 3.8 dibawah ini.

Gambar 3.8

Untuk dapat menggunakan angular yang kita butuhkan adalah angular.min.js dan bootstrap.min.css

Download AngularJS – angular.min.js di https://angularjs.org/
Download Twitter Bootstrap – bootstrap.min.css di http://getbootstrap.com/

Sehingga untuk dapat menggunakan angular pada html implementasinya seperti kode dibawah ini.

MODUL

Fungsi modul adalah:

Dimana kita dapat membuat potongan-potongan dari aplikasi angular kita
Membuat kode kita dapat dengan mudah di rawat, di uji coba juga di baca
Dimana kita dapat menetapkan dependency pada aplikasi kita, karena sebuah modul dapat digunakan oleh modul lainnya.

Mari kita buat modul pertama kita seperti kode dibawah ini dengan nama file yaitu app.js

app.js

pada kode diatas angular merupakan pustaka AngularJS kemudian module adalah dimana kita sedang membuat modul dan belanja adalah nama aplikasi lalu tanda [ ] adalah tempat kita untuk menetapkan dependency. jika kita belum menetapkan dependency apapun maka dapat kita kosongkan saja.

maka untuk menggunakannya pada html kita, masukan file app.js tersebut dan gunakan ng-app dengan menggunakan nama aplikasi yang ada pada modul seperti kode sebagai berikut

ng-app adalah sebuah directive pada tag html yang yang akan menjalankan modul belanja ketika dokumen pertama kali dimuat.

EXPRESSIONS

Dengan menggunakan ekpresi pada angular kita diperbolehkan untuk memasukan nilai yang dinamis pada html seperti contoh dibawah ini:

{{ 4 + 2 }} akan menghasilkan 6 ini disebut operasi numerik

{{ “selamat” + ” datang”}} akan menghasilkan selamat datang ini disebut operasi string

dan masih banyak lagi operasi-operasi lainnya yang dapat anda cek di https://docs.angularjs.org/guide/expression

angular-module.html

Tampilan angular-module.html ketika dirender pada browser seperti gambar 3.9 dibawah ini