Pelajari Angular Modern: Siap Kerja dengan Aplikasi Produksi

1. Pengantar Angular Modern

Angular adalah framework frontend yang dikembangkan oleh Google untuk membangun aplikasi web modern, scalable, dan maintainable. Versi terbaru Angular membawa banyak fitur canggih seperti standalone components, improved performance, dan tooling yang lebih baik.

Dalam panduan ini, Anda akan belajar langkah demi langkah membangun aplikasi Angular yang siap produksi dan digunakan di dunia kerja.

Diagram arsitektur aplikasi Angular modern dengan komponen, service, routing, dan state management

2. Persiapan Lingkungan

Siapkan tools berikut sebelum mulai:

Node.js dan npm (unduh dari nodejs.org )
Angular CLI untuk membuat dan mengelola proyek Angular: npm install -g @angular/cli
Editor Kode seperti Visual Studio Code dengan ekstensi Angular dan TypeScript

3. Membuat Proyek Angular

Buat proyek Angular baru dengan Angular CLI:

ng new angular-production-app --routing --style=css

Pilih Yes untuk routing dan CSS sebagai style format. Setelah selesai, masuk ke folder proyek dan jalankan:

cd angular-production-app
ng serve --open

Aplikasi akan terbuka di http://localhost:4200 .

Tampilan awal aplikasi Angular di browser dengan halaman default

4. Memahami Struktur Proyek

Struktur folder utama proyek Angular:

src/app/ - Tempat semua kode aplikasi (komponen, service, modul)
src/assets/ - File statis seperti gambar dan stylesheet
angular.json - Konfigurasi proyek Angular
package.json - Daftar dependencies dan script npm

Screenshot struktur folder proyek Angular di Visual Studio Code

5. Membuat Komponen

Komponen adalah blok bangunan utama aplikasi Angular. Buat komponen baru dengan perintah:

ng generate component products

Contoh kode komponen products.component.ts untuk menampilkan daftar produk:

import { Component, OnInit } from '@angular/core';

interface Product {
  id: number;
  name: string;
  price: number;
}

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  products: Product[] = [
    { id: 1, name: 'Laptop', price: 15000000 },
    { id: 2, name: 'Smartphone', price: 7000000 },
    { id: 3, name: 'Headphones', price: 1500000 }
  ];

  constructor() { }

  ngOnInit(): void {}
}

Tampilan HTML di products.component.html :

<div class="p-4">
  <h3 class="text-2xl font-semibold mb-4 text-blue-700">Daftar Produk</h3>
  <ul class="space-y-3">
    <li *ngFor="let product of products" class="border rounded p-3 bg-white shadow-sm flex justify-between items-center">
      <div>
        <h4 class="font-semibold text-lg">{{ product.name }}</h4>
        <p class="text-gray-600">Harga: Rp {{ product.price | number }}</p>
      </div>
    </li>
  </ul>
</div>

Tampilan daftar produk sederhana di aplikasi Angular

6. Routing dan Navigasi

Angular routing memungkinkan navigasi antar halaman komponen tanpa reload. Contoh konfigurasi routing di app-routing.module.ts :

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductsComponent } from './products/products.component';

const routes: Routes = [
  { path: '', redirectTo: '/products', pathMatch: 'full' },
  { path: 'products', component: ProductsComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Tambahkan <router-outlet> di app.component.html untuk menampilkan komponen sesuai rute.

Ilustrasi navigasi routing Angular dengan menu dan konten dinamis

7. Service dan HTTP Client

Service Angular digunakan untuk logika bisnis dan komunikasi API. Contoh service untuk mengambil data produk dari API:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface Product {
  id: number;
  name: string;
  price: number;
}

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  private apiUrl = 'https://api.example.com/products';

  constructor(private http: HttpClient) { }

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.apiUrl);
  }
}

Jangan lupa import HttpClientModule di app.module.ts :

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule,
    // modul lain
  ],
})
export class AppModule { }

Ilustrasi service Angular dengan kode dan diagram komunikasi API

8. Form dan Validasi

Angular menyediakan Reactive Forms dan Template-driven Forms untuk membuat form dengan validasi. Contoh Reactive Form sederhana:

import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-product-form',
  templateUrl: './product-form.component.html'
})
export class ProductFormComponent {
  productForm = this.fb.group({
    name: ['', Validators.required],
    price: ['', [Validators.required, Validators.min(0)]]
  });

  constructor(private fb: FormBuilder) {}

  onSubmit() {
    if (this.productForm.valid) {
      console.log(this.productForm.value);
    }
  }
}

Template HTML product-form.component.html :

<form [formGroup]="productForm" (ngSubmit)="onSubmit()" class="space-y-4 p-4 border rounded bg-white">
  <div>
    <label for="name" class="block font-semibold">Nama Produk</label>
    <input id="name" formControlName="name" class="border p-2 rounded w-full" />
    <div *ngIf="productForm.get('name')?.invalid && productForm.get('name')?.touched" class="text-red-600 text-sm">
      Nama produk wajib diisi.
    </div>
  </div>

  <div>
    <label for="price" class="block font-semibold">Harga</label>
    <input id="price" type="number" formControlName="price" class="border p-2 rounded w-full" />
    <div *ngIf="productForm.get('price')?.invalid && productForm.get('price')?.touched" class="text-red-600 text-sm">
      Harga harus angka dan tidak boleh kurang dari 0.
    </div>
  </div>

  <button type="submit" [disabled]="productForm.invalid" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Simpan</button>
</form>

Tampilan form input produk dengan validasi di aplikasi Angular

9. State Management

Untuk aplikasi besar, state management penting agar data konsisten dan mudah dikelola. Angular menyediakan beberapa opsi seperti NgRx, Akita, atau BehaviorSubject di service.

Contoh sederhana menggunakan BehaviorSubject di service:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class StateService {
  private messageSource = new BehaviorSubject<string>('Halo dari StateService');
  currentMessage = this.messageSource.asObservable();

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

Komponen dapat subscribe ke currentMessage untuk mendapatkan update data secara real-time.

Diagram state management Angular menggunakan BehaviorSubject dan service

10. Deployment Aplikasi

Setelah aplikasi selesai, lakukan build produksi dengan perintah:

ng build --prod

Folder dist/angular-production-app berisi file statis yang siap di-deploy ke hosting seperti Netlify, Vercel, Firebase Hosting, atau server Anda sendiri.

Pastikan konfigurasi server mendukung SPA dengan mengarahkan semua rute ke index.html .