JavaScript (JS) merupakan bahasa pemrograman yang digunakan oleh front end dalam membuat tampilan website menjadi lebih interaktif. Website yang kompleks tentu saja harus memberikan performa dan pengalaman yang baik bagi pengguna. Dengan menggunakan JavaScript, maka website akan terlihat lebih dinamis.
JavaScript sendiri merupakan bahasa yang berjalan pada sisi front end dan tergolong dalam bahasa pemrograman tingkat tinggi. Kemudian, dapat berjalan di sisi front end maupun back end.
AngularJS
AngularJS merupakan framework JavaScript yang berjalan di sisi client dengan menggunakan pola MVC untuk membuat tampilan website lebih dinamis. Untuk sekarang, AngularJS bersifat open source dan sepenuhnya didasarkan pada HTML dan JavaScript. Yang mana, dapat mengubah HTML statis menjadi HTML yang dinamis.
Sejarah Angular JS sendiri dulunya adalah gagasan dari seorang engineer Google, Misko Hevery dan Adam Abrons. Google merilis versi pertamanya pada tahun 2012. Sejak saat itu, AngularJS terus berkembang.
AngularJS menggunakan arsitektur Model-View-Controller (MVC) yang digunakan dalam pengembangan aplikasi berbasis web.
Jenis arsitektur ini terdiri dari:
- Model – struktur data yang mengelola informasi dan menerima input dari controller.
- View – representasi informasi.
- Controller – merespons input dan berinteraksi dengan model.
Dalam konteks Angular JS, model merujuk pada framework, sedangkan view adalah HTML dan control adalah JavaScript.
Kelebihan AngularJS
Ada beberapa alasan mengapa AngularJS cukup populer di kalangan web developer:
- Penyatuan data dua arah (two-way data binding) – Karena arsitektur Angular JS menyatukan JavaScript dan HTML, kode untuk kedua bahasa ini sudah saling tersinkron. Dengan begitu, developer bisa menghemat waktu untuk menulis kode.
- Directive – Dengan directive, framework ini menyempurnakan fungsionalitas file HTML. Nah, untuk mengaktifkan directive, developer perlu menambahkan prefiks ng- ke atribut HTML. Berikut adalah contoh penggunaan directive:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="age='20'">
<p>Input your age:</p>
<p>Age: <input type="text" ng-model="age"></p>
<p>You wrote: {{ age }}</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="age='20'">
<p>Input your age:</p>
<p>Age: <input type="text" ng-model="age"></p>
<p>You wrote: {{ age }}</p>
</div>
</body>
</html>- Struktur kode – Menggunakan template framework ini, Anda bisa membuat aplikasi dengan struktur kode yang rapi. Selain menghemat waktu, stuktur kode juga memudahkan Anda memodifikasi atau memperbaiki aplikasi.
- Pengujian – Framework ini mendukung pengujian unit dan integrasi.
- Terus berkembang – AngularJS semakin berkembang, baik dari segi fungsionalitas maupun penggunanya. Framework ini juga menyediakan banyak artikel dan tutorial yang selalu update.
- Kompatibel dengan perangkat mobile dan desktop – AngularJS bisa berjalan di hampir semua web browser, di perangkat mobile dan desktop.