Panduan Lengkap Angular 2: Kembangkan Website dengan TypeScript

Pelajari langkah demi langkah dalam panduan lengkap Angular 2 ini! Kembangkan website profesional menggunakan TypeScript dan tingkatkan keterampilan coding Anda!

By WGS INDONESIA
4.9/4.9
Indonesia
Rp 43,750.00 GRATIS
E-COURSE banner with text and icons representing Artificial Intelligence and video learning

Detail Pembelajaran

Panduan Lengkap Angular 2: Kembangkan Website dengan TypeScript
  • Angular, TypeScript, Pengembangan Web, Tutorial, Panduan Lengkap

Baca Online

Panduan Lengkap Angular 2: Kembangkan Website dengan TypeScript

Daftar Isi

  1. Pengantar Angular 2 dan TypeScript
  2. Persiapan Lingkungan Pengembangan
  3. Struktur Proyek Angular 2
  4. Membuat Komponen Pertama
  5. Data Binding dan Direktif
  6. Routing dan Navigasi
  7. Service dan Dependency Injection
  8. Form dan Validasi
  9. Deploy Aplikasi Angular
  10. Sumber Belajar dan Source Code

1. Pengantar Angular 2 dan TypeScript

Angular 2 adalah framework front-end yang dikembangkan oleh Google untuk membangun aplikasi web yang dinamis dan modern. Angular 2 menggunakan TypeScript, sebuah superset JavaScript yang menambahkan fitur seperti tipe statis dan kelas, sehingga membuat pengembangan aplikasi lebih terstruktur dan mudah dipelihara.

Dalam panduan ini, Anda akan belajar langkah demi langkah bagaimana membuat aplikasi web menggunakan Angular 2 dan TypeScript, mulai dari instalasi hingga deploy aplikasi.

Logo Angular 2 berwarna merah dengan ikon TypeScript biru di sebelahnya, melambangkan integrasi Angular 2 dan TypeScript

2. Persiapan Lingkungan Pengembangan

Sebelum mulai coding, kita perlu menyiapkan lingkungan pengembangan. Berikut langkah-langkahnya:

  1. Install Node.js versi terbaru dari nodejs.org .
  2. Install Angular CLI secara global dengan perintah:
    npm install -g @angular/cli
  3. Verifikasi instalasi dengan menjalankan:
    ng version
Seorang developer sedang menyiapkan lingkungan pengembangan dengan laptop terbuka dan kode di layar, suasana modern dan fokus

3. Struktur Proyek Angular 2

Setelah membuat proyek baru dengan Angular CLI, Anda akan melihat struktur folder seperti berikut:

my-angular-app/
├── e2e/
├── node_modules/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── ...
│   ├── assets/
│   ├── environments/
│   ├── index.html
│   └── main.ts
├── angular.json
├── package.json
└── tsconfig.json
      

Penjelasan singkat:

  • src/app/ : Tempat kode utama aplikasi, termasuk komponen dan modul.
  • angular.json : Konfigurasi proyek Angular.
  • package.json : Daftar dependensi dan script npm.
  • tsconfig.json : Konfigurasi TypeScript.
Diagram struktur folder proyek Angular 2 dengan folder src, app, assets, dan file konfigurasi seperti angular.json dan package.json

4. Membuat Komponen Pertama

Komponen adalah blok bangunan utama dalam Angular. Mari kita buat komponen pertama bernama hello-world .

  1. Jalankan perintah berikut di terminal:
    ng generate component hello-world
  2. Buka file src/app/hello-world/hello-world.component.ts dan ubah isi template menjadi:
    <h2>Halo Dunia dari Komponen HelloWorld!</h2>
              
  3. Tambahkan tag komponen ini di app.component.html :
    <app-hello-world></app-hello-world>
  4. Jalankan aplikasi dengan:
    ng serve
Tampilan editor kode yang menampilkan file hello-world.component.ts dengan kode TypeScript dan template HTML

5. Data Binding dan Direktif

Angular menyediakan berbagai cara untuk menghubungkan data antara komponen dan template, yaitu data binding. Berikut contoh data binding satu arah dan dua arah:

export class HelloWorldComponent {
  title: string = 'Belajar Angular 2';
  inputText: string = '';
}
      
<h2>{{ title }}</h2>

<input [(ngModel)]="inputText" placeholder="Ketik sesuatu..." class="border p-2 rounded w-full max-w-md" />

<p>Anda mengetik: {{ inputText }}</p>
      

Direktif seperti *ngIf dan *ngFor digunakan untuk kontrol tampilan:

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

<div *ngIf="items.length === 0">Tidak ada data</div>
      

Jangan lupa import FormsModule di app.module.ts untuk menggunakan ngModel .

Contoh aplikasi Angular dengan input teks dan daftar item yang di-render menggunakan ngFor, tampilan modern dan bersih

6. Routing dan Navigasi

Routing memungkinkan aplikasi Angular memiliki beberapa halaman. Berikut cara menambahkan routing:

  1. Buat dua komponen baru:
    ng generate component home
    ng generate component about
  2. Tambahkan 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 { }
              
  3. Tambahkan tag <router-outlet> di app.component.html :
    <router-outlet></router-outlet>
  4. Tambahkan navigasi di app.component.html :
    <nav class="mb-6 space-x-4 text-indigo-700 font-semibold">
      <a routerLink="" routerLinkActive="underline" class="hover:text-indigo-900">Home</a>
      <a routerLink="about" routerLinkActive="underline" class="hover:text-indigo-900">About</a>
    </nav>
              
Tampilan aplikasi Angular dengan menu navigasi Home dan About, dan area konten berubah sesuai halaman

7. Service dan Dependency Injection

Service digunakan untuk mengelola data dan logika bisnis yang dapat digunakan oleh beberapa komponen. Angular menggunakan dependency injection untuk menyediakan service ke komponen.

  1. Buat service baru:
    ng generate service data
  2. Isi service data.service.ts dengan contoh:
    import { Injectable } from '@angular/core';
    
    @Injectable({
      providedIn: 'root'
    })
    export class DataService {
      private items: string[] = ['Angular', 'TypeScript', 'JavaScript'];
    
      getItems(): string[] {
        return this.items;
      }
    
      addItem(item: string) {
        this.items.push(item);
      }
    }
              
  3. Gunakan service di komponen:
    import { Component, OnInit } from '@angular/core';
    import { DataService } from '../data.service';
    
    @Component({
      selector: 'app-item-list',
      template: \`
        <ul>
          <li *ngFor="let item of items">{{ item }}</li>
        </ul>
        <input [(ngModel)]="newItem" placeholder="Tambah item" class="border p-2 rounded mr-2" />
        <button (click)="addItem()" class="bg-indigo-600 text-white px-4 py-2 rounded">Tambah</button>
      \`
    })
    export class ItemListComponent implements OnInit {
      items: string[] = [];
      newItem: string = '';
    
      constructor(private dataService: DataService) {}
    
      ngOnInit() {
        this.items = this.dataService.getItems();
      }
    
      addItem() {
        if(this.newItem.trim()) {
          this.dataService.addItem(this.newItem.trim());
          this.newItem = '';
          this.items = this.dataService.getItems();
        }
      }
    }
              
Contoh aplikasi Angular yang menampilkan daftar item dan input untuk menambah item baru menggunakan service dan dependency injection

8. Form dan Validasi

Angular menyediakan dua cara membuat form: Template-driven dan Reactive Forms. Berikut contoh form sederhana dengan validasi menggunakan Template-driven:

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)" class="max-w-md space-y-4">
  <div>
    <label for="name" class="block font-semibold">Nama:</label>
    <input type="text" id="name" name="name" ngModel required minlength="3" class="border p-2 rounded w-full" />
    <div *ngIf="myForm.submitted && myForm.controls.name?.invalid" class="text-red-600 text-sm">
      Nama harus diisi dan minimal 3 karakter.
    </div>
  </div>

  <button type="submit" [disabled]="myForm.invalid" class="bg-indigo-600 text-white px-4 py-2 rounded">Kirim</button>
</form>
      
onSubmit(form: any) {
  if(form.valid) {
    alert('Form berhasil dikirim! Nama: ' + form.value.name);
  }
}
      

Pastikan import FormsModule di app.module.ts untuk menggunakan template-driven forms.

Form Angular dengan input nama, validasi error berwarna merah, dan tombol submit berwarna biru

9. Deploy Aplikasi Angular

Setelah aplikasi selesai dibuat, Anda bisa melakukan build dan deploy ke server atau hosting. Berikut langkah build aplikasi:

ng build --prod

Folder dist/ akan berisi file hasil build yang siap diupload ke hosting. Anda bisa menggunakan layanan seperti Firebase Hosting, Netlify, atau server pribadi.

Contoh deploy menggunakan Firebase Hosting:

  1. Install Firebase CLI:
    npm install -g firebase-tools
  2. Login ke Firebase:
    firebase login
  3. Inisialisasi hosting di folder proyek:
    firebase init hosting
  4. Deploy aplikasi:
    firebase deploy
Tampilan terminal yang menunjukkan proses deploy aplikasi Angular ke Firebase Hosting dengan perintah firebase deploy

10. Sumber Belajar dan Source Code

Berikut beberapa sumber belajar dan channel yang sangat membantu untuk mendalami Angular 2 dan TypeScript:

Anda dapat mengunduh source code contoh aplikasi dari repositori berikut:

Ilustrasi buku, laptop, dan ikon GitHub yang melambangkan sumber belajar dan repositori kode

Edukasi Terkait