Seperti tulisan kami sebelumnya tentang Javacript Framework AngularJs yang mana famework besutan google ini sangat populer baik di indonesia maupun di dunia, selain karena memiliki keunggulan dalam banyaknya perogrammer dan developer menggunakan JavaScript AngularJs membuat Dokumentasi yang lengkap mengenai masalah – masalah yang berkaitan dengan AngularJs. Selain Dokumentasi yang lengkap juga sangat banyak tersedia Ebook – Ebook gratis buatan komunitas pencinta AngularJS tentang cara belajar AngularJs bahkan video tutorial belajar AngularJs juga sangat banyak di Youtube.
Langsung saja kita praktek belajar membuat Aplikasi "Hello World" dengan AngularJS, persiapan yang perlu kamu siapkan sebelumnya kamu tentunya sudah menginstall webserver di localhost menggunakan XAMPP, dan download AngularJS disitus resminya https://angularjs.org/ saat tulisan ini ditulis versi stabil dari AngularJs adalah versi AngularJS v1.5.2.
Jika semua persiapan sudah lengkap, mari kita lanjutkan belajarnya. Buat folder baru di server XAMPP kamu, dan beri nama "AngularJS" (biar lebih rapih). Dalam folder AgularJS, buat file baru dengan nama "angular.min.js" yang berisi code JavaScript AngularJS yang sudah kamu download sebelumnya. Selanjutnya buat file baru dengan nama "index.html", yang berfungsi untuk menampilkan applikasi Hello World kita di tampilan layar nantinya.
Struktur folder pada server
Tuliskan code html berikut dalam file index.html
<!DOCTYPE html>
<html ng-app>
<head>
<title>Mari Belajar Angular JS</title>
<script src="angular.min.js" type="text/javascript"></script>
</head>
<body>
<p>Your Name <input type="text" ng-model="yourname" /></p>
<p>Hello {{ yourname }}</p>
</body>
</html>
Jika berhasil akan terlihat seperti ini :
Penjelasan Singkat :
Fungsi "ng-app" AngularJS pada Tag HTML
Kita bisa melihat "ng-app" yang dituliskan dalam tag HTML, menurut kamu apakah fungsi dari ng-app tersebut? Jawabannya dengan mendeklarasikan ng-app dalam sebuah tag pada HTML yang artinya akan memberitahukan AngularJS dimana dia akan berjalan. Seperti contoh diatas, AngularJS berada dalam tag <html> dan dia akan berjalan diseluruh bagian dari tag tersebut. Seandainya jika dalam kasus lain kita membuat "ng-app" berada dalam tag lain seperti berada pada tag <div>, maka AngularJS hanya akan berjalan pada tag tersebut. Berikut contoh penggunaannya :
<!DOCTYPE html>
<html>
<head>
<title>Mari Belajar Angular JS</title>
<script src="angular.min.js" type="text/javascript"></script>
</head>
<body>
<div ng-app>
<!--
code AngularJS kamu disini !
-->
</div>
</body>
</html>
Fungsi "ng-model" AngularJS
Yang dimaksud dengan atribut ng-model pada AngularJS adalah Atribut yang digunakan untuk mendefinisikan sebuah model, dimana AngularJS merupakan framework berbasis MVC. Pada contoh penggunaan atribut ng-model diatas dengan nama "yourname" yang berfungsi Ketika value dari textbox bersangkutan dimodifikasi, maka value dari model ng-model tersebut juga ikut berubah. Sedangkan perintah {{ yourname }} akan berguna untuk menampilkan data pada model "yourname" tersebut ke layar.
Pelajaran singkat diatas mungkin membuat kita semakin penasaran dalam belajar AngularJS kedepannya, oh iya, jika cara belajar AngularJs langsung di localhost membuat kamu boring, sekarang kamu juga bisa lho belajar online, dengan memanfaatkan sebuah website yang interaktif buatan Levi Botelho yang bertujuan untuk mempermudah user dalam belajar tanpa harus ribet mencari hostingan atau menggunakan hostingan di localhost. Selain itu juga disediakan ducument yang lengkap serta step by step cara belajar AngularJS framework JavaScript ini. Langsung saja kunjungi website resminya "Learn Angular".
Sampai jumpa pada pelajaran ngoding sampai ngeh di ngehh.id tentang pembuatan aplikasi AngularJS selanjutnya.
No comments:
Post a Comment