Belajar AngularJS : Perkenalan dan Cara Install AngularJS

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
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 :
Contoh Penggunaan AngularJS
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 !

Artikel Terkait


EmoticonEmoticon