Pada pembahasan sebelumnya tentangĀ Cara Membuat Keranjang Belanja Dengan AngularJs Part1 kita sudah membuat desaign database dan struktur htmlnya yang sudah diberikan direktif yang kita butuhkan. Oke selanjutnya pada artikel tentang Cara Membuat Keranjang Belanja Dengan AngularJs Part2 kita akan menampilkan data produk yang sudah kita siapkan datanya di database.

Script angularjsnya untukĀ Cara Membuat Keranjang Belanja Dengan AngularJs Part2 saya pisahkan dengan struktur html, jadi kita buat file baru dengan nama angular.js dan berikut ini adalah fungsi yang ada di dalam controller untuk menampilkan datanya.

Dan jika sudah maka kita buat file baru dengan nama post.php untuk melakukan request database atau permintaan mengambil data untuk ditampilkan.

Teman-teman bisa sesuaikan nama username, password, database dan nama tabelnya sesuai dengan yang teman-teman buat.

Lalu teman-teman perhatikan struktur html pada bagian menampilkan data produknya.

ng-init=”tampilProduk() saya berikan untuk menjalankan fungsi tampilProduk yang sudah di buat di controller. Dan saya tampilkan semua data dengan ng-repeat=”produk in dataProduk” dimana nama dataProduk di ambil dari $scope.dataProduk = response.data; yang ada di fungsi tampilProduk(). Lalu saya cetak dengan ekspresion kurang kurawel dua kali {{}} sesuai nama yang di ambil dari array data di file post.php. Dan terakhir saya berikan ng-click=”tambahKeranjang(produk) di dalam tombol tambah keranjang untuk menjalankan fungsi yang akan kita buat selanjutnya untuk menambahkan item yang kita pilih.

Demikian artikel tentang Cara Membuat Keranjang Belanja Dengan AngularJs Part2. Pada artikel ini kita sudah selesai menampilkan data produknya dan akan kita lanjutkan pada artikel selanjutnya tentang Cara Membuat Keranjang Belanja Dengan AngularJs Part3 untuk membuat keranjang belanja dan menambahkan keranjang belanja.