AngularJS Mengambil Data dari Controller

This entry is part of 4 in the series AngularJS

Setiap variabel yang terdapat pada AngularJS memiliki scope tersendiri. Scope ini dibatasi dengan yang namanya controller, jadi suatu blok html hanya bisa mengakses variabel yang terdapat pada controller yang merupakan scope-nya. Pusing dengan tulisan mending langsung saja lari ke kodingnya.

AngularJS


Langkah pertama tulis terlebih dahulu kerangka dasar Html-nya dimana kita me-load file angularjs dan sebuah file javascript yang bernama aplikasi.js yang nanti akan memuat fungsi controller. Jangan lupa tambahkan ng-app pada tag body

Selanjutnya untuk variabel pada controller yang akan diakses oleh Html tadi kita buat menggunakan JSON dengan cara harcode saja, alias tulis langsung di controller. Simak kodenya di bawah ini, kode ini ditulis pada file aplikasi.js

Dari kode di atas perhatikan nama fungsi-nya karena hal ini sangat penting berhubungan dengan scope data yang akan diakses pada Html.

Kembali pada Html. Di dalam tag body tambahkan sebuah blok div dimana di dalamnya akan memunculkan data yang diambil dari controller.

Blok di atas memiliki attribut ng-controller yang bernilai BukuController (sama dengan nama fungsi pada aplikasi.js). Artinya blok ini memiliki scope BukuController sehingga bisa mengakses variabel yang ada di dalamnya. Kemudian ng-repeat digunakan sebagai perulangan untuk mendapatkan isi array dari variabel pada controller yaitu bukus, 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 ini

Ketika di buka pada browser maka akan ditampilkan data-data yang ada pada controller
view

Di awal saya sudah mengatakan bahwa suatu blok html hanya bisa mengakses variabel yang terdapat pada controller yang merupakan scope-nya. Untuk membuktikannya silahkan copas blok div yang berisi perulangan menampilkan data, taruh di bawah blok sebelumnya dan pada bagian ng-controller ubah nilainya menjadi kosong. Ketika dibuka pada browser maka tidak akan tertampil apapun, kosong belaka.

Facebook Comments
 

Agung Setiawan

Agung Setiawan adalah software engineer di BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

 
Halo, perkenalkan saya Agung Setiawan.
Saya Software Engineer di BukaLapak.
Simak pemikian saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Blog ini saya update seminggu sekali jadi sering-sering saja mampir
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

7 thoughts on “AngularJS Mengambil Data dari Controller

    1. Halo Mas Robi, sudah banyak nih yang menanyakan soal CRUD di Angular
      Masalahnya adalah sekarang Angular sudah muncul yang versi 2 yang mana itu beda sekali dengan versi 1 jadi kalau saya mau meneruskan yang versi 1 ini sayang. Dan saya belum belajar yang versi 2.

Leave a Reply

Your email address will not be published. Required fields are marked *