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.
2. Persiapan Lingkungan Pengembangan
Sebelum mulai coding, kita perlu menyiapkan lingkungan pengembangan. Berikut langkah-langkahnya:
-
Install
Node.js
versi terbaru dari
nodejs.org
.
-
Install
Angular CLI
secara global dengan perintah:
npm install -g @angular/cli
-
Verifikasi instalasi dengan menjalankan:
ng version
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.
4. Membuat Komponen Pertama
Komponen adalah blok bangunan utama dalam Angular. Mari kita buat komponen pertama bernama
hello-world
.
-
Jalankan perintah berikut di terminal:
ng generate component hello-world
-
Buka file
src/app/hello-world/hello-world.component.ts
dan ubah isi template menjadi:
<h2>Halo Dunia dari Komponen HelloWorld!</h2>
-
Tambahkan tag komponen ini di
app.component.html
:
<app-hello-world></app-hello-world>
-
Jalankan aplikasi dengan:
ng serve
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
.
6. Routing dan Navigasi
Routing memungkinkan aplikasi Angular memiliki beberapa halaman. Berikut cara menambahkan routing:
-
Buat dua komponen baru:
ng generate component home
ng generate component about
-
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 { }
-
Tambahkan tag
<router-outlet>
di
app.component.html
:
<router-outlet></router-outlet>
-
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>
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.
-
Buat service baru:
ng generate service data
-
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);
}
}
-
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();
}
}
}
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:
-
Install Firebase CLI:
npm install -g firebase-tools
-
Login ke Firebase:
firebase login
-
Inisialisasi hosting di folder proyek:
firebase init hosting
-
Deploy aplikasi:
firebase deploy