Panduan Lengkap Menghubungkan Angular dengan NodeJS 2025
Daftar Isi
Pengantar
Pada era pengembangan aplikasi modern, Angular dan NodeJS merupakan dua teknologi yang sangat populer. Angular digunakan untuk membangun aplikasi frontend yang dinamis dan responsif, sementara NodeJS berperan sebagai backend server yang cepat dan scalable. Ebook ini akan membahas secara lengkap bagaimana menghubungkan Angular dengan NodeJS pada tahun 2025, sehingga Anda dapat membangun aplikasi full-stack yang efisien dan modern.
Persiapan Lingkungan
Sebelum memulai pengembangan, pastikan Anda sudah menyiapkan lingkungan pengembangan yang sesuai. Berikut adalah beberapa hal yang perlu dipersiapkan:
- Node.js versi terbaru (disarankan versi 18 atau lebih tinggi)
- Angular CLI terbaru
- Editor kode seperti Visual Studio Code
- Postman atau alat lain untuk testing API
Membuat Proyek Angular
Langkah pertama adalah membuat proyek Angular baru menggunakan Angular CLI. Buka terminal dan jalankan perintah berikut:
ng new my-angular-app
cd my-angular-app
ng serve
Perintah di atas akan membuat proyek baru bernama
my-angular-app
dan menjalankan server development Angular.
Membuat Server NodeJS
Selanjutnya, buat server backend menggunakan NodeJS dan Express. Buat folder baru di luar proyek Angular, lalu buat file
server.js
dengan isi berikut:
const express = require('express');
const cors = require('cors');
const app = express();
const port = 3000;
app.use(cors());
app.use(express.json());
app.get('/api/message', (req, res) => {
res.json({ message: 'Halo dari server NodeJS!' });
});
app.listen(port, () => {
console.log(`Server berjalan di http://localhost:${port}`);
});
Jalankan server dengan perintah:
node server.js
Menghubungkan Angular dengan NodeJS
Untuk menghubungkan Angular dengan NodeJS, kita akan menggunakan layanan Angular yang memanfaatkan HttpClient untuk melakukan request ke server NodeJS.
Pertama, pastikan modul
HttpClientModule
sudah diimport di
app.module.ts
:
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
// ... module lain
HttpClientModule
],
// ...
})
export class AppModule { }
Menangani Request dan Response
Buat service Angular untuk mengakses API NodeJS. Contoh service
api.service.ts
:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ApiService {
private apiUrl = 'http://localhost:3000/api';
constructor(private http: HttpClient) { }
getMessage(): Observable<{ message: string }> {
return this.http.get<{ message: string }>(`${this.apiUrl}/message`);
}
}
Menggunakan HttpClient di Angular
Gunakan service yang sudah dibuat di komponen Angular untuk menampilkan data dari server NodeJS. Contoh di
app.component.ts
:
import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';
@Component({
selector: 'app-root',
template: `
<div class="p-6">
<h1 class="text-2xl font-bold mb-4">Pesan dari Server</h1>
<p *ngIf="message">{{ message }}</p>
<p *ngIf="!message">Memuat pesan...</p>
</div>
`
})
export class AppComponent implements OnInit {
message: string | null = null;
constructor(private apiService: ApiService) {}
ngOnInit() {
this.apiService.getMessage().subscribe(data => {
this.message = data.message;
});
}
}
Contoh Aplikasi Sederhana
Berikut contoh aplikasi sederhana yang menghubungkan Angular dengan NodeJS untuk menampilkan daftar pengguna dari server.
Server NodeJS (server.js):
const express = require('express');
const cors = require('cors');
const app = express();
const port = 3000;
app.use(cors());
app.use(express.json());
const users = [
{ id: 1, name: 'Budi' },
{ id: 2, name: 'Sari' },
{ id: 3, name: 'Andi' }
];
app.get('/api/users', (req, res) => {
res.json(users);
});
app.listen(port, () => {
console.log(`Server berjalan di http://localhost:${port}`);
});
Service Angular (api.service.ts):
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
export interface User {
id: number;
name: string;
}
@Injectable({
providedIn: 'root'
})
export class ApiService {
private apiUrl = 'http://localhost:3000/api';
constructor(private http: HttpClient) { }
getUsers(): Observable<User[]> {
return this.http.get<User[]>(`${this.apiUrl}/users`);
}
}
Komponen Angular (app.component.ts):
import { Component, OnInit } from '@angular/core';
import { ApiService, User } from './api.service';
@Component({
selector: 'app-root',
template: `
<div class="p-6">
<h1 class="text-2xl font-bold mb-4">Daftar Pengguna</h1>
<ul>
<li *ngFor="let user of users">{{ user.name }}</li>
</ul>
<p *ngIf="users.length === 0">Memuat data pengguna...</p>
</div>
`
})
export class AppComponent implements OnInit {
users: User[] = [];
constructor(private apiService: ApiService) {}
ngOnInit() {
this.apiService.getUsers().subscribe(data => {
this.users = data;
});
}
}
Debugging dan Testing
Untuk memastikan aplikasi berjalan dengan baik, lakukan debugging dan testing secara berkala:
- Gunakan console.log di NodeJS dan Angular untuk memeriksa data dan alur program.
- Manfaatkan tools seperti Postman untuk menguji endpoint API NodeJS.
- Gunakan Angular DevTools untuk memeriksa state dan performa aplikasi Angular.
- Jalankan unit test dan end-to-end test untuk memastikan fitur berjalan sesuai harapan.
Kesimpulan
Menghubungkan Angular dengan NodeJS memungkinkan Anda membangun aplikasi full-stack yang modern dan efisien. Dengan mengikuti panduan ini, Anda dapat membuat server backend menggunakan NodeJS dan Express, serta mengakses API tersebut dari aplikasi Angular menggunakan HttpClient. Pastikan untuk selalu melakukan testing dan debugging agar aplikasi berjalan optimal.
