Membuat Add List dan Search List Menggunakan AngularJS

Hi Coder! disini saya akan berbagi tutorial tentang bagaimana caranya membuat sebuah list menggunakan AngularJs. Sebagaimana kita tahu AngularJs adalah salah satu front-end framework javascript yang bersifat MVC (Model-View-Controller) dan sudah sangat populer sekali. Selain membangun web application yang canggih, AngularJs juga digunakan untuk membangun Hybrid Mobile Applicaton dengan Ionic Framework. Nah, dalam pembuatan list ini, nantinya kita bisa melakukan Add List melalui form input, melakukan pencarian pada form search, dan menghapus list yang tidak diperlukan menggunakan Delete Button. Dengan melakukan tiga oprasi berikut, AngularJs hanya membutuhkan baris kode yang simpel dibandingkan dengan framework yang lain, inilah kelebihan AngularJs.

Persiapan

Dalam tutorial ini kita harus mengunduh file angular.min.js melalui website resmi AngularJs, dalam hal ini saya mengunduhnya melalui bower. Saya juga menggunakan Bootstrap agar terlihat makin cantik. Kemudian, saya juga menggunakan font-awesome agar tampilan delete button-nya lebih menarik. semuanya saya install menggunakan bower.

Install AngularJs :

bower install angularjs

Install Bootstrap :

bower install bootsrap

Install font-awesome :

bower install font-awesome

Install semuanya dalam folder yang sama. Agar bisa diakses melalui localhost, saya menempatkanya dalam folder yang berada di dalam folder htdocs. Terakhir, gunakan code editor favorite kamu, saya sendiri pakai Sublime text 3.

Menghubungkan file

Supaya bisa menggunakan AngularJs, Bootstrap, dan font-awesome untuk aplikasi yang akan saya buat, saya akan menghubungkanya dalam index.html , buat juga file app.js dan simpan dalam folder yang sama dengan file index.html. Berikut adalah baris kodenya

Sebagai tambahan, struktur folder yang saya buat adalah seperti ini.

folder list saya tempatkan didalam folder htdocs, agar bisa diakses melalui localhost.

 Membuat Form Input, Form Search, dan List

Terlebih dahulu saya membuat header kemudian membuat dua buah form input. Yang pertama adalah form nama dan yang kedua adalah form usia lalu membuat sebuah button untuk memasukan data yang diinput melalui dua form tadi. Selanjutnya membuat form search, list, dan button delete.

perhatikan pada baris pertama, terdapat sebuah directive yaitu ng-controller. Gunanya adalah membuat controller yang nantinya akan mengendalikan view yang ada pada tag tertentu, dalam hal ini adalah tag <div> yang ada dibaris pertama. Artinya, ng-controller akan bekerja sampai tag penutup </div> yang ada pada baris ke 32.

pada baris 11 dan 15 terdapat directive ng-model, value dari kedua directive ini nantinya akan terhubung dengan $scope controller di app.js. fungsinya menginput data yang nantinya akan ditampilkan di list.

ng-repeat pada baris 25 juga merupakan sebuah directive yang funsinya me-repeat data array, dan akan di hubungkan dengan $scope controller yang kemudian akan menarik data yang ada pada $scope. pada baris yang sama, proses pencarian list menggunakan filter:cari, filter ini secara langsung akan terkoneksi dengan ng-model pada form search di baris 22.

silahkan searching di google tentang Angular Directive

Membuat app.js

Dalam AngularJs, hal pertama yang harus dibuat adalah module kemudian controller. Pada controller saya membuat beberapa $scope. Yang pertama adalah $scope untuk membuat data array yang nantinya akan ditampilkan di list. Kedua, $scope untuk form input yang akan menampilkan data yang diinput ke dalam list. Ketiga, $scope untuk men-delete list. Berikut baris kodenya

Running di Browser

Nah, jika kamu mencoba run di browser pasti tidak akan berhasil. Kenapa? karena saya belum memasang ng-app. ng-app adalah sebuah directive yang akan menjalankan seluruh script Angular pada suatu halaman html. Maka, untuk menjalankanya saya akan memasang ng-app dengan nama "kode", sesuai dengan parameter yang ada pada module.

Hola! aplikasinya sudah jadi, sekarang kamu boleh run di browser dan lihat hasilnya.