Apa itu Angular? — Angular

Pernah kerja di tim 50+ developer ngerjain aplikasi enterprise yang harus jalan 10 tahun ke depan? Konvensi konsisten antar developer, type safety jadi…

Angular adalah framework buatan Google untuk membangun aplikasi web, ditulis dengan TypeScript. Framework artinya kerangka lengkap: cara membuat komponen, pindah halaman (routing), form, mengambil data dari server (HTTP), sampai testing sudah disediakan dalam satu paket, lengkap dengan aturan di mana tiap hal ditaruh. Bayangin gerobak Martabak Bang Jali yang buka cabang di banyak tempat. Tiap cabang dapat wajan, resep, dan urutan kerja yang sama, jadi karyawan baru dari cabang mana pun langsung tahu adonan disimpan di mana dan langkahnya apa. Angular begitu juga: semua proyek Angular punya susunan file dan alat yang sama, jadi developer yang pindah tim langsung tahu harus membuka file mana.

Sepanjang track ini kita membangun halaman pesan-antar Martabak Bang Jali, sedikit demi sedikit. Pelajaran ini menyalakan halaman pertamanya.

🧪 Tebakan cepat: Halaman Angular-nya sudah tampil dengan judul besar "Martabak Bang Jali". Kamu klik kanan, lalu pilih View Page Source. Di dalam tag <app-root> ada apa: judul itu, atau kosong? Jawabannya ada di bagian "Dari index.html sampai halaman tampil".

Angular itu apa, dan bukan apa

Dibuat dan dikelola Google, open source, gratis. Biasanya dipakai untuk aplikasi besar yang dirawat bertahun-tahun, misalnya dashboard admin atau aplikasi internal perusahaan.
TypeScript, bukan JavaScript biasa. TypeScript itu JavaScript plus type: kamu menyatakan harga itu angka, dan editor menolak sebelum kodenya jalan kalau kamu mengisinya dengan teks.

let harga: number = 45000
harga = 'murah' // error: Type 'string' is not assignable to type 'number'.

Angular bukan AngularJS. AngularJS (2010) adalah framework lama berbasis JavaScript biasa, dan dukungannya sudah berhenti di akhir 2021. Angular yang dipelajari di sini ditulis ulang total sejak 2016, dan rilis versi besar tiap enam bulan. Tutorial yang memakai ng-app atau $scope itu AngularJS, lewati saja.
Versi. Pelajaran ini mengikuti Angular versi 20 ke atas, dan editor latihan di sini menjalankan Angular 22. Contoh di sini masih menulis standalone: true, baris yang kamu temui di banyak kode lama (penjelasannya di bawah).

Bikin proyek pertama dengan Angular CLI

Angular CLI adalah alat baris perintah bernama ng untuk membuat, menjalankan, dan membangun proyek Angular.

npm install -g @angular/cli   # pasang CLI, cukup sekali
ng new martabak-bang-jali     # bikin proyek baru di folder martabak-bang-jali
cd martabak-bang-jali
ng serve                      # jalankan development server

ng new <nama> membuat satu folder proyek lengkap. Proyek bernama toko-app dibuat dengan ng new toko-app.
ng serve menjalankan development server. Buka http://localhost:4200 di browser. Tiap kali kamu menyimpan file, halamannya diperbarui sendiri.

Tiga file yang bekerja sama

Dari semua file yang dibuat ng new, tiga ini yang menyalakan halaman:

<!-- src/index.html -->
<body>
  <app-root></app-root>
</body>

// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser'
import { App } from './app/app'

bootstrapApplication(App)

// src/app/app.ts
import { Component } from '@angular/core'

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<h1>Martabak Bang Jali</h1>`,
})
export class App {}

<app-root></app-root> di index.html adalah tempat kosong yang nanti diisi Angular.
@Component({...}) adalah decorator: tanda di atas class yang memberi tahu Angular "class ini komponen", lengkap dengan pengaturannya.
selector: 'app-root' adalah nama tag yang dicari Angular di halaman.
template adalah HTML yang dipasang ke dalam tag itu.
standalone: true berarti komponen ini berdiri sendiri. Sejak Angular 19 ini sudah default dan boleh gak ditulis, juga di editor latihan (Angular 22). Di Angular 18 ke bawah, baris itu wajib.
bootstrapApplication(App) menyalakan aplikasi dengan App sebagai komponen paling luar, disebut root component.

Proyek dari ng new versi 20 ke atas menamai class-nya App di file app.ts. Versi sebelumnya menamainya AppComponent di app.component.ts. Latihan di sini memakai nama lama, AppComponent. Dua-duanya jalan.

Dari index.html sampai halaman tampil

Langkah	Yang terjadi	Isi `<app-root>`
1	Browser memuat `index.html`	kosong
2	Browser menjalankan JavaScript hasil build `main.ts`	kosong
3	`bootstrapApplication(App)` membaca selector `app-root`, lalu mencari tag itu	kosong
4	Angular memasang template `App` ke dalam tag itu	`<h1>Martabak Bang Jali</h1>`

View Page Source menampilkan index.html persis seperti dikirim server, sebelum JavaScript jalan. Jadi di sana <app-root> kosong. Itu jawaban tebakannya. Judulnya baru ada di DOM, dan kelihatan di tab Elements di DevTools.

Kalau selector gak cocok dengan tag di index.html, misalnya selector: 'app-martabak', langkah 3 gagal. Halamannya tetap putih, dan console menulis:

NG05104: The selector "app-martabak" did not match any elements. Find more at https://angular.dev/errors/NG05104

⚠️ Jebakan yang sering ketemu

Ikut tutorial AngularJS. ng-app, $scope, dan angular.module(...) itu AngularJS, framework lain yang sudah pensiun.
Selector beda dengan tag di index.html. Halamannya putih dan muncul error NG05104. Samakan keduanya, biasanya app-root.
Menulis standalone: false di komponen utama. Angular menolak dengan NG0907: The AppComponent component is not marked as standalone, but Angular expects to have a standalone component here. Di Angular 18 ke bawah, menghapus standalone: true berakhir sama; sejak Angular 19 baris itu boleh hilang.
Teks judulnya beda sedikit. Latihan mengecek isi <h1> persis Halo Angular!: huruf besar-kecil dan tanda serunya ikut dicek.

🤔 Kapan memilih Angular

Angular cocok untuk aplikasi besar yang dikerjakan banyak orang dan dirawat bertahun-tahun: semua alatnya sudah ada, dan aturannya seragam. Untuk satu halaman promo, HTML dan CSS biasa sudah cukup. Angular di sana cuma menambah berat.

TL;DR: Angular adalah framework lengkap dari Google yang ditulis dengan TypeScript, beda dengan AngularJS yang sudah pensiun. ng new nama-proyek membuat proyek, dan ng serve menjalankannya di http://localhost:4200. Halaman menyala lewat tiga file: index.html punya <app-root> yang kosong, main.ts memanggil bootstrapApplication(App), dan app.ts berisi class dengan decorator @Component yang selector-nya app-root dan template-nya HTML yang dipasang ke tag itu. View Page Source tetap menunjukkan <app-root> kosong, karena isinya dipasang JavaScript. Kalau selector gak ketemu, muncul NG05104. Sejak Angular 19 standalone: true itu default, termasuk di editor latihan (Angular 22).