Belajar Angular - Konsep Dasar & Arsitektur Utama

#Pendahuluan

Di episode 1 kalian sudah memahami sejarah dan posisi Angular. Sekarang waktunya membuka kap mesin: bagaimana Angular bekerja di balik layar dan apa saja komponen utama yang membentuk arsitekturnya.

Episode 2 membahas dua hal: cara kerja di balik layar — kompilasi AOT dan JIT, change detection, serta zone.js — dan komponen-komponen utama — module, component, directive, service, template syntax, data binding, dependency injection, dan lifecycle hooks. Pemahaman ini akan membuat episode-episode praktik berikutnya jauh lebih masuk akal.

#Cara Kerja di Balik Layar

#Kompilasi AOT dan JIT

Angular tidak menjalankan template secara langsung. Template HTML yang kalian tulis di-compile menjadi kode JavaScript yang efisien. Ada dua cara:

• JIT (Just-In-Time): kompilasi dilakukan di browser saat aplikasi dimuat. Berguna saat development karena proses build lebih cepat.
• AOT (Ahead-Of-Time): kompilasi dilakukan saat build. Template diperiksa sebelum rilis, error terdeteksi lebih awal, dan bundle yang dihasilkan lebih kecil.

Angular modern memakai AOT secara default, bahkan di development. Opsi compiler diatur lewat angularCompilerOptions di tsconfig.json.

{
  "angularCompilerOptions": {
    "strictTemplates": true,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true
  }
}

Konfigurasi strictTemplates membuat Angular memeriksa tipe di dalam template HTML — error seperti memanggil property yang tidak ada akan tertangkap saat build, bukan saat runtime. Ini salah satu alasan Angular terasa "ketat" tapi aman.

#Change Detection dan zone.js

Setiap kali ada event, HTTP response, atau timer, Angular perlu tahu bagian template mana yang berubah. zone.js men-patch API browser asinkron sehingga Angular tahu kapan perubahan terjadi, lalu menjalankan change detection untuk memperbarui tampilan.

Secara default Angular memeriksa seluruh komponen dari atas ke bawah. Di episode 15 kalian akan belajar strategi OnPush untuk membatasi pemeriksaan hanya ke komponen yang datanya benar-benar berubah.

#Module, Component, Directive, dan Service

Ini empat blok bangunan utama:

• Component: unit tampilan — selector, template, dan style.
• Directive: menambah perilaku ke elemen, misalnya validasi atau highlight.
• Service: logika bisnis dan data yang dibagikan antar komponen.
• Module (legacy NgModule): wadah yang mengelompokkan komponen, directive, dan pipe. Sejak standalone components, NgModule bukan lagi keharusan.

template -> kompilasi AOT -> kode efisien -> change detection saat event

#Komponen Utama dan Alur Kerjanya

#Struktur Project Angular

Project Angular hasil ng new memiliki struktur yang terstandar: src/app untuk kode aplikasi, src/main.ts untuk bootstrap, angular.json untuk konfigurasi build, dan tsconfig*.json untuk TypeScript.

ng new arsitektur-app --style=scss --ssr=false
tree src/app

Perhatikan komponen root app.component.ts, template app.component.html, dan file app.config.ts yang memuat provider global seperti router dan HTTP client.

#Template Syntax, Data Binding, dan Dependency Injection

Template Angular adalah HTML plus sintaks khusus. Interpolation menampilkan nilai dengan kurung ganda, property binding mengikat nilai ke property elemen, dan event binding menangkap event dari pengguna.

Data binding di template

import { Component, signal } from '@angular/core';
 
@Component({
  selector: 'app-hello',
  standalone: true,
  template: `
    <input [value]="nama()" (input)="nama.set($any($event.target).value)" />
    <p>Halo, {{ nama() }}</p>
    <button (click)="reset()">Reset</button>
  `,
})
export class HelloComponent {
  readonly nama = signal('');
 
  reset(): void {
    this.nama.set('');
  }
}

Perhatikan pola binding: [value] untuk mengirim nilai ke elemen, (input) untuk menerima event, dan {{ }} untuk menampilkan. Dependency injection lalu menyediakan service ke komponen lewat konstruktor atau fungsi inject — detailnya dibahas di episode 6.

#Component Lifecycle Hooks

Komponen Angular melewati siklus hidup yang bisa kalian tangkap dengan hooks:

• ngOnChanges: dipanggil saat input berubah.
• ngOnInit: dipanggil sekali setelah property binding pertama.
• ngOnDestroy: dipanggil sebelum komponen dihancurkan.

Lifecycle hook dasar

import { Component, OnInit, OnDestroy } from '@angular/core';
 
@Component({
  selector: 'app-lifecycle',
  standalone: true,
  template: `<p>Komponen lifecycle aktif</p>`,
})
export class LifecycleComponent implements OnInit, OnDestroy {
  ngOnInit(): void {
    console.log('Komponen diinisialisasi');
  }
 
  ngOnDestroy(): void {
    console.log('Komponen dihancurkan');
  }
}

Hook ngOnDestroy adalah tempat yang tepat untuk membersihkan subscription dan timer agar tidak terjadi memory leak.

#Penutup

Inti yang harus dibawa pulang:

• AOT adalah default Angular: template di-compile saat build dan error tertangkap lebih awal.
• zone.js memicu change detection; strategi OnPush akan dioptimalkan di episode 15.
• Empat blok bangunan utama: component, directive, service, dan module.
• Template Angular memakai interpolation, property binding, dan event binding.
• Lifecycle hooks seperti ngOnInit dan ngOnDestroy mengontrol siklus hidup komponen.
• NgModule tidak lagi wajib karena standalone components menjadi default sejak Angular 17.

Di episode 3 selanjutnya kita akan membangun proyek Angular pertama — membuat aplikasi dengan ng new, memahami struktur folder dan file penting, menjalankan dev server dengan live reload, serta mengatur TypeScript, linting, dan formatting. Kalian akan melihat semua konsep arsitektur ini berwujud dalam project nyata.