AngularJS
AngularJS merupakan framework javascript berbasis open-source yang dirilis oleh Google pada tahun 2009. Merujuk pada situs resmi AngularJS yaitu (http://angularjs.org), akan kita dapatkan tagline berikut ini"HTML Enhanced for Web apps!"
yang di Maksud dari tagline AngularJS ini adalah HTML yang ditingkatkan fungsinya untuk membangun web app. Melihat sejarah kemunculan HTML, awalnya HTML hanya digunakan untuk membuat dokumen statis (website) bukan untuk membuat web app. Nah, sekarang bayangkan kalau sejak awal HTML memang dikembangkan untuk membuat web app, seperti itulah konsep AngularJS.
AngularJS bukan merupakan pustaka (library) javascript melainkan sebuah framework yang solid untuk membangun web app, seperti framework javascript pada umumnya AngularJS mengadopsi konsep MVC (Model, View, Controller), meskipun menggunakan implementasi yang berbeda dengan konsep asli MVC.
Keistimewaan AngularJS:
Sebetulanya sangat banyak keistemewaan dari angular.js salah satunya yaitu:
Mengajari browsers dengan sintak HTML baru
HTML5 menawarkan sejumlah elemen baru semisal <video>, <section>, <article>, dsb. Nah dengan AngularJS, Kita bahkan dapat menambahkan lebih banyak lagi elemen-elemen baru yang akan dimengerti oleh browser, misal <draggable> membuat elemen bisa didrag, <zippy> membuat elemen semisal akordion, atau bahkan menggunakan bahasa indonesia seperti <sembunyikan> jika diklik akan menyembunyikan elemen (contoh saja, pada praktik gunakanlah bahasa inggris sebagai bahasa internasional). Fungsi ini disebut dengan istilah Directive. Kitalah yang bertanggungjawab membuat Directive tersebut bisa ditafsirkan oleh browser dengan menuliskan kode pada deklarasi Directive itu sendiri. Atau dengan kata lain, kita mengajari browser sintak HTML baru. Bahkan tidak terbatas pada elemen, kita bisa membuat Directive menggunakan attribute, HTML comment atau class.
HTML Template
Template yang digunakan AngularJS hanyalah HTML biasa dengan penambahan ekspresi (expression),
sehingga kita tidak perlu menggunakan template engine khusus.
Dependency Injection (DI)
Dependency Injection memungkinkan developer menulis beberapa komponen kode yang terpisah satu sama lain. Ketika memerlukan salah satu komponen, developer dapat memanggil komponen yang dibutuhkan tersebut dan dapat menggunakan fungsi yang tersedia. Fitur ini memudahkan developer dalam membuat komponen yang dapat dipakai berulang kali (reusable component)
1. Memasang AngularJs
Proses instalasi atau pemasangan AngularJs ke dalam aplikasi yang akan kita bangunsangatlah mudah. Kita hanya perlu meng-include file AngularJs di dalam file HTML
menggunakan tag <script> seperti layaknya file JavaScript biasa.
<html>Atau jika pembaca lebih memilih untuk mengunduh filenya terlebih dahulu untuk
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></scrip </body>
<html>
direferensikan melalui folder lokal maka menjadi seperti di bawah ini.
<html>
<head>
</head>
<body>
<script src="js/angular.min.js"></script>
</body><html>
Workflow
Biasanya setiap developer memiliki workflow / urutan kerja yang berbeda dengan developeryang lain dalam mengerjakan aplikasi. Akan tetapi, seringnya ada suatu workflow yang
bersifat umum yang diikuti oleh semua developer.
Dari langkah-langkah yang kita kerjakan pada sub bab 1.2 dapat disimpulkan bahwa
workflow untuk membuat sebuah aplikasi AngularJs adalah :
1. Membuat module, include file modul di HTML kemudian memberi tahu HTML modul apa
yang digunakan menggunakan ng-app .
2. Membuat controller , include file modul di HTML kemudian memberi tahu HTML
controller apa yang digunakan menggunakan ng-controller .
3. Menambahkan data pada controller menggunakan $scope .
4. Menampilkan data di view menggunakan ekspresi ``.
Filter
Terdapat fitur pada AngularJs yang bernama filter, digunakan untuk memformat tampilansebuah variabel di view. Jadi alih-alih kita melakukan formatting di controller, kita
melakukannya di view dengan bantuan filter.
Pada contoh kode sebelumnya terlihat kalau harga yang kita ketikkan berupa angka biasa
dan ketika ditampilkan di view maka hasilnya masih apa adanya, tanpa format mata uang.
Kita bisa menggunakan filter currency yang disediakan AngularJs untuk memformat harga
sehingga enak dilihat.
<div ng-controller="MainController">Penggunaan filter sangat menyenangkan seperti bisa dilihat pada listing kode di atas. Kita
{{title}} </br>
{{book.title}} </br>
{{book.author}} </br>
{{book.price | currency}}
</div>
menambahkan sebuah tanda pipeline ( | ) dibelakang variabel yang ingin kita filter kemudian
diikuti dengan filter yang kita gunakan. Setelah lakukan perubahan dengan menambahkan
filter coba jalankan pada browser.
Ada juga filter lain yang bisa digunakan misalnya date untuk mengatur format tanggal.
Sebelumnya tambahkan terlebih dahulu variabel baru di controller.
app.controller('MainController',['$scope', function($scope){Tampilkan variabel baru tersebut ke dalam view.
$scope.title='Belajar AngularJs';
$scope.book={
title: 'Belajar AngularJs Bersama Agung Setiawan',
author : 'Agung Setiawan',
price : 80000,
pubdate : new Date('2015','09',01'')
};
}]);
<div ng-controller="MainController">
{{title}} </br>
{{book.title}} </br>
{{book.author}} </br>
{{book.price | currency}} </br>
{{book. pubdate | date }}
</div>
Cukup sekian artikel yang bisa saya tulis untuk sekarang, terimakasih untuk perhatiannya sampai jumpa di lain artikel :D
