Penggunaan Controller Pada AngularJS

Setelah sebelumnya kita telah mengetahui tentang Directive, Module dan Expression pada AngularJS maka kali ini kita akan mempelajari tentang Controller. Controller dapat mengkontrol data dari aplikasi angular sebagai contoh kita lihat javascript object yang bernama kantong dibawah ini:

Baca Sebelumnya:

• Pengetahuan Dasar AngularJS

kita membutuhkan sebuah service untuk dapat menampilkan object tersebut pada sebuah halaman web. maka untuk melakukannya kita membutuhkan sebuah controller. Sehingga dengan controller kita dapat mendefinisikan perilaku aplikasi kita dengan menetapkan function dan value.

Langkah-langkahnya ialah yang pertama buat modul untuk aplikasi angular kita yang diberi nama belanja dengan nama file app.js seperti dibawah ini.

Kemudian tambahkan controller yaitu BelanjaController.
Dan masukan kedalam aplikasi kita, sehingga menjadi seperti kode dibawah ini.
Kemudian masukan variabel kantong diatas kedalamnya. sehingga menjadi rangkaian kode seperti dibawah ini.
Lalu kita set kantong sebagai properti dari controller tersebut dengan menambahkan kode sepeti dibawah ini.

this.produk = kantong;

Kode tersebut dimasukan kedalam controller sebagai properti dari controller tersebut yang di set sama dengan kantong. Sehingga menjadi kode aplikasi lengkap dengan nama file app.js seperti dibawah ini.

app.js

Kini sudah lengkap aplikasi angular kita tersebut, dan sekarang bagaimana cara mengatur agar object tersebut dapat terlihat pada halaman html. yaitu sebagai berikut

Disini kita memiliki file html pertama dengan kode awal yaitu.

Sekarang mari kita muat data dari angular kedalam halaman html dengan menambahkan ng-controller directive.

ng-controller="BelanjaController as belanja"

Sehingga menjadi rangkaian kode lengkap sebagai berikut dengan nama file angular-controller.html untuk menampilkan data produk.

angular-controller.html

Tampilan angular-controller.html ketika dirender pada browser seperti gambar 4.0 dibawah ini

Gambar 4.0

DOWNLOAD FILE PENGGUNAAN CONTROLLER