AngularJS adalah sebuah framework JavaScript open-source yang digunakan untuk membangun aplikasi web satu halaman (single-page applications atau SPA). Dikembangkan dan dipelihara oleh Google, framework ini sangat populer karena kemampuannya dalam menyederhanakan pengembangan aplikasi web yang kompleks dengan arsitektur Model-View-Controller (MVC) atau Model-View-ViewModel (MVVM).
Pengertian AngularJS
Secara sederhana, AngularJS dapat diibaratkan sebagai “jembatan” yang menghubungkan HTML dengan JavaScript. Framework ini memungkinkan Anda untuk memperluas sintaks HTML (seperti atribut dan tag) untuk membuat elemen yang dinamis dan interaktif. Dengan AngularJS, Anda dapat membuat halaman web yang memperbarui dirinya sendiri secara real-time tanpa perlu memuat ulang seluruh halaman.
Beberapa konsep kunci yang perlu dipahami dalam AngularJS adalah:
- Data Binding: Ini adalah fitur inti yang menghubungkan data dari model (JavaScript) langsung ke tampilan (HTML) dan sebaliknya. Saat data di model berubah, tampilan akan otomatis diperbarui, dan saat tampilan berinteraksi (misalnya, input form), data di model juga akan ikut berubah. Data binding di AngularJS mengurangi kebutuhan untuk memanipulasi DOM (Document Object Model) secara manual.
- Directives: Directives adalah atribut khusus yang memperluas fungsionalitas HTML. Contohnya adalah
ng-appyang menginisialisasi aplikasi AngularJS,ng-modeluntuk data binding, danng-repeatuntuk perulangan elemen. - Scope: Scope adalah objek JavaScript yang bertindak sebagai “jembatan” antara controller (logika aplikasi) dan view (HTML). Ia menyimpan data dan logika yang akan ditampilkan.
- Controller: Controller adalah fungsi JavaScript yang mengontrol data dan logika bisnis dari aplikasi. Ia bertanggung jawab untuk menyediakan data ke
$scopedan memproses input dari pengguna.
Cara Menggunakan AngularJS
Untuk memulai menggunakan AngularJS, Anda hanya perlu menambahkan file JavaScript AngularJS ke dalam proyek HTML Anda. Anda dapat mengunduhnya dari situs resmi atau menggunakannya melalui Content Delivery Network (CDN).
1. Memulai dengan CDN
Cara termudah untuk memulai adalah dengan menambahkan tag <script> berikut di dalam tag <head> atau di akhir tag <body> dari file HTML Anda:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
Ini akan memuat versi terbaru AngularJS dari Google CDN.
2. Membuat Aplikasi Sederhana
Sekarang, mari kita buat aplikasi “Hello World” sederhana untuk melihat bagaimana AngularJS bekerja.
<!DOCTYPE html>
<html>
<head>
<title>Aplikasi AngularJS Pertama</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="">
<h1>Aplikasi Sederhana AngularJS</h1>
<p>Masukkan Nama Anda: <input type="text" ng-model="nama"></p>
<h2>Halo, {{ nama }}</h2>
</body>
</html>
Mari kita pecah kode di atas:
ng-app="": Atribut ini menginisialisasi aplikasi AngularJS. Ketika Anda menambahkan atribut ini ke elemen HTML (dalam kasus ini,<body>), AngularJS akan “mengetahui” bahwa elemen tersebut adalah bagian dari aplikasi yang harus ia tangani.ng-model="nama": Ini adalah directive yang mengikat nilai dari input field ke sebuah variabel bernamanamadi dalam$scope.{{ nama }}: Ini adalah ekspresi data binding. Ekspresi ini akan menampilkan nilai dari variabelnama. Ketika Anda mengetik di input field, nilai dari{{ nama }}akan diperbarui secara real-time.
Manfaat Menggunakan AngularJS
- Penyederhanaan Pengembangan: Dengan fitur data binding dan directives, AngularJS mengurangi jumlah kode JavaScript yang harus Anda tulis untuk memanipulasi DOM.
- Arsitektur Terstruktur: Arsitektur MVC/MVVM memisahkan logika (controller), data (model), dan tampilan (view) sehingga kode menjadi lebih rapi, terorganisir, dan mudah dikelola.
- Dukungan Komunitas: Sebagai framework yang didukung oleh Google, AngularJS memiliki komunitas yang besar dan dokumentasi yang lengkap.
- Testabilitas: Struktur AngularJS dirancang agar mudah diuji (testable), sehingga memudahkan pengembang untuk memastikan aplikasi berjalan dengan benar.
AngularJS adalah alat yang kuat untuk membangun aplikasi web modern yang dinamis dan interaktif. Meskipun kini sudah ada penerusnya, yaitu Angular (tanpa JS), memahami dasar-dasar AngularJS tetap penting karena banyak konsep yang masih relevan.
