Belajar Angular - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar Angular! Series ini akan membawa kalian menguasai Angular — framework frontend TypeScript yang lengkap dan opinionated untuk membangun aplikasi web enterprise — dari fondasi konsep sampai production readiness. Total ada 24 episode yang tersusun dari enam fase.

Sebelum membuat project Angular pertama, ada beberapa skill dasar dan perangkat lunak yang wajib kalian miliki. Mengapa prasyarat ini penting? Karena Angular bukan sekadar library render, melainkan framework yang membawa seluruh ekosistem: kompiler, router, form, HTTP client, dan tooling CLI. Tanpa fondasi yang benar, semua itu akan terasa seperti kotak hitam.

Episode 0 ini adalah peta jalan kalian: memastikan skill dasar, menyiapkan Node.js dan Angular CLI, memilih editor, serta melakukan verifikasi pertama. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dikuasai

#HTML, CSS, dan JavaScript Modern

Angular membangun komponen dari HTML dan CSS, sementara logikanya ditulis dalam TypeScript yang merupakan superset JavaScript. Kalian wajib nyaman dengan HTML5 semantik, CSS flexbox dan grid, serta sintaks JavaScript modern ES6+ seperti arrow function, destructuring, spread, template literal, dan async/await.

Sintaks ES6+ dasar

const nama = 'Angular';
const versi = 19;
const aplikasi = { nama, versi };
const [utama, ...sisa] = [1, 2, 3, 4];
const pesan = `Memakai ${aplikasi.nama} versi ${aplikasi.versi}`;
const cetak = async () => console.log(pesan);

Kode di atas memakai destructuring, spread, dan template literal yang akan sering muncul di seluruh codebase Angular. Jika ada yang terasa asing, pelajari dulu fitur-fitur ini karena dipakai hampir di setiap komponen.

#Dasar TypeScript, Modul, dan Class

TypeScript menambah tipe statis di atas JavaScript. Angular memakai TypeScript secara penuh, jadi kalian perlu memahami tipe dasar, interface, class, access modifier, dan sistem module import/export. Tanpa pemahaman ini, error yang ditampilkan compiler akan sulit dimengerti.

Class dan interface TypeScript

interface Produk {
  id: number;
  nama: string;
  harga: number;
}
 
class Keranjang {
  private items: Produk[] = [];
 
  tambah(p: Produk): void {
    this.items.push(p);
  }
}

Interface mendefinisikan bentuk data, sementara class membungkus perilaku. Pola ini persis yang akan kalian pakai untuk model data dan service Angular nanti, lengkap dengan dekorator dari framework.

#Component-based UI dan Reactive Programming

Angular memandang aplikasi sebagai kumpulan komponen — unit yang memuat tampilan, style, dan logika dalam satu tempat. Kalian juga harus paham pola reactive programming: aplikasi bereaksi terhadap aliran data (stream) secara asinkron. Di Angular, aliran ini biasanya diwakili oleh RxJS Observables yang akan dibahas sejak episode 4.

#Command Line, Git, dan Package Manager

Angular CLI adalah alat utama, jadi kebiasaan menggunakan terminal adalah syarat mutlak. Kuasai juga Git untuk version control dan npm sebagai package manager default. Jika organisasi kalian memakai yarn atau pnpm, konsepnya sama — perbedaannya hanya di perintah install.

git --version

Output harus menampilkan versi Git 2.x atau lebih baru. Setelah itu pastikan terminal kalian nyaman dipakai karena hampir semua langkah di series ini lewat command line.

#Perangkat Lunak yang Perlu Disiapkan

#Node.js LTS

Angular 19 membutuhkan Node.js versi 18.19 ke atas, dan versi 20 LTS atau 22 LTS sangat disarankan. Node.js menyediakan runtime JavaScript yang dipakai Angular CLI untuk menjalankan build, dev server, dan test. Jangan memakai versi yang terlalu lama karena build akan gagal.

node --version
npm --version

Pastikan node --version menampilkan 20.x atau 22.x dan npm --version menampilkan 10.x atau lebih baru. Jika belum, install dulu Node.js LTS dari situs resmi atau lewat package manager sistem operasi kalian.

#Angular CLI

Angular CLI adalah command line interface resmi untuk membuat, membangun, dan mengelola project Angular. Install secara global:

npm install -g @angular/cli

Tunggu sampai proses selesai. Setelah itu verifikasi versinya:

ng version

Perintah ng version menampilkan versi Angular CLI, versi Node.js, dan package manager yang aktif. Catat angka versinya — kalian akan membandingkannya saat menjalankan ng new di episode 3. Semua contoh di series ini diasumsikan memakai Angular versi 17 ke atas.

#Editor, Browser, dan Hardware

VS Code adalah pilihan paling populer untuk Angular. Install ekstensi Angular Language Service agar autocomplete, navigasi template, dan diagnosa error berjalan langsung di editor. Browser modern seperti Chrome, Firefox, atau Edge diperlukan untuk development, plus ekstensi Angular DevTools yang akan dipakai di episode 15. Untuk hardware, Windows, macOS, atau Linux dengan minimal 8 GB RAM — 16 GB sangat disarankan karena proses build cukup berat.

#Verifikasi Environment

Sebelum lanjut ke episode 1, jalankan verifikasi lengkap untuk memastikan semuanya siap:

node --version
npm --version
git --version
ng version

Jika keempat perintah berjalan tanpa error, environment kalian sudah siap. Untuk project di mana kalian tidak ingin menginstall CLI global, pakai bentuk npx ng version yang menjalankan CLI dari node_modules project.

Satu catatan penting: seluruh episode berikutnya memakai Angular versi 17 ke atas dengan standalone components sebagai default. Jika kalian memakai versi lain, sintaksnya mungkin sedikit berbeda, tetapi fondasi yang dibahas tetap sama.

#Penutup

Inti yang harus dibawa pulang:

• Kuasai HTML, CSS, dan JavaScript modern ES6+ sebelum menyentuh Angular.
• Pahami dasar TypeScript: tipe, interface, class, dan module.
• Node.js LTS versi 20 atau 22 adalah prasyarat utama Angular CLI.
• Install Angular CLI global dan verifikasi dengan ng version.
• Gunakan VS Code dengan Angular Language Service untuk pengalaman terbaik.
• Environment harus lolos verifikasi lengkap sebelum lanjut ke episode berikutnya.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa membutuhkan Angular — dari lahirnya AngularJS pada 2010, perombakan total menjadi Angular modern, hingga posisinya di aplikasi enterprise berskala besar. Pastikan environment kalian sudah siap, karena perjalanan Belajar Angular baru saja dimulai!