Angular – $http
Minggu kemarin gue nulis tentang Fetch() API. Metode untuk mengambil resource / data dari URL yang diberikan. Method tersebut masih belum banyak digunakan, bahkan sangat sedikit karna baru bisa di terapkan di Chrome dan Firefox versi paling baru.
Nah, kali ini gue coba berbagi tentang $http service di Angular. Service yang fungsinya sama dengan Fetch() API atau fungsi XHR lainnya. Perbedaan yang paling menonjol adalah fungsi ini merupakan fungsi bawaan dari AngularJS dan bisa digunakan tanpa tambahan modul lainnya.
Yang berbeda selanjutnya adalah fungsi ini mempunyai chain success dan error yang sangat memudahkan coder untuk memeriksa hasil pemanggilan. Contoh paling dasar penggunaan success dan error bisa dilihat disini :
|
1 2 3 4 5 6 7 8 9 10 |
// perhatikan metode chaining success dan error $http.get('[url yang menghasilkan data]'). success(function(data, status, headers, config) { //data : berisi data yang diambil //status : status pemanggilan, apakah berhasil (200), not found (404), dll //headers : header data yang diterima }). error(function(data, status, headers, config) { }); |
Memulai Belajar Angular JS
AngularJS adalah framework javascript yang digunakan untuk memaksimalkan elemen HTML menjadi tampilan yang dinamis. Meskipun masih terbilang muda, framework ini sudah banyak digunakan. Beberapa aplikasi yang sudah menggunakannya antara lain Youtube on PS3, Vevo, ga.me, Sky Store, dan MSNBC.
Salah satu fitur yang paling utama dan belum gue temuin di framework lain adalah Two Way Data -Binding. Fitur ini memungkinkan nilai elemen terhubung langsung dengan model. Ketika model / variabel di dalam controller diubah, maka tampilan di dalam DOM Element akan ikut berubah. Bergitupula apabila tampilan di elemen diubah, maka model di dalam controller pun akan ikut berubah. Contohnya seperti di bawah ini
See the Pen AngularJS – Two Way Data-Binding by Afief Yona Ramadhana (@afief) on CodePen.14290
ubah text yang ada di dalam textbox
Selain fitur tersebut, fitur lain yang menarik juga adalah Template. Kita bisa membuat template dari HTML biasa, lalu membinding setiap elemen ke dalam model sehingga tampilannya menjadi dinamis. Kita juga bisa membuat beberapa tampilan dengan HTML yang terpisah, lalu membuatnya menjadi halaman-halaman yang terpisah dengan menggunakan ngRoute.
Fitur – fitur tersebut dan fitur lain seperti MVVM, Directive, Service, dll dapat dipelajari dengan mudah dan menyenangkan di codeshool.com. Situs tersebut menyediakan course gratis bagi yang mau belajar AngularJS, dengan menonton beberapa video yang berisi penjelasan-penjelasan singkat namun terpapar dengan baik. Kemudian kita juga bisa mengerjakan contoh kasus pada setiap sesinya untuk dapat melanjutkan ke sesi course selanjutnya. Selamat Belajar 😀