Daftar Isi

1. Pengantar Angular dan Ekosistemnya
2. Persiapan Lingkungan Pengembangan Angular
3. Memahami Struktur Proyek Angular
4. Membuat dan Menggunakan Komponen Angular
5. Template dan Data Binding
6. Directive dan Pipe di Angular
7. Service dan Dependency Injection
8. Routing dan Navigasi
9. Form Handling dan Validasi
10. HTTP Client dan Konsumsi API
11. State Management dengan NgRx
12. Testing Unit dan E2E di Angular
13. Optimasi Performa Aplikasi Angular
14. Deployment Aplikasi Angular
15. Sumber Belajar dan Channel Pembelajaran

1. Pengantar Angular dan Ekosistemnya

Angular adalah framework front-end yang dikembangkan oleh Google untuk membangun aplikasi web single-page (SPA) yang dinamis dan responsif. Angular menggunakan TypeScript sebagai bahasa utama dan menyediakan berbagai fitur seperti komponen, routing, form, dan layanan HTTP.

Ekosistem Angular juga mencakup alat bantu seperti Angular CLI, Angular Material, dan NgRx untuk state management.

2. Persiapan Lingkungan Pengembangan Angular

Untuk mulai mengembangkan aplikasi Angular, Anda perlu menyiapkan beberapa tools berikut:

• Node.js dan npm versi terbaru. Download di nodejs.org.
• Angular CLI untuk membuat dan mengelola proyek Angular dengan mudah.
• Editor kode seperti Visual Studio Code dengan ekstensi Angular dan TypeScript.

Instalasi Angular CLI

npm install -g @angular/cli
    

Setelah instalasi, cek versi dengan perintah:

ng version
    

3. Memahami Struktur Proyek Angular

Struktur proyek Angular yang dibuat dengan Angular CLI terdiri dari beberapa folder dan file penting:

• src/app/ - berisi komponen, layanan, dan modul aplikasi.
• src/assets/ - berisi aset statis seperti gambar dan file CSS.
• src/environments/ - konfigurasi environment untuk development dan production.
• angular.json - konfigurasi build dan proyek Angular.
• package.json - manajemen dependensi dan script npm.

4. Membuat dan Menggunakan Komponen Angular

Komponen adalah blok bangunan utama aplikasi Angular yang mengatur tampilan dan logika.

Membuat Komponen Baru

ng generate component nama-komponen
    

Contoh Komponen Sederhana

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

@Component({
  selector: 'app-salam',
  template: '<h1>Halo, Angular!</h1>',
  styles: ['h1 { color: #4f46e5; }']
})
export class SalamComponent {}
    

5. Template dan Data Binding

Angular menyediakan berbagai cara untuk menghubungkan data antara komponen dan tampilan.

Interpolation

<h1>{{ judul }}</h1>
    

Property Binding

<img [src]="gambarUrl" alt="Gambar">
    

Event Binding

<button (click)="klikTombol()">Klik Saya</button>
    

6. Directive dan Pipe di Angular

Directive mengubah tampilan atau perilaku elemen HTML, sedangkan pipe memformat data di template.

Contoh Directive

<div *ngIf="isTampil">Teks ini muncul jika isTampil true</div>
    

Contoh Pipe

<p>{{ tanggal | date:'fullDate' }}</p>
    

7. Service dan Dependency Injection

Service adalah kelas yang menyediakan data atau fungsi yang dapat digunakan oleh beberapa komponen. Dependency Injection (DI) adalah cara Angular menyediakan service ke komponen.

Contoh Service

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return ['Angular', 'React', 'Vue'];
  }
}
    

Menggunakan Service di Komponen

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-list',
  template: '<ul><li *ngFor="let item of data">{{ item }}</li></ul>'
})
export class ListComponent implements OnInit {
  data: string[] = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.data = this.dataService.getData();
  }
}
    

8. Routing dan Navigasi

Routing memungkinkan navigasi antar halaman dalam aplikasi SPA Angular.

Konfigurasi Routing

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

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

Navigasi di Template

<a routerLink="/">Home</a>
<a routerLink="/about">About</a>
    

9. Form Handling dan Validasi

Angular menyediakan dua cara membuat form: Template-driven dan Reactive Forms.

Contoh Template-driven Form

<form #form="ngForm" (ngSubmit)="submit(form)">
  <input name="nama" ngModel required />
  <button type="submit" [disabled]="form.invalid">Kirim</button>
</form>
    

Contoh Reactive Form

import { FormGroup, FormControl, Validators } from '@angular/forms';

form = new FormGroup({
  nama: new FormControl('', Validators.required)
});

submit() {
  if (this.form.valid) {
    console.log(this.form.value);
  }
}
    

10. HTTP Client dan Konsumsi API

Angular menyediakan HttpClient untuk berkomunikasi dengan server dan mengambil data dari API.

Contoh Penggunaan HttpClient

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

constructor(private http: HttpClient) {}

getData() {
  this.http.get('https://api.example.com/data')
    .subscribe(data => console.log(data));
}
    

11. State Management dengan NgRx

NgRx adalah library untuk mengelola state aplikasi Angular secara terstruktur menggunakan pola Redux.

Dengan NgRx, Anda dapat mengelola data aplikasi dengan lebih mudah dan predictable.

12. Testing Unit dan E2E di Angular

Angular mendukung unit testing dengan Jasmine dan Karma, serta end-to-end testing dengan Protractor.

Testing membantu memastikan aplikasi berjalan dengan baik dan bebas bug.

13. Optimasi Performa Aplikasi Angular

Pelajari teknik optimasi seperti lazy loading, change detection strategy, dan preloading untuk meningkatkan performa aplikasi.

14. Deployment Aplikasi Angular

Cara membangun dan menyebarkan aplikasi Angular ke server produksi atau layanan hosting seperti Firebase Hosting, Netlify, dan Vercel.

15. Sumber Belajar dan Channel Pembelajaran

Berikut beberapa sumber belajar dan channel yang sangat membantu untuk menguasai Angular:

• Dokumentasi Resmi Angular
• Angular YouTube Channel
• Udemy: The Complete Guide to Angular
• Pluralsight: Angular Getting Started
• Repository Angular di GitHub

Source Code Contoh Proyek

Anda dapat mengunduh source code contoh proyek Angular di GitHub berikut: