Pelajari Angular 2: Dari Pemula hingga Mahir dalam Aplikasi Web

Daftar Isi

Pengantar Angular 2 dan Ekosistemnya
Persiapan Lingkungan Pengembangan Angular
Struktur Proyek Angular 2
Membuat dan Menggunakan Komponen Angular
Routing dan Navigasi di Angular
Services dan Dependency Injection
Membuat Form dengan Template-driven dan Reactive Forms
HTTP Client: Mengambil dan Mengirim Data
Deploy Aplikasi Angular 2
Sumber Belajar dan Source Code Lengkap

1. Pengantar Angular 2 dan Ekosistemnya

Angular 2 adalah versi modern dari framework Angular yang dikembangkan oleh Google untuk membangun aplikasi web single-page (SPA) yang dinamis dan scalable.

Angular menggunakan TypeScript sebagai bahasa utama, menyediakan fitur seperti komponen, routing, dependency injection, dan banyak lagi untuk memudahkan pengembangan aplikasi web.

2. Persiapan Lingkungan Pengembangan Angular

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

Node.js versi terbaru (disarankan v16+)
Angular CLI (Command Line Interface) untuk membuat dan mengelola proyek Angular
Editor kode seperti Visual Studio Code

Instal Angular CLI secara global dengan perintah:

npm install -g @angular/cli

Buat proyek baru dengan perintah:

ng new nama-proyek-angular

Masuk ke folder proyek dan jalankan server development:

cd nama-proyek-angular
ng serve

Buka http://localhost:4200 di browser untuk melihat aplikasi berjalan.

Tampilan terminal menjalankan perintah ng serve untuk menjalankan server development Angular

3. Struktur Proyek Angular 2

Berikut adalah struktur folder utama proyek Angular 2:

/nama-proyek-angular
├── e2e
├── node_modules
├── src
│   ├── app
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── ...komponen lain
│   ├── assets
│   ├── environments
│   ├── index.html
│   ├── main.ts
│   └── styles.css
├── angular.json
├── package.json
└── tsconfig.json

Folder src/app berisi komponen dan modul aplikasi Anda.

Diagram struktur folder proyek Angular 2 dengan folder src, app, assets, dan file konfigurasi

4. Membuat dan Menggunakan Komponen Angular

Komponen adalah blok bangunan utama aplikasi Angular. Berikut contoh membuat komponen baru:

Jalankan perintah CLI untuk membuat komponen:

ng generate component nama-komponen

Contoh kode komponen sederhana ( hello.component.ts ):

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

@Component({
  selector: 'app-hello',
  template: `
    <div class="p-4 bg-red-100 rounded text-red-800 font-semibold">
      Halo, Selamat belajar Angular 2!
    </div>
  `
})
export class HelloComponent {}

Gunakan komponen ini di app.component.html dengan menambahkan tag:

<app-hello></app-hello>

Kode contoh komponen Angular HelloComponent dengan template menampilkan pesan halo

5. Routing dan Navigasi di Angular

Angular Router memungkinkan navigasi antar halaman dalam aplikasi SPA.

Contoh konfigurasi routing di 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 tag <a routerLink="/about"> untuk navigasi:

<nav>
  <a routerLink="" routerLinkActive="active">Beranda</a>
  <a routerLink="about" routerLinkActive="active">Tentang</a>
</nav>

Kode contoh routing Angular dengan konfigurasi routes dan navigasi menggunakan routerLink

6. Services dan Dependency Injection

Services digunakan untuk mengelola data dan logika bisnis yang dapat digunakan di banyak komponen.

Contoh membuat 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();
  }
}

Kode contoh service Angular DataService dan penggunaannya di ListComponent

7. Membuat Form dengan Template-driven dan Reactive Forms

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

Template-driven Form

Contoh form sederhana:

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <input name="username" ngModel required />
  <button type="submit">Kirim</button>
</form>

Reactive Form

Contoh pembuatan form di komponen:

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

@Component({
  selector: 'app-reactive-form',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input formControlName="email" placeholder="Email" />
      <button type="submit">Submit</button>
    </form>
  `
})
export class ReactiveFormComponent {
  form = new FormGroup({
    email: new FormControl('', [Validators.required, Validators.email])
  });

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

Kode contoh form Angular template-driven dan reactive form dengan validasi email

8. HTTP Client: Mengambil dan Mengirim Data

Angular menyediakan HttpClient untuk komunikasi dengan server API.

Contoh mengambil data dari API:

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

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

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('https://jsonplaceholder.typicode.com/posts?_limit=5')
      .subscribe(data => this.posts = data as any[]);
  }
}