Master Angular 4: Dari Pemula hingga E-commerce Pro!

Daftar Isi

Bab 1: Pengenalan Angular 4
Bab 2: Instalasi dan Setup Lingkungan
Bab 3: Struktur Proyek Angular
Bab 4: Komponen dan Template
Bab 5: Data Binding dan Direktif
Bab 6: Service dan Dependency Injection
Bab 7: Routing dan Navigasi
Bab 8: Formulir dan Validasi
Bab 9: HTTP Client dan API
Bab 10: Membangun Aplikasi E-commerce
Bab 11: Optimasi dan Deployment
Bab 12: Tips dan Trik Angular 4
Bab 13: Studi Kasus Proyek E-commerce
Bab 14: Referensi dan Sumber Belajar

Bab 1: Pengenalan Angular 4

Angular 4 adalah salah satu framework JavaScript yang dikembangkan oleh Google untuk membangun aplikasi web yang dinamis dan modern. Angular 4 merupakan versi lanjutan dari Angular 2 dengan berbagai perbaikan performa dan fitur baru.

Framework ini menggunakan TypeScript sebagai bahasa utama, yang memberikan tipe data statis dan fitur modern JavaScript. Angular 4 memudahkan pengembang dalam membuat aplikasi single-page dengan arsitektur komponen yang modular dan mudah dipelihara.

Bab 2: Instalasi dan Setup Lingkungan

Untuk memulai pengembangan dengan Angular 4, Anda perlu menyiapkan lingkungan pengembangan terlebih dahulu. Berikut langkah-langkah instalasi:

Install Node.js dan npm dari situs resmi nodejs.org .
Install Angular CLI versi 1.4 yang kompatibel dengan Angular 4 menggunakan perintah npm install -g @angular/cli@1.4 .
Buat proyek baru dengan perintah ng new nama-proyek .
Jalankan server development dengan ng serve dan buka http://localhost:4200 di browser.

Ilustrasi terminal komputer dengan perintah npm install dan Angular CLI untuk setup proyek Angular 4

Bab 3: Struktur Proyek Angular

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

src/app/ : Tempat menyimpan komponen, service, dan modul aplikasi.
src/assets/ : Folder untuk menyimpan aset seperti gambar dan file statis.
src/environments/ : Konfigurasi environment untuk development dan production.
angular.json : File konfigurasi Angular CLI.
package.json : Daftar dependensi dan script npm.

Diagram struktur folder proyek Angular 4 dengan folder app, assets, environments dan file konfigurasi

Bab 4: Komponen dan Template

Komponen adalah blok bangunan utama dalam Angular. Setiap komponen terdiri dari:

Class TypeScript yang mengatur logika.
Template HTML yang menentukan tampilan.
CSS untuk styling komponen.

Contoh komponen sederhana:


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

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

Ilustrasi diagram komponen Angular 4 yang terdiri dari class TypeScript, template HTML dan styling CSS

Bab 5: Data Binding dan Direktif

Angular 4 menyediakan berbagai teknik data binding untuk menghubungkan data antara komponen dan template:

Interpolation : Menampilkan data dengan {{ '{' }}{{ data }}{{ '}' }} .
Property Binding : Mengikat properti HTML dengan [property]="data" .
Event Binding : Menangani event dengan (click)="fungsi()" .
Two-way Binding : Mengikat data dua arah dengan [(ngModel)]="data" .

Direktif adalah atribut khusus yang mengubah tampilan atau perilaku elemen HTML, contohnya:

*ngIf untuk kondisi tampil/tidak.
*ngFor untuk perulangan data.

Ilustrasi contoh kode Angular 4 data binding dan direktif seperti ngIf dan ngFor dengan tampilan kode dan hasil

Bab 6: Service dan Dependency Injection

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

Contoh service sederhana:


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

@Injectable()
export class ProdukService {
  getProduk() {
    return [
      { id: 1, nama: 'Sepatu', harga: 500000 },
      { id: 2, nama: 'Tas', harga: 300000 }
    ];
  }
}

Service ini dapat disuntikkan ke komponen melalui constructor:


import { Component } from '@angular/core';
import { ProdukService } from './produk.service';

@Component({
  selector: 'app-produk',
  template: '<div *ngFor="let p of produk">{{ p.nama }} - Rp{{ p.harga }}</div>'
})
export class ProdukComponent {
  produk = [];

  constructor(private produkService: ProdukService) {
    this.produk = this.produkService.getProduk();
  }
}

Diagram ilustrasi service Angular 4 dan dependency injection yang menghubungkan service dengan komponen

Bab 7: Routing dan Navigasi

Routing memungkinkan aplikasi Angular untuk memiliki beberapa halaman dan navigasi antar halaman tanpa reload. Konfigurasi routing dilakukan di file app-routing.module.ts .

Contoh konfigurasi routing:


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

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'produk', component: ProdukComponent }
];

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

Navigasi dilakukan dengan tag <a routerLink="/produk"> atau programmatically dengan Router service.

Ilustrasi peta halaman aplikasi Angular 4 dengan routing dan navigasi antar halaman Home dan Produk

Bab 8: Formulir dan Validasi

Angular 4 menyediakan dua cara membuat formulir: Template-driven dan Reactive Forms. Validasi dapat dilakukan dengan built-in validator atau custom validator.

Contoh formulir template-driven dengan validasi:


<form #formUser="ngForm" (ngSubmit)="submitForm(formUser)">
  <input name="nama" ngModel required minlength="3" />
  <div *ngIf="formUser.controls.nama?.invalid && formUser.controls.nama?.touched">
    Nama harus diisi dan minimal 3 karakter.
  </div>
  <button type="submit" [disabled]="formUser.invalid">Kirim</button>
</form>

Ilustrasi formulir input dan validasi di Angular 4 dengan pesan error muncul saat input tidak valid

Bab 9: HTTP Client dan API

Angular 4 menyediakan modul HttpClient untuk berkomunikasi dengan API backend. Anda dapat melakukan request GET, POST, PUT, DELETE dengan mudah.

Contoh mengambil data produk dari API:


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

@Injectable()
export class ProdukService {
  constructor(private http: HttpClient) {}

  getProduk() {
    return this.http.get('https://api.example.com/produk');
  }
}

Ilustrasi HTTP Client Angular 4 mengambil data dari API dengan diagram request dan response

Bab 10: Membangun Aplikasi E-commerce

Pada bab ini, kita akan membangun aplikasi e-commerce sederhana menggunakan Angular 4. Fitur utama meliputi daftar produk, keranjang belanja, dan checkout.

Langkah awal adalah membuat komponen produk dan service untuk mengelola data produk serta keranjang.

Ilustrasi aplikasi e-commerce Angular 4 menampilkan daftar produk dan keranjang belanja di layar

Contoh tampilan daftar produk:

Sepatu Olahraga

Rp 500.000

Tas Ransel

Rp 300.000

Bab 11: Optimasi dan Deployment

Setelah aplikasi selesai dibuat, langkah selanjutnya adalah optimasi performa dan deployment ke server produksi.

Gunakan perintah ng build --prod untuk membangun aplikasi dengan optimasi.
Minify dan tree-shaking akan mengurangi ukuran bundle.
Deploy hasil build ke hosting seperti Firebase Hosting, Netlify, atau server Anda sendiri.
Pastikan konfigurasi base href sesuai dengan lokasi hosting.