Share

Module Pada AngularJS

AngularJS mendukung pendekatan modular. Module digunakan untuk logika yang terpisah seperti : service, controller, application, dan lain lain dari kode sumber dan menjaga supaya kode sumber lebih mudah dimaintain. Kita mendefinisikan module ke dalam file js yang terpisah dan penamaannya sesuai dengan nama module-nya. Untuk contoh di bawah kita akan membuat dua module.

  • Module Aplikasi : digunakan untuk menginisialisasi aplikasi dengan controller.
  • Module Controller : digunakan untuk mendefinisikan controller.

Kita akan menggunakan module aplikasi dengan directive ng-app, dan module controller dengan directive ng-controller. Selanjutnya, kita mengaitkan kedua module ini di halaman HTML.

Buat file untuk module aplikasi dengan nama MainApp.js

Buat file untuk module controller dengan nama MemberController.js

Kemudian, buat file htmlnya

Silakan dicoba 🙂

Pengisian dan Validasi Form Pada AngularJS

AngularJS juga bisa digunakan di dalam pengisian data sekaligus validasi form. Kita bisa menggunakan event ng-click untuk menghandel klik dari button. Kita juga bisa menggunakan $dirty dan $invalid sebagai validasi dari inputan.

AngularJS menyediakan banyak event sebagai kontrol pada HTML. Sebagai contoh, ng-click pada umumnya digunakan pada button. Di bawah ini adalah beberapa event :

  • ng-click
  • ng-dbl-click
  • ng-mousedown
  • ng-mouseup
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-keydown
  • ng-keyup
  • ng-keypress
  • ng-change

Untuk validasi data, kita bisa menggunakan :

  • $dirty : menyatakan bawah value telah dirubah
  • $invalid : menyatakan value yang diinput salah
  • $error : menyatakan error

Contoh penggunaannya seperti di bawah ini :

Silakan mencoba kode di atas, cukup mudah bukan?

Untuk tutorial mengenai AngularJS yang lain, silakan klik di sini.