Daftar Isi

1. Pengantar Angular 10
2. Persiapan Lingkungan Pengembangan
3. Struktur Proyek Angular 10
4. Membuat Komponen Pertama
5. Data Binding dan Direktif
6. Routing dan Navigasi
7. Service dan Dependency Injection
8. HTTP Client dan Konsumsi API
9. Praktik Membuat Aplikasi Sederhana
10. Sumber Belajar dan Channel Rekomendasi

1. Pengantar Angular 10

Angular adalah framework front-end yang dikembangkan oleh Google untuk membangun aplikasi web yang dinamis dan responsif. Versi 10 merupakan salah satu versi stabil yang banyak digunakan untuk pengembangan aplikasi modern.

Dengan Angular, Anda dapat membuat aplikasi single-page (SPA) yang cepat dan mudah dikelola menggunakan TypeScript, komponen modular, dan sistem routing yang canggih.

2. Persiapan Lingkungan Pengembangan

Sebelum mulai belajar Angular 10, pastikan Anda sudah menyiapkan lingkungan pengembangan berikut:

• Node.js versi 12 atau lebih baru (unduh dari nodejs.org )
• Angular CLI (Command Line Interface) untuk membuat dan mengelola proyek Angular
• Editor kode seperti Visual Studio Code

Instalasi Angular CLI:

npm install -g @angular/cli
      

Membuat proyek baru:

ng new nama-proyek-angular
      

Setelah itu, masuk ke folder proyek dan jalankan server development:

cd nama-proyek-angular
ng serve --open
      

Browser akan terbuka secara otomatis di http://localhost:4200 menampilkan aplikasi Angular default.

3. Struktur Proyek Angular 10

Setelah membuat proyek, Anda akan melihat struktur folder seperti berikut:

• src/app/ - Tempat menyimpan komponen, service, dan modul aplikasi
• src/assets/ - Folder untuk menyimpan gambar, file statis, dan aset lainnya
• angular.json - Konfigurasi proyek Angular
• package.json - Daftar dependensi dan script npm

Fokus utama kita adalah folder src/app karena di sini kita akan membuat dan mengelola komponen-komponen aplikasi.

4. Membuat Komponen Pertama

Komponen adalah blok bangunan utama dalam Angular. Untuk membuat komponen baru, gunakan Angular CLI:

ng generate component nama-komponen

Contoh: Membuat komponen hello-world

ng generate component hello-world
      

Komponen ini akan memiliki 4 file utama:

• hello-world.component.ts - Logika TypeScript komponen
• hello-world.component.html - Template HTML
• hello-world.component.css - Styling khusus komponen
• hello-world.component.spec.ts - Unit test komponen

Contoh isi hello-world.component.html :

<h2>Halo Dunia dari Komponen HelloWorld!</h2>
<p>Ini adalah komponen Angular pertama Anda.</p>

5. Data Binding dan Direktif

Angular menyediakan berbagai cara untuk menghubungkan data antara komponen dan template:

• Interpolation : Menampilkan data dari komponen ke template menggunakan {{ }}
• Property Binding : Mengikat properti HTML ke properti komponen dengan [property]="value"
• Event Binding : Menangani event dari template ke komponen dengan (event)="handler()"
• Two-way Binding : Mengikat data dua arah dengan [(ngModel)]="property"

Contoh penggunaan interpolation dan event binding:

<h3>{{ title }}</h3>
<button (click)="ubahJudul()" class="bg-indigo-600 text-white px-4 py-2 rounded">Ubah Judul</button>

Kode TypeScript:

title = 'Belajar Angular 10';

ubahJudul() {
  this.title = 'Judul Telah Diubah!';
}

Selain itu, Angular memiliki direktif bawaan seperti *ngIf untuk kondisi dan *ngFor untuk perulangan.

Contoh *ngFor menampilkan daftar:

<ul>
  <li *ngFor="let item of daftarNama">{{ item }}</li>
</ul>

Kode TypeScript:

daftarNama = ['Andi', 'Budi', 'Citra', 'Dewi'];
      

6. Routing dan Navigasi

Routing memungkinkan aplikasi Angular memiliki beberapa halaman atau view yang dapat dinavigasi tanpa reload halaman.

Langkah membuat routing:

1. Tambahkan routing saat membuat proyek dengan ng new nama-proyek --routing atau buat file app-routing.module.ts
2. Definisikan rute di dalam app-routing.module.ts :

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 { }

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

Contoh navigasi di template:

<nav>
  <a routerLink="/" routerLinkActive="font-bold" class="mr-4">Home</a>
  <a routerLink="/about" routerLinkActive="font-bold">About</a>
</nav>

7. Service dan Dependency Injection

Service adalah kelas yang menyediakan data atau fungsi yang dapat digunakan oleh beberapa komponen. Angular menggunakan dependency injection untuk menyuntikkan service ke komponen.

Membuat service dengan Angular CLI:

ng generate service data

Contoh service sederhana data.service.ts :

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

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

  getData() {
    return this.data;
  }
}

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 items">{{ item }}</li>
    </ul>
  `
})
export class ListComponent implements OnInit {
  items: string[] = [];

  constructor(private dataService: DataService) {}

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

8. HTTP Client dan Konsumsi API

Angular menyediakan modul HttpClient untuk berkomunikasi dengan API eksternal.

Langkah menggunakan HttpClient:

1. Import HttpClientModule di app.module.ts :

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

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

Contoh service untuk mengambil data dari API:

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) {}

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

Menggunakan service API di komponen:

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-post-list',
  template: `
    <h3>Daftar Post</h3>
    <ul>
      <li *ngFor="let post of posts">
        <strong>{{ post.title }}</strong>
        <p>{{ post.body }}</p>
      </li>
    </ul>
  `
})
export class PostListComponent implements OnInit {
  posts: any[] = [];

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.apiService.getPosts().subscribe(data => {
      this.posts = data;
    });
  }
}

9. Praktik Membuat Aplikasi Sederhana

Mari kita buat aplikasi daftar tugas (To-Do List) sederhana menggunakan Angular 10.

Langkah 1: Buat komponen todo

ng generate component todo

Langkah 2: Isi todo.component.ts dengan logika berikut:

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

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css']
})
export class TodoComponent {
  task: string = '';
  tasks: string[] = [];

  tambahTask() {
    if(this.task.trim()) {
      this.tasks.push(this.task.trim());
      this.task = '';
    }
  }

  hapusTask(index: number) {
    this.tasks.splice(index, 1);
  }
}

Langkah 3: Isi todo.component.html dengan template berikut:

<div class="max-w-md mx-auto bg-white p-6 rounded shadow">
  <h3 class="text-xl font-semibold mb-4 text-indigo-700">Daftar Tugas</h3>
  <input
    type="text"
    placeholder="Masukkan tugas"
    [(ngModel)]="task"
    class="border border-gray-300 rounded px-3 py-2 w-full mb-3 focus:outline-indigo-500"
  />
  <button
    (click)="tambahTask()"
    class="bg-indigo-600 text-white px-4 py-2 rounded w-full mb-4 hover:bg-indigo-700"
  >Tambah</button>

  <ul>
    <li
      *ngFor="let t of tasks; let i = index"
      class="flex justify-between items-center border-b border-gray-200 py-2"
    >
      {{ t }}
      <button
        (click)="hapusTask(i)"
        class="text-red-600 hover:text-red-800"
        aria-label="Hapus tugas"
      ><i class="fas fa-trash-alt"></i></button>
    </li>
  </ul>
</div>

Jangan lupa import FormsModule di app.module.ts agar ngModel bisa digunakan:

import { FormsModule } from '@angular/forms';

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

Setelah itu, tambahkan selector <app-todo> di app.component.html untuk menampilkan aplikasi To-Do List.

10. Sumber Belajar dan Channel Rekomendasi

Berikut beberapa sumber belajar dan channel YouTube yang sangat membantu untuk memperdalam Angular 10:

• Angular Official Tutorial - Tutorial resmi dari Angular
• Academind - Channel YouTube dengan tutorial Angular lengkap dan mudah dipahami
• Traversy Media - Channel populer dengan banyak tutorial Angular dan web development
• Udemy - The Complete Guide to Angular - Kursus berbayar tapi sangat lengkap dan terstruktur
• freeCodeCamp Angular Articles - Artikel dan tutorial gratis

Dengan sumber belajar ini, Anda dapat terus mengasah keterampilan Angular Anda secara praktis dan mendalam.