Hulunews.net- Mempelajari AngularJS cukup membantu Anda sebagai jalan awal mengimplementasikan teknologi JavaScript dalam pengembangan web.
Mengapa menggunakan Angular JS?
Biasanya website yang ada di internet mengadopsi konsep client-server. Terdapat dua bagian dari proses ini, yaitu peramban (browser) web Anda dan server yang menjadi tempat bernaung bagi website. Saat Anda mengetikkan URL (yang berperan sebagai lokasi server) pada web browser, server tujuan tersebut akan memberikan informasi yang berkaitan dengan web yang ingin Anda kunjungi. Informasi tersebut misalnya HTML, CSS, serta JavaScript.
Suatu halaman web umumnya memiliki tombol-tombol yang mengarahkan Anda ke halaman lainnya, entah ke halaman yang masih ada dalam situs tersebut atau halaman di situs lainnya. Saat Anda menekan tombol-tombol tautan ini, Anda kembali meminta pada server untuk memunculkan halaman yang sesuai.
Ini tidak jadi masalah jika halaman web tersebut adalah web sederhana, kontennya masih statis dan tidak berubah-ubah. Tetapi seiring waktu, tentunya tampilan dan teknologi web terus berkembang. Konten dibuat se-interaktif mungkin, fitur-fitur pada halaman web akan semakin bertambah sehingga dapat melakukan lebih banyak hal. Bahkan halaman web saat ini sudah bukan lagi sekadar halaman web, tetapi bisa ‘menjelma’ menjadi suatu aplikasi utuh.
Jika masih menggunakan konsep tadi pada teknologi zaman sekarang, maka berselancar di web akan sangat memakan waktu. Bayangkan, setiap mengklik suatu tautan, server harus mengirim keseluruhan informasi yang terkandung dalam halaman web, bahkan jika sesungguhnya sebagian dari informasi tersebut sama saja dengan halaman sebelumnya. Ini membuat waktu tunggu menjadi lebih lama dan halaman web akan terasa lebih lambat.
Maka perlu menggunakan cara yang lebih efisien dalam memuat halaman web. Cara ini dinamakan Single Page Application (SPA), atau aplikasi dengan satu halaman. Saat Anda mengunjungi suatu halaman yang memanfaatkan SPA, browser Anda akan menerima satu halaman dari server. Jika ada bagian halaman yang ter-update atau mengalami perubahan, hanya bagian yang terubah itulah yang akan dimuat ulang secara real-time. Sedangkan bagian lainnya yang tidak berubah akan tetap ada dan didiamkan.
Contohnya, suatu situs memiliki header yang berisi logo situs, halaman utama dan kontak. Baik halaman utama dan halaman kontak menggunakan header yang sama. Maka saat user berpindah dari halaman utama ke halaman kontak, web browser dapat langsung memuat dan menampilkan informasi dari halaman kontak tanpa harus memuat header dari halaman kontak, karena header-nya sama saja dengan halaman utama. Ini menjadikan halaman web terasa lebih cepat dan lebih lancar. Saat ini sudah banyak perusahaan yang webnya menerapkan mekanisme ini.
Nah, Angular JS adalah suatu kerangka (framework) yang berjalan di bagian depan (front-end) dari halaman web yang menerapkan konsep SPA. Angular JS membantu untuk mengembangkan HTML agar menjadi lebih dinamis. Angular JS dikembangkan oleh para developer independen dengan dukungan penuh dari Google.
Dengan menggunakan Angular, mendapatkan seperangkat alat untuk membantu membangun aplikasi web yang lebih baik. Misalnya, AngularJS membantu membuat koding menjadi lebih mudah dipelihara dan diuji karena logika kode dipisahkan dengan tampilan web (view).
Konsep Angular JS
- Model View Controller (MVC)
MVC adalah suatu pola yang digunakan untuk mengimplementasikan antarmuka pengguna. View atau tampilan web akan dipisahkan dari logika atau kodingnya. Dengan MVC, testing menjadi lebih cepat karena hasil dari perubahan kode bisa segera tampak setelah kode selesai ditulis.
- 2-way Data Binding
Angular JS memiliki fitur 2-way data binding yang membantu memindai beberapa komponen secara bersamaan, sehingga jika ada yang diubah, dapat ter-update secara langsung.
- Directives
Angular JS mengembangkan kode HTML biasa dengan directives. Directive adalah atribut HTML yang membantu AngularJS memberikan perilaku yang tepat. Misalnya atribut <html ng-app> yang akan pakai pada Angular JS Tutorial kali ini mengisyaratkan Angular JS untuk memberlakukan halaman HTML sebagai suatu aplikasi.
Angular JS Tutorial sederhana
Kebutuhan Tools:
- NodeJS saran versi yang stable atau terbaru : https://nodejs.org/en/download/
- NPM package manager detail bisa dilihat disini : https://docs.npmjs.com/about-npm
- Text Editor (VS Code, Sublime dsb)
- Browser (Chrome, Edge, Safari, Firefox dsb)
Instal Angular CLI
Untuk bisa membuat project dan menjalankan Angular, kita harus menginstall Angular CLI, berikut scriptnya, silahkan buka terminal atau cmd mu kemudia ketikan perintah di bawah ini :
npm install -g @angular/cli
Catatan untuk windows: (bagi yang menggunakan PowerShell)
Jalankan perintah ini di CMD:
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
Proyek awal.
Proyek Angular JS yang akan dibuat kali ini adalah proyek sederhana. Mekanismenya yaitu Anda akan diarahkan untuk mengisi nama di kolom teks. Saat Anda mengetik, akan dimunculkan pada halaman tersebut.
Proyek kali ini akan mengenalkan dengan fitur dasar AngularJS seperti 2-way data binding dan directives. Langsung saja ikuti Angular JS tutorial sederhana kali ini:
- Menyiapkan proyek
Pertama-tama siapkan terlebih dahulu sebuah file bernama index.html. Keseluruhan proyek kali ini akan dibuat dalam file ini. Untuk melihat hasilnya nanti, hanya perlu membuka file ini di komputer, jadi Anda dapat membuatnya di folder mana saja.
- Membuat file index.html
Dalam file index.html ini, Anda dapat copy paste kode berikut:
<!doctype html>
<html>
<head>
</head>
<body>
<div>
<label>Anda Cari ?:</label>
<input type=”text” placeholder=”Rokok”>
<hr>
<h3>Halo! Di sini “Rokok”?</h3>
</div>
</body>
</html>
Hasilnya :
Halaman ini belum memanfaatkan AngularJS. langsung saja lakukan langkah selanjutnya:
- Menambahkan AngularJS
Agar proyek lebih interaktif, akan menambahkan Angular JS. Cara paling mudahnya adalah menambahkan Angular JS versi hosted atau yang terdapat di internet. Caranya pada koding index.html tadi, tambahkan script berikut di antara bagian head:
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js”></script>
Sehingga bagian head menjadi seperti ini :
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js”></script>
</head>
Hasil jadinya belum terlihat, lanjut ke langkah berikutnya:
- Tambahkan Directives
Masih di koding index.html, pada tag <div> tambahkan ‘ng-app’, seperti ini:
<div ng-app>
Seperti yang dijelaskan di awal, directive ini akan memberitahu Angular JS untuk aktif pada keseluruhan halaman web.
- Memindai (bind) data
Langkah ini akan lebih panjang dari langkah sebelumnya, namun pada langkah inilah akan melihat sedikit kemampuan dari AngularJS.
Dalam proyek kali ini, halaman web akan menampilkan nama saat mengetik di kolom teks yang ada secara langsung, tanpa perlu melakukan refresh halaman atau hal lainnya. Yang akan lakukan adalah memindai (bind) data dari kolom teks dan langsung memunculkan data tersebut pada tulisan “Di sini (nama Anda)”, dimana bagian ‘nama Anda’ akan tergantikan oleh apa pun yang diketik pada kotak teks. Inilah yang dimaksud jika satu hal diubah, hal lainnya akan langsung diperbarui.
Kembali ke file index.html, tambahkan ng-model=”namaAnda” pada tag input. Nama ng-model bisa bebas, namun pastikan tidak ada spasi dan dapat dipanggil dengan mudah. Ini menandakan bahwa data adalah “namaAnda” yang akan di-bind pada objek lain. Tag input akan menjadi seperti di bawah ini:
<input type=”text” ng-model=”namaRokok” placeholder=”Nama Rokok”>
Kemudian akan memberi tahu Angular JS untuk mengubah objek dari data yang tadi di-bind. Objek itu adalah tulisan “nama Anda”, maka ganti tulisan “Rokok” pada tag h4 menjadi {{namaRokok}}, seperti berikut ini:
<h4>Halo! Di sini ada {{namaRokok}}</h4>
Ingat, pemanggilan data yang di-bind perlu menggunakan kurung kurawal {{ }}. Di antara kurung kurawal itu Anda memasukkan nama data yang akan dipindai.
Jika Anda mengikuti tutorial secara keseluruhan, kode akhirnya akan terlihat seperti ini:
<!doctype html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js”></script>
</head>
<body>
<!–<div> –>
<div ng-app=””>
<label>Anda Cari ?:</label>
<!– <input type=”text” placeholder=”Rokok”> –>
<input type=”text” ng-model=”namaRokok” placeholder=”Masukkan nama Rokok”>
<hr>
<!– <h3>Halo! Di sini “Rokok”?</h3> –>
<h4>Halo! Di sini ada {{namaRokok}}?</h4>
</div>
</body>
</html>
Hasilnya
Simpan file index.html, kemudian buka dengan web browser. Berikut adalah tampilannya:
Jika Anda mengetikkan nama Rokok pada kolom teks, maka teks tersebut akan langsung muncul pada halaman output.
Selain fitur umum di atas, AngularJS juga memiliki fitur inti, di antaranya:
- Data Binding
- Scope
- Controller
- Services
- Filters
- Directives
- Templates
- Routing
- ModelView Whatever
- Deep Linking
- Dependency Injection
Selain fitur umum dan khusus yang biasanya ada pada AngularJS, ada baiknya kita juga mengetahui kalau ada tiga bagian utama yang menjadi komponen penting pada framework AngularJS, yaitu:
- ng-app : merupakan arahan dan link dari AngularJS ke html
- ng-model : merupakan arahan data dari aplikasi AngularJS ke input kontrol html
- ng-bind : arahan data dari aplikasi AngularJS ke tag html
Melihat fitur dan komponen tentang AngularJS di atas, tidak heran apabila framework ini cukup digemari para app developer.
Penulis: Edwin Anwar