Membuat Buku Tamu – AngularJS

 

Pada catatan sebelumnya kita telah membuat buku tamu dengan Laravel sekarang kita akan mencoba membuat buku tamu dengan menggunakan AngularJS bagaimanakah caranya, ikuti langkah-langkah berikut ini.

1. Buka web Editor dan masukan kode berikut ini dan simpan dengan nama buku-tamu.html

2. Lalu buat file js, buka web editor dan ketikan kode berikut ini dan simpan dengan nama buku-tamu.js dan simpan dalam folder js/

(function(){
 var app = angular.module('buku-tamu', [ ]);
 
 app.controller('BukuTamuCtrl', [ '$scope', function($scope) {
  $scope.guestbooks = lists;
  
  $scope.addGuestBook = function () {
   $scope.guestbooks.push({
    name: $scope.gbName,
    comments: $scope.gbComments
   });
   // Clear input fields after push
   $scope.gbName = "";
   $scope.gbComments = "";
  };
 
    }]);
    
 var lists = [
  {
   name: 'Irfan Mahfudz Guntur',
   comments: 'Selamat datang di buku tamu kita',
  },
  {
   name: 'Hasan Monroe',
   comments: 'Haiii salam kena yaa dari hasan',
  },
 ];
 
})();

3. buka web browser dan ketikan alamat http://localhost/buku-tamu.html maka akan ditampilkan tampilangambar 2.1 sebagai berikut dan coba masukan Nama dan Pesan kemudian tekan tombol Kirim.

Gambar 2.1