Cara Membuat Website dengan Angular dan TypeScript: Panduan Lengkap

Angular adalah framework JavaScript open-source yang dikembangkan oleh Google untuk membangun aplikasi web dinamis dan responsif. Angular menggunakan TypeScript sebagai bahasa utama untuk menulis kode. TypeScript adalah superset dari JavaScript yang menambahkan tipe data statis, sehingga meningkatkan pengembangan aplikasi web yang lebih besar dan lebih kompleks.

Berikut adalah panduan lengkap untuk membuat website menggunakan Angular dan TypeScript.

baca juga Mahasiswa Teknik Elektro Universitas Teknokrat Indonesia Raih Prestasi di Ajang Lomba Nasional Rimau Robotic Contest dan Exhibition 2025

Apa Itu Angular dan TypeScript?

• Angular: Framework JavaScript untuk membangun aplikasi web single-page (SPA). Angular menyediakan berbagai alat seperti routing, form handling, dan komunikasi HTTP, yang memudahkan pengembangan aplikasi web dinamis dan kompleks.
• TypeScript: Bahasa pemrograman yang dikembangkan oleh Microsoft dan merupakan superset dari JavaScript. TypeScript menyediakan pengetikan statis, yang membantu menangkap kesalahan lebih awal dalam pengembangan dan memberikan pengalaman pengkodean yang lebih baik.

Langkah-Langkah Membuat Website dengan Angular dan TypeScript

1. Instalasi Node.js dan Angular CLI

Sebelum mulai menggunakan Angular, Anda perlu menginstal Node.js dan Angular CLI (Command Line Interface).

• Unduh dan Instal Node.js: Kunjungi situs resmi Node.js dan unduh versi LTS (Long-Term Support).
• Instal Angular CLI: Setelah Node.js terinstal, buka terminal atau command prompt dan jalankan perintah berikut untuk menginstal Angular CLI secara global: npm install -g @angular/cli

Setelah itu, pastikan instalasi berhasil dengan menjalankan:

ng --version

2. Membuat Proyek Angular Baru

Setelah Angular CLI terinstal, Anda bisa membuat proyek baru dengan langkah-langkah berikut:

1. Buka terminal atau command prompt dan jalankan perintah berikut untuk membuat proyek baru: ng new my-angular-app
2. Ikuti petunjuk di terminal untuk memilih fitur tambahan (seperti routing atau gaya CSS). Jika Anda memilih Yes untuk routing, Anda akan diminta untuk memilih jenis stylesheet (CSS, SCSS, dll.).
3. Setelah proyek dibuat, pindah ke direktori proyek: cd my-angular-app

3. Menjalankan Aplikasi Angular

Untuk memastikan bahwa semuanya berjalan dengan baik, jalankan aplikasi pertama Anda menggunakan perintah berikut:

ng serve

Perintah ini akan menjalankan server pengembangan dan membuka aplikasi di http://localhost:4200 di browser. Jika Anda melihat halaman selamat datang Angular, berarti instalasi berhasil.

4. Struktur Proyek Angular

Setelah membuat proyek, berikut adalah struktur direktori yang akan Anda temui:

• src/app: Folder utama tempat Anda akan menulis komponen, layanan, dan modul Angular.
• src/assets: Tempat Anda menyimpan file statis seperti gambar, font, dan file lainnya.
• src/environments: Konfigurasi lingkungan seperti development atau production.
• angular.json: File konfigurasi proyek Angular.

5. Membuat Komponen di Angular

Komponen adalah bagian dasar dari aplikasi Angular. Setiap komponen memiliki file HTML, CSS, dan TypeScript.

1. Membuat Komponen Baru:
   Untuk membuat komponen baru, jalankan perintah berikut: ng generate component home Perintah ini akan membuat folder home di dalam folder src/app dan menghasilkan empat file: home.component.ts, home.component.html, home.component.css, dan home.component.spec.ts.
2. Mengedit Komponen:
   Buka file home.component.ts dan tambahkan kode TypeScript berikut: import { Component } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent { title = 'Selamat datang di Website Angular!'; }
3. Mengedit Template HTML:
   Buka file home.component.html dan tambahkan HTML berikut untuk menampilkan data dari komponen: <h1>{{ title }}</h1> <p>Ini adalah halaman pertama dari aplikasi Angular Anda.</p>
4. Menambahkan Komponen ke Aplikasi:
   Sekarang buka file src/app/app.component.html dan tambahkan selector komponen yang telah Anda buat: <app-home></app-home>

Setelah itu, simpan semua file dan lihat di browser. Komponen home sekarang harus tampil di halaman utama aplikasi Anda.

baca juga Revolusi Teknologi Modern Perpustakaan: Akses Lebih Cepat dan Mudah

6. Menambahkan Routing

Untuk membuat aplikasi berbasis halaman (SPA), Anda perlu menggunakan routing di Angular.

1. Konfigurasi Routing:
   Buka file src/app/app-routing.module.ts dan tambahkan konfigurasi routing untuk halaman yang berbeda. import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; const routes: Routes = [ { path: '', component: HomeComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
2. Menambahkan Router Outlet:
   Buka file src/app/app.component.html dan tambahkan tag <router-outlet></router-outlet> untuk menampilkan konten sesuai dengan rute yang aktif. <router-outlet></router-outlet>

7. Menambahkan Layanan (Services)

Layanan di Angular digunakan untuk berbagi data atau logika di seluruh aplikasi.

1. Membuat Layanan:
   Jalankan perintah berikut untuk membuat layanan baru: ng generate service data Ini akan menghasilkan file data.service.ts.
2. Menulis Layanan:
   Buka file data.service.ts dan tambahkan kode berikut untuk membuat layanan sederhana yang menyediakan data: import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class DataService { getData() { return ['Angular', 'TypeScript', 'HTML', 'CSS']; } }
3. Menggunakan Layanan di Komponen:
   Sekarang, buka komponen home.component.ts dan injeksikan layanan untuk menggunakan data: import { Component, OnInit } from '@angular/core'; import { DataService } from '../data.service'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit { data: string[]; constructor(private dataService: DataService) { } ngOnInit() { this.data = this.dataService.getData(); } }
4. Menampilkan Data di Template:
   Di file home.component.html, Anda dapat menampilkan data yang diperoleh dari layanan: <ul> <li *ngFor="let item of data">{{ item }}</li> </ul>

8. Mengoptimalkan dan Mempersiapkan untuk Build

Setelah aplikasi selesai, Anda dapat mengoptimalkan aplikasi dan mempersiapkannya untuk produksi dengan menjalankan perintah berikut:

ng build --prod

Perintah ini akan membangun aplikasi Angular Anda dengan optimasi untuk produksi. Hasilnya akan disimpan di folder dist/ dan siap untuk di-deploy ke server.

9. Menguji Aplikasi

Untuk menguji aplikasi, Anda dapat menulis unit test menggunakan framework testing yang disediakan oleh Angular, seperti Jasmine dan Karma. Jalankan perintah berikut untuk menjalankan tes:

ng test

Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda dapat membuat website dinamis menggunakan Angular dan TypeScript. Anda telah belajar bagaimana menginstal Angular, membuat komponen dan layanan, menambahkan routing, dan menyiapkan aplikasi untuk produksi. Angular adalah alat yang sangat kuat untuk membangun aplikasi web modern dan responsif. Dengan terus berlatih dan mengeksplorasi fitur-fitur lanjutan, Anda dapat membangun aplikasi web yang lebih kompleks dan terstruktur.

Penulis :Tanjali Mulia Nafisa