Angular JS pertama kali dikembangkan oleh Misko Hevery dan Adam Abrons pada tahun 2009. Saat ini dimaintain oleh Google. Angular JS adalah open source, bebas dikembangkan oleh siapa saja.
Angular JS adalah framework terstruktur untuk aplikasi web yang dinamis. Framework ini mendukung penggunaan HTML sebagai bahasa template Anda dan memberikan Anda keleluasan pada pengembangan sintak HTML untuk mengekpresikan komponen dari aplikasi Anda secara baik dan ringkas. Data binding dan dependency
injection dapat mengeliminasi banyak kode yang harus Anda tulis. Semua ini dibebankan kepada web browser, membuatnya menjadi partner ideal dengan teknologi server.
Fitur umum Angular JS seperti di bawah :
- Angular JS adalah framework yang efisien untuk membangun Rich Internet Applications (RIA).
- Angular JS memberikan developer pilihan untuk menulis aplikasi pada sisi client dengan javascript dan pendekatan MVC (Model, View, Controller).
- Aplikasi dengan menggunakan Angular JS bisa digunakan di segala web browser. Angular JS secara otomatis menghandle javascript supaya cocok dengan web browser yang digunakan.
- Angular JS adalah open source, gratis! Telah digunakan oleh ribuan developer di seluruh dunia.
Fitur Core dalam Angular JS :
- Data binding : sinkronisasi data otomatis antara Model dan View
- Scope : objek yang mengacu pada model, sebagai perekat antara Controller dan View.
- Controller : kumpulan fungsi-fungsi dari javascript.
- Services : Angular JS datang dengan beberapa built-in services seperti $http untuk membuat sebuah XMLHttpRequests.
- Filters : pilihan item dari sebuah array dan mengembalikan sebuah array baru.
- Directives : marker dari DOM elemen seperti element, attribute, css dan lainnya.
- Templates : tampilan yang dirender dengan informasi dari Controller dan Model.
- Routing : perpindahan tampilan.
- Model View Whatever : Angular JS tidak mengimplementasikan MVC secara umum, melainkan sesuatu yang lebih dekat sebagai MVVM (Model View View Model).
- Deep Linking : mengijinkan Anda untuk meng-encode keadaan dari aplikasi pada URL, sehingga bisa dibookmark. Aplikasi bisa direstore dari URL dari keadaan terakhir.
- Dependency Injection : terdapat built in dependency injection sehingga membantu developer untuk membuat dan mencoba aplikasi secara mudah.
Keuntungan menggunakan Angular JS seperti berikut :
- Angular JS menyediakan kemampuan untuk membuat Single Page Application secara mudah.
- Angular JS menyediakan kemampuan data binding pada html.
- Kode Angular JS adalah unit yang bisa ditest.
- Angular JS menggunakan menggunakan dependency injection.
- Angular JS menyediakan komponen yang bisa digunakan kembali.
- Dengan Angular JS, developer bisa membuat fungsionalitas yang lebih baik dengan kode yang lebih ringkas.
- Dalam Angular JS, View adalah html murni, dan Controller ditulis dalam javascript sebagai business processing.
Adapun Angular JS memiliki kelemahan, antara lain :
- Tidak aman, autentifikasi dari server harus tetap dijaga untuk menjaga keamanan aplikasi.
- Kebergantungan dengan web browser, jika javascript di-disable dari web browser maka semua kode tidak bisa bekerja.
Framework Angular JS bisa dibagi menjadi tiga bagian utama :
- ng-app : definisi arahan dan link dari aplikasi Angular JS ke html.
- ng-model : arahan data dari aplikasi Angular JS ke input kontrol html.
- ng-bind : arahan data dari aplikasi Angular JS ke tag html.
Ok, sebelum lanjut ke tutorial Angular JS, silakan download dulu Angular JS di sini : https://angularjs.org/ . Atau Anda juga bisa langsung mengambil link dari CDN google. Jika Anda mendownload, taruh file js nya di dalam folder dari project Anda. Kode contoh seperti di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>My First Angular JS Code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController" >
<h2>Welcome {{helloTo.title}} to the my first page with Angular JS!</h2>
</div>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "Yudana";
});
</script>
</body>
</html>
Saya akan tulis lebih jauh pada artikel selanjutnya 😀
Artikel selanjutnya mengenai AngularJS :
– Penggunaan Directive pada DOM HTML
Artikel lainnya mengenai AngularJS silakan klik di sini, tutorial AngularJS
