AngularJS adalah Framework JavaScript yang menggunakan prinsip MVC yang dikembangkan oleh Google. AngularJS 1.0 pertama rilis pada tahun 2012 yang dikembangkan dari tahun 2009 oleh Misko Hevery yang merupakan salah satu karyawan Google.
 |
| AngularJS |
Kenapa Harus Belajar AngularJS ?
Kalau soal mengapa belajar AngularJS itu optional dan tergantung kebutuhan. Pada salah satu seminar kemarin yang diisi oleh salah satu developer dari Australia, mereka menggunakan AngularJS untuk keperluan SPA (Single Page Application). SPA itu aplikasi web yang bekerja seperti layaknya aplikasi desktop, tidak perlu melakukan refresh untuk merubah nilai attribut pada web tersebut. Mereka menjelaskan keuntungan-keuntungan SPA ini, salah satunya adalah penghematan penggunaan internet. Selain itu, AngularJS tidak terlalu susah untuk dipelajari.
Apa yang harus kita ketahui sebelum belajar AngularJS?
Sebelum belajar AngularJS, basic yang harus kalian pahami yakni :
- HTML
- CSS
- JavaScript
Selain itu, siapkan teks editor untuk ngoding saya sendiri menggunakan Sublime, untuk teman-teman silahkan menyesuaikan sendiri.
Untuk menggunakan AngularJS caranya sama dengan saat kalian import CSS dan JS pada aplikasi web yang kalian buat tinggal tambahkan :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
Banyak sekali attribut yang baru di AngularJS ini, kita akan inisiasi bersama-sama sambil jalan dalam pembelajaran AngularJS ini. Langsung saja coba kita terapkan dalam contoh kecil di bawah ini :
 |
| Belajar AngularJS |
Pada gambar tersebut, saat saya menginput nama maka nama yang dibawahnya akan terganti secara langsung. Tanpa kalian refresh web browsernya. Untuk full sintaknya silahkan lihat dibwah ini :
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Masukkan Nama di Field ini:</p>
<p>Nama : <input type="text" ng-model="nama" placeholder="Masukkan nama disini"></p>
<h1>Selamat Datang {{nama}}</h1>
</div>
</body>
</html>
Keterangan :
| ng-app | Mendefinisakan bahwa bagian tersebut menggunakan Angular JS |
| ng-model | Berisi variabel yang berfungsi untuk menampung nilai (input, select, textarea), pada contoh diatas yaitu variabel nama |
Kurang lebih seperti itu, untuk pembelajaran yang lebih cepat kalian bisa belajar di W3 School.
Jangan lupa komen kalau ada yang belum dipahami jika berguna silahkan share !
