AngularJS, sebuah front-end framework untuk JavaScript yang dikembangkan oleh Google, belakangan ini sedang sering dibicarakan di kalangan developer. Tutorial AngularJS di artikel ini akan membantumu dalam memahami seputar AngularJS.
AngularJS mempunyai fitur-fitur yang sangat kuat sehingga proses pengembangan aplikasi bisa menjadi jauh lebih singkat dan juga sangat mudah dipelajari. Framework AngularJS ini menjadikan kode Javascript lebih terstruktur karena AngularJS menerapkan pola MVC pada aplikasi yang akan kita kembangkan.
Beberapa contoh situs atau aplikasi yang dibuat menggunakan AngularJS di antaranya adalah Youtube for PS3, Netflix, Weather.com dan lainnya. Lengkapnya bisa dilihat pada situs ini.
Untuk mengimplementasikan AngularJS, kita perlu menggunakan directive pada aplikasi web kita. Bagi yang belum tahu, directive merupakan penanda pada elemen DOM (Document Object Model) seperti atribut, nama elemen, atau kelas CSS (Cascading Style Sheet).
Sebagai contoh penggunaan AngularJS di artikel ini, kita akan membuat aplikasi web sederhana seperti video di bawah ini:
Untuk membuat aplikasi web seperti video di atas menggunakan AngularJS, ikuti tahapan berikut:
<html data-ng-app>
<head>
<script src="lib/angular/angular.js"></script>
</head>
<body>
<div>
<label>Tulis disini :</label>
<input type="text"data-ng-model="hasilTulisan">
<hr>
<h1>{{hasilTulisan}} </h1>
</div>
</body>
</html>
<html data-ng-app> berfungsi agar AngularJS berjalan pada blok elemen di mana directive ng-app ini berada. Pada contoh di atas, ng-app berada pada elemen <html>, artinya semua yang berada pada blok <html> bisa menggunakan AngularJS. ng-app sendiri adalah directive bawaan AngularJS dan {{hasilTulisan}} merupakan data binding expression.
<html data-ng-app>
<head>
<script src="lib/angular/angular.js"></script>
<style type="text/css">
.tengah{
position:absolute;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
left:0;
right:0;
top:0;
bottom:0;
}
</style>
</head>
<body>
<div>
<label>Tulis disini :</label>
<input type="text"data-ng-model="hasilTulisan">
<hr>
<h1>{{hasilTulisan}} </h1>
</div>
</body>
</html>
<div class="tengah" style="background-color:white; width:300px; height:300px;" >
Sepert yang diketahui di tutorial AngularJS ini, kita hanya perlu menulis kodingan seperti di bawah ini untuk mendapatkan hasil yang diinginkan:
<html data-ng-app>
<head>
<script src="lib/angular/angular.js"></script>
</head>
<body>
<div>
<label>Tulis disini :</label>
<input type="text"data-ng-model="hasilTulisan">
<hr>
<h1>{{hasilTulisan}} </h1>
</div>
</body>
</html>
Sekarang bandingkan dengan ketika menggunakan JavaScript biasa untuk mendapatkan hasil yang sama:
<html>
<script>
function displayType(){
var inputKetikan = document.getElementById("ketikan");
var targetKetikan = document.getElementById("hasilketikan");
targetKetikan.innerHTML = inputKetikan.value;
}
</script>
<body>
<textarea id= "ketikan" onkeyup= "displayType()" ></textarea>
<div id= "hasilketikan"></div>
</body>
</html>
Terlihat jelas bukan bahwa membuat kodingan JavaScript menggunakan AngularJS lebih sederhana dibandingkan dengan cara biasa.
Cisco mengungkapkan tiga kerentanan dalam layanannya. Ini dia penanganannya!
Ini ulasan mengenai keuntungan OptimalCloud Partner Platform, platform baru milik Optimal idM!
Google kenalkan dua koleksi baru dari Coral. Dua koleksi baru ini bakal menambah kemampuan pengembangan…
Raksasa Google baru saja mengembangkan sistem pemindaian kanker payudara berbasis kecerdasan buatan. Bagaimana hasilnya, berikut…
Meski dikenalkan bersamaan dengan Android 10 Beta, sampai kini Bubbles Notifications masih dalam tahap pengembangan.…
Samsung akan kembali memamerkan hasil program C-Lab ke ajang CES 2020. Ini dia proyek dan…