Angular JS Tutorial : Membuat proyek web dasar untuk pemula

Last Updated on August 12, 2022 by

Angular JS, suatu framework website yang saat ini digunakan pada lebih dari 330,000 website, sebagaimana dikutip dari SimilarTech. Mempelajari AngularJS cukup membantu Anda sebagai jalan awal mengimplementasikan teknologi JavaScript dalam pengembangan web.

Apakah Anda belum pernah mempelajari Angular JS sebelumnya? Pada kesempatan kali ini kami akan membahas Angular JS Tutorial tingkat dasar, yaitu membuat suatu aplikasi web sederhana dan mudah dipahami untuk pemula.

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.

Mungkin 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 seinteraktif 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 kita masih menggunakan konsep tadi pada teknologi zaman sekarang, maka berselancar di web akan sangat memakan waktu. Bayangkan, setiap kita 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 dari itu kita 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 kita untuk mengembangkan HTML agar menjadi lebih dinamis. Angular JS dikembangkan oleh para developer independen dengan dukungan penuh dari Google.

Dengan menggunakan Angular, kita mendapatkan seperangkat alat untuk membantu membangun aplikasi web yang lebih baik. Misalnya, AngularJS membantu membuat koding kita menjadi lebih mudah dipelihara dan diuji karena logika kode dipisahkan dengan tampilan web (view).

Konsep Angular JS

Sebelum kita lanjut ke Angular JS tutorial-nya, ada baiknya untuk setidaknya sedikit mengetahui tentang HTML, CSS dan framework JavaScript seperti jQuery.

Selain itu, ada beberapa konsep lain yang perlu diketahui: akan kami bahas beberapa konsep tersebut secara singkat:

1. 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.

1. 2-way Data Binding

Angular JS memiliki fitur 2-way data binding yang membantu memindai beberapa komponen secara bersamaan, sehingga jika ada satu hal yang diubah, hal-hal lainnya dapat ter-update secara langsung.

1. 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 kita pakai pada Angular JS Tutorial kali ini mengisyaratkan Angular JS untuk memberlakukan halaman HTML kita sebagai suatu aplikasi.

C. Angular JS Tutorial sederhana

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, nama Anda pun akan dimunculkan pada halaman tersebut.

Proyek kali ini akan mengenalkan kita dengan fitur dasar AngularJS seperti 2-way data binding dan directives. Langsung saja kita ikuti Angular JS tutorial sederhana kali ini:

1. Menyiapkan proyek

Pertama-tama siapkan terlebih dahulu sebuah file bernama index.html. Keseluruhan proyek kita kali ini akan dibuat dalam file ini. Untuk melihat hasilnya nanti, kita hanya perlu membuka file ini di komputer, jadi Anda dapat membuatnya di folder mana saja.

2. Membuat file index.html

Dalam file index.html, kita akan memasukkan suatu struktur HTML yang sederhana. Anda dapat copy paste kode berikut:

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <div>
      <label>Nama:</label>
      <input type="text" placeholder="Masukkan nama Anda">
      <hr>
      <h1>Halo! Di sini nama Anda</h1>
    </div>
  </body>
</html>

Anda juga dapat mengubah tulisan yang dicetak tebal dengan keinginan Anda.

Berikut adalah hasilnya:

Halaman ini belum memanfaatkan AngularJS. Kita langsung saja lakukan langkah selanjutnya:

1. Menambahkan AngularJS

Agar proyek kita lebih interaktif, kita 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.6.2/angular.min.js"></script>

Sehingga bagian head menjadi seperti ini:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
</head>

Hasil jadinya belum terlihat, kita lanjut ke langkah berikutnya:

4. Tambahkan Directives

Masih di koding index.html, pada tag <html> tambahkan ‘ng-app’, seperti ini:

<html ng-app>

Seperti yang dijelaskan di awal, directive ini akan memberitahu Angular JS untuk aktif pada keseluruhan halaman web.

5. Memindai (bind) data

Langkah ini akan lebih panjang dari langkah sebelumnya, namun pada langkah inilah kita akan melihat sedikit kemampuan dari AngularJS.

Dalam proyek kita kali ini, halaman web akan menampilkan nama saat kita mengetik di kolom teks yang ada secara langsung, tanpa perlu melakukan refresh halaman atau hal lainnya. Yang kita 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 kita adalah “namaAnda” yang akan di-bind pada objek lain. Tag input akan menjadi seperti di bawah ini:

<input type="text" ng-model=”namaAnda” placeholder="Masukkan nama Anda">

Kemudian kita akan memberi tahu Angular JS untuk mengubah objek dari data yang tadi di-bind. Objek itu adalah tulisan “nama Anda”, maka ganti tulisan “nama Anda” pada tag h1 menjadi {{namaAnda}}, seperti berikut ini:

<h1>Halo! Di sini {{namaAnda}}</h1>

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 ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>Nama:</label>
      <input type="text" ng-model="namaAnda" placeholder="Masukkan nama Anda">
      <hr>
      <h1>Halo! Di sini {{namaAnda}}</h1>
    </div>
  </body>
</html>

6. Lihat hasilnya

Simpan file index.html, kemudian buka dengan web browser. Berikut adalah tampilannya:

Jika Anda mengetikkan nama Anda pada kolom teks Nama, maka nama Anda akan langsung muncul pada halaman tersebut.

Selamat, Anda berhasil membuat suatu proyek AngularJS sederhana!

D. Kesimpulan

Itulah Angular JS tutorial yang bisa kami bagikan pada kesempatan kali ini, yaitu membuat proyek sederhana yang menampilkan nama sesuai dengan nama yang dimasukkan.

Selanjutnya, Anda dapat mengembangkan kemampuan dengan mencoba proyek-proyek sederhana yang tertera di website angularjs.org. Anda juga dapat mempelajari lebih lanjut tentang Angular, pengembangan lebih lanjut dari AngularJS dengan fitur-fitur yang lebih banyak dan performa yang lebih disempurnakan.

Selain itu, pastikan Anda juga tetap mengikuti pembahasan menarik lainnya dengan mengunjungi appkey.id!