Mengenal Apa Itu Angular JS
Apa Itu Angular JS
Sesuai yang telah disinggung di
awal bahwa AngularJS merupakan develop dari Google dan hingga sekarang ini
sudah banyak digunakan untuk membangun web aplikasi. AngularJS juga dikenal
sebagai framework javascript paling populer di kalangan developer karena dapat
diandalkan. Open source ini masuk ke dalam pembangunan web secara front end.
Secara umum, konsep dasar Angular
ini adalah meningkatkan fungsi dari HTML untuk membangun web app menjadi lebih
baik lagi. Pada mulanya HTML digunakan untuk membuat halaman statis saja, namun
dengan adanya Angular ini HTML bisa berubah fungsi untuk membuat web app
sehingga tampilannya menjadi lebih baik.
1.
Tahap
Persiapan
Ketika
memulai pembelajaran, tentunya membutuhkan peralatan yang dibutuhkan untuk
belajar. Langkah awal yang perlu Anda lakukan adalah dengan mencari AngularJS
versi terbaru melalui situs resminya. Berikut langkah-langkahnya :
·
Kunjungi situs resminya di https://angularjs.org/.
· Setelah halaman utama terbuka, pilih opsi Download
AngularJS dan sistem akan memunculkan pop-up pilihan download.
· Pada opsi Branch, pilih versi terbaru atau latest dan
yang sudah stabil.
· Di bawahnya, Anda bisa memilih opsi sesuai kebutuhan,
disini bisa mencoba versi .Zip.
· Ketiga opsi sisanya dibiarkan saja karena itu sudah
default dari sistem AngularJS. Klik tombol Download dan halaman baru akan
terbuka.
· Di halaman baru tersebutlah versi AngularJS terbaru
yang bisa digunakan. Cara menggunakannya cukup mudah, Anda tinggal menyalin URL
ke notepad terlebih dahulu dan nantinya bisa langsung digunakan untuk membuat
web app.
2.
Komponen
dasar
Seperti halnya source code lainnya, AngularJS juga memiliki
komponen dasar yang digunakan dalam pemrograman pembuatan web app. Kali ini
terdapat 3 komponen utama yang sering digunakan dalam pemrograman, yaitu :
· ng-bind – Framework ini digunakan untuk mengikat data
aplikasi AngularJS yang terdapat di tag HTML.
· ng-app – Framework yang berfungsi untuk memberitahukan
AngularJS untuk tetap aktif di bagian halaman ini, mencakup seluruh dokumen
yang dibuat. Dapat dikatakan juga sebagai link yang mengarahkan aplikasi ke
HTML.
· ng-model – Framework yang digunakan untuk
menghubungkan antara formulir dan model. Artinya adalah jika terjadi perubahan
pada kontrol pembaruan data, maka akan memperbarui data dalam model juga.
3. Contoh Script Dan Informasi Detail
Sekarang, Anda akan mempelajari contoh script yang sudah jadi dan bagian apa saja yang terdapat pada script ini. Persiapkan notepad terlebih dahulu atau text editor lain seperti Notepad++ dan sebagainya. Salin script code di bawah ini ke notepad dan simpan dalam bentuk file .HTML, kemudian buka menggunakan browser untuk mengetahui hasilnya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Angularjs</title>
<script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js”></script>
</head>
<body ng-app = “myapp”>
<div ng-controller = “HelloController” >
<h2>Selamat Datang {{helloTo.title}} di Nusapedia.com</h2>
</div>
<script>
angular.module(“myapp”, [])
.controller(“HelloController”, function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = “Wisatawan”;
});
</script>
</body>
</html>
4.
Cara Kerja
Angular
Script tadi ketika dibuka di browser, tidak langsung terbuka
secara cepat dan butuh proses untuk membaca dan memvalidasi data. Awalnya file
.HMTL tersebut akan dievaluasi oleh browser dan AngularJS Javascript akan
melakukan load data. Dari situlah kemudian Javascript melakukan fungsi
kontrolnya.