AngularJs adalah salah satu framework javascript yang sedang popular saat ini. Karena kelebihannya yang sangat membantu dalam pembuatan website. AngularJs di maintance oleh google dan angular ini jika di lihat dari kelebihannya hampir sama dengan ajax.  Dimana ketika ada perubahan data maka dia tidak akan melakukan reload halaman pada sebuah website. Dan bisa memanipulasi routing seperti codeigniter. Nah pembahasan kali ini yang pertama kita akan membahas tentang Cara Menampilkan Todolist Dengan Menggunakan AngularJs.

Cara Menampilkan Todolist Dengan Menggunakan AngularJs disini saya menggunakan ng-init untuk menampung data yang akan ditampilkan. Dimana ng-init ini hampir sama seperti variable baru untuk menampung sebuah data. Saya menggunakan ng-init karena disini kita belum bermain dengan database. Dan berikut ini adalah struktur html dan data dari ng-init yang akan saya tampilkan.

Jika sudah maka selanjutnya kita akan menampilkan data dengan menggunakan direktif ng-repeat. Dan berikut ini adalah scriptnya teman-teman bisa letakkan di bawah div ng-init.

Oke jika sudah saya jelaskan terlebih dahulu untuk script di atas. Disini tag li saya berikan direktif ng-repeat yang didalamnya terdapat nama data in dataTodolist. Nama data bisa dikatakan untuk menampung dan menyusun data yang akan di cetak teman-teman bebas memberi namanya dan in disini mutlak fungsi dari angularJs kemudian di sambung dengan nama dari variable ng-init.

Jika teman-teman buka di browser maka hasilnya akan seperti pada gambar di bawah ini.

Cara Menampilkan Todolist Dengan Menggunakan AngularJs

Dengan script yang simple kita bisa mencetak data array hanya dengan menggunakan direktif ng-repeat. Dan masih banyak direktif atau kosa kata yang disediakan oleh angularJs. Nah pembahasan selanjutnya masih menggunakan file yang sama dengan ini tapi ada penambahan fitur input untuk membuat search data dengan menggunakan angularJs yang akan langsung tampil ke dalam todolist tanpa melakukan mereload halaman.

Demikian pembahasan tentang Cara Menampilkan Todolist Dengan Menggunakan AngularJs. Semoga dapat bermanfaat dan buat teman-teman yang ingin eksplore lagi bisa belajar langsung di website resminya https://angularjs.org/ .