Memulai Angular: Instalasi dan Pembuatan Proyek Pertama Anda

Angular adalah framework JavaScript open-source yang kuat untuk membangun aplikasi web klien dinamis. Dikembangkan dan dipelihara oleh Google, Angular menyediakan arsitektur terstruktur untuk mengembangkan aplikasi web kompleks, modular, dan mudah dipelihara. Jika Anda baru dalam pengembangan Angular, panduan ini akan memandu Anda melalui proses instalasi dan pembuatan proyek Angular pertama Anda. Panduan ini akan membantu Anda memahami langkah-langkah yang diperlukan untuk memulai perjalanan pengembangan Angular Anda.

Daftar Isi

1. Prasyarat
2. Menginstal Node.js dan npm
3. Menginstal Angular CLI
4. Membuat Proyek Angular Baru
5. Menjelajahi Struktur Proyek Angular
6. Menjalankan Aplikasi Angular Anda
7. Membuat Komponen Angular Pertama Anda
8. Memahami Modul Angular
9. Routing di Angular
10. Layanan Angular dan Injeksi Dependensi
11. Menggunakan Angular Material
12. Menerapkan Pengujian Unit
13. Praktik Terbaik untuk Pengembangan Angular
14. Sumber Daya Tambahan untuk Belajar Angular
15. Kesimpulan

1. Prasyarat

Sebelum memulai instalasi dan pengembangan Angular, pastikan Anda memiliki prasyarat berikut:

• Pengetahuan Dasar HTML, CSS, dan JavaScript: Angular dibangun di atas teknologi web inti ini. Memiliki pemahaman yang kuat tentang HTML untuk struktur, CSS untuk gaya, dan JavaScript untuk interaktivitas sangat penting.
• Node.js dan npm: Angular CLI (Command Line Interface) dan proyek Angular membutuhkan Node.js dan Node Package Manager (npm) untuk instalasi dan manajemen dependensi.
• Kode Editor: Pilih kode editor sesuai preferensi Anda. Beberapa pilihan populer termasuk Visual Studio Code (disarankan), Sublime Text, dan Atom.

2. Menginstal Node.js dan npm

Node.js adalah lingkungan runtime JavaScript yang memungkinkan Anda menjalankan JavaScript di sisi server. npm adalah manajer paket untuk JavaScript dan disertakan dengan Node.js.

1. Unduh Node.js: Kunjungi situs web Node.js dan unduh versi LTS (Long Term Support) yang sesuai dengan sistem operasi Anda.
2. Instal Node.js: Jalankan installer yang diunduh dan ikuti petunjuk di layar untuk menginstal Node.js dan npm di sistem Anda.
3. Verifikasi Instalasi: Buka command prompt atau terminal dan jalankan perintah berikut untuk memverifikasi bahwa Node.js dan npm terinstal dengan benar:

node -v
npm -v

Perintah-perintah ini akan menampilkan versi Node.js dan npm yang terinstal di sistem Anda.

3. Menginstal Angular CLI

Angular CLI adalah alat baris perintah yang kuat yang memungkinkan Anda membuat, membangun, menguji, dan menerapkan aplikasi Angular. Ini menyederhanakan banyak tugas pengembangan umum dan membantu Anda menjaga konsistensi dalam proyek Anda. Untuk menginstal Angular CLI secara global, jalankan perintah berikut di command prompt atau terminal:

npm install -g @angular/cli

Opsi -g menginstal Angular CLI secara global, membuatnya tersedia dari mana saja di sistem Anda. Setelah instalasi selesai, verifikasi bahwa Angular CLI terinstal dengan benar dengan menjalankan perintah berikut:

ng version

Perintah ini akan menampilkan informasi tentang versi Angular CLI, versi Node.js, dan informasi terkait sistem lainnya.

4. Membuat Proyek Angular Baru

Sekarang setelah Anda menginstal Angular CLI, Anda dapat membuat proyek Angular baru. Navigasikan ke direktori tempat Anda ingin membuat proyek Anda dan jalankan perintah berikut:

ng new nama-proyek

Ganti nama-proyek dengan nama yang Anda inginkan untuk proyek Anda. Misalnya:

ng new hello-angular

Perintah ng new akan membuat folder baru dengan nama yang ditentukan dan mengatur proyek Angular dasar di dalamnya. Anda akan diminta beberapa pertanyaan selama proses pembuatan proyek:

• Apakah Anda ingin menambahkan Angular Routing? Pilih Yes jika Anda ingin menggunakan routing di aplikasi Anda. Routing memungkinkan Anda untuk menavigasi di antara berbagai tampilan dan komponen di aplikasi Anda.
• Gaya stylesheet mana yang ingin Anda gunakan? Pilih format stylesheet yang Anda inginkan (misalnya, CSS, SCSS, LESS). CSS adalah pilihan yang paling sederhana dan paling umum digunakan.

Setelah Anda menjawab pertanyaan-pertanyaan ini, Angular CLI akan membuat proyek dan menginstal dependensi yang diperlukan. Proses ini mungkin memakan waktu beberapa menit, tergantung pada kecepatan koneksi internet Anda.

5. Menjelajahi Struktur Proyek Angular

Setelah proyek dibuat, jelajahi struktur folder proyek untuk memahami organisasi kode Angular. Struktur proyek umum meliputi:

• src/: Direktori ini berisi kode sumber aplikasi Anda.
  • app/: Direktori ini berisi modul, komponen, layanan, dan aset aplikasi Anda.
  • assets/: Direktori ini berisi gambar, font, dan aset statis lainnya.
  • environments/: Direktori ini berisi konfigurasi khusus lingkungan (misalnya, pengembangan, produksi).
  • index.html: File HTML utama yang berfungsi sebagai titik masuk ke aplikasi Anda.
  • main.ts: File TypeScript utama yang mem-boot aplikasi Angular.
  • styles.css (atau file stylesheet yang Anda pilih): File CSS global untuk aplikasi Anda.
• e2e/: Direktori ini berisi tes end-to-end untuk aplikasi Anda.
• node_modules/: Direktori ini berisi dependensi proyek yang diinstal oleh npm.
• angular.json: File konfigurasi untuk Angular CLI.
• package.json: File yang berisi metadata proyek dan dependensi.
• tsconfig.json: File konfigurasi untuk compiler TypeScript.

6. Menjalankan Aplikasi Angular Anda

Untuk menjalankan aplikasi Angular Anda, navigasikan ke direktori proyek di command prompt atau terminal dan jalankan perintah berikut:

ng serve

Perintah ng serve membangun aplikasi Anda dan meluncurkan server pengembangan lokal. Secara default, aplikasi akan tersedia di http://localhost:4200/. Anda dapat membuka URL ini di browser web Anda untuk melihat aplikasi Angular Anda berjalan.

ng serve juga menyediakan reload langsung, yang berarti bahwa setiap kali Anda membuat perubahan pada kode Anda, aplikasi akan secara otomatis membangun kembali dan menyegarkan di browser Anda.

7. Membuat Komponen Angular Pertama Anda

Komponen adalah blok bangunan dasar aplikasi Angular. Komponen terdiri dari template HTML, kelas TypeScript, dan metadata yang menentukan bagaimana komponen harus berperilaku dan ditampilkan.

Untuk membuat komponen Angular baru, Anda dapat menggunakan Angular CLI. Navigasikan ke direktori app/ di proyek Anda dan jalankan perintah berikut:

ng generate component nama-komponen

Ganti nama-komponen dengan nama yang Anda inginkan untuk komponen Anda. Misalnya:

ng generate component hello-world

Perintah ini akan membuat folder baru dengan nama komponen yang ditentukan dan menghasilkan empat file:

• hello-world.component.ts: Kelas komponen TypeScript.
• hello-world.component.html: Template HTML komponen.
• hello-world.component.css: Stylesheet CSS komponen.
• hello-world.component.spec.ts: File pengujian unit komponen.

Buka file hello-world.component.ts dan Anda akan melihat kelas komponen yang terlihat seperti ini:

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

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent {
  constructor() { }
}

Dekorator @Component menyediakan metadata tentang komponen, termasuk selector (yang digunakan untuk menggunakan komponen dalam template lain), templateUrl (yang menunjuk ke template HTML), dan styleUrls (yang menunjuk ke stylesheet CSS).

Sekarang, buka file hello-world.component.html dan tambahkan beberapa konten:

<p>
  Hello World dari komponen saya!
</p>

Untuk menampilkan komponen ini di aplikasi Anda, Anda perlu mengimpornya ke dalam modul aplikasi Anda (app.module.ts) dan menambahkannya ke deklarasi. Kemudian, Anda dapat menggunakan selector komponen (app-hello-world) dalam template komponen lain (misalnya, app.component.html).

Buka app.module.ts dan tambahkan baris berikut:

import { HelloWorldComponent } from './hello-world/hello-world.component';

Kemudian, tambahkan HelloWorldComponent ke array declarations di dalam @NgModule decorator:

@NgModule({
  declarations: [
    AppComponent,
    HelloWorldComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Terakhir, buka app.component.html dan tambahkan tag <app-hello-world>:

<div style="text-align:center">
  <h1>
    Selamat datang di {{ title }}!
  </h1>
  <img width="300" alt="Logo Angular" src="data:image/svg+xml;base64,PHN.... (kode base64 disingkat) ...">
</div>

<app-hello-world></app-hello-world>

Sekarang, ketika Anda menjalankan aplikasi Anda, Anda akan melihat teks “Hello World dari komponen saya!” ditampilkan di bawah konten default aplikasi.

8. Memahami Modul Angular

Modul adalah wadah yang mengelompokkan komponen, layanan, dan pipa terkait. Setiap aplikasi Angular memiliki setidaknya satu modul, modul root, yang biasanya bernama AppModule. Modul membantu Anda mengatur aplikasi Anda menjadi unit fungsional dan menyediakan cara untuk mengelola dependensi.

AppModule didefinisikan dalam file app.module.ts. Ini menggunakan dekorator @NgModule untuk menentukan metadata tentang modul, termasuk:

• declarations: Array komponen, pipa, dan direktif yang termasuk dalam modul.
• imports: Array modul lain yang dibutuhkan oleh modul ini.
• providers: Array layanan yang tersedia untuk seluruh modul.
• bootstrap: Array komponen yang harus di-boot ketika modul dimuat.

Anda dapat membuat modul baru menggunakan Angular CLI. Navigasikan ke direktori app/ dan jalankan perintah berikut:

ng generate module nama-modul

Ganti nama-modul dengan nama yang Anda inginkan untuk modul Anda. Misalnya:

ng generate module my-module

Ini akan membuat folder baru dengan nama modul dan file my-module.module.ts di dalamnya. Anda kemudian dapat mendeklarasikan komponen, layanan, dan pipa di dalam modul ini dan mengimpornya ke dalam modul lain sesuai kebutuhan.

9. Routing di Angular

Routing memungkinkan Anda untuk menavigasi di antara berbagai tampilan dan komponen di aplikasi Angular Anda. Untuk menggunakan routing, Anda perlu mengimpor RouterModule ke dalam modul aplikasi Anda dan mengkonfigurasi rute Anda.

Jika Anda memilih untuk menambahkan Angular Routing saat membuat proyek, RouterModule sudah diimpor ke dalam AppModule dan file app-routing.module.ts sudah dibuat. Jika tidak, Anda dapat membuatnya secara manual.

Buka file app-routing.module.ts dan tambahkan rute berikut:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello-world.component';

const routes: Routes = [
  { path: 'hello-world', component: HelloWorldComponent }
];

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

Rute ini mengaitkan path /hello-world dengan komponen HelloWorldComponent. Sekarang, Anda dapat menavigasi ke http://localhost:4200/hello-world di browser Anda untuk melihat komponen HelloWorldComponent.

Untuk menambahkan tautan navigasi di aplikasi Anda, Anda dapat menggunakan direktif routerLink di template Anda. Misalnya:

<a routerLink="/hello-world">Hello World</a>

Ini akan membuat tautan yang menavigasi ke /hello-world ketika diklik.

10. Layanan Angular dan Injeksi Dependensi

Layanan adalah kelas yang menyediakan fungsi tertentu untuk komponen lain dalam aplikasi Anda. Layanan sering digunakan untuk berbagi data, berinteraksi dengan server backend, dan mengimplementasikan logika bisnis yang kompleks.

Injeksi dependensi adalah pola desain yang memungkinkan Anda untuk menyediakan dependensi ke kelas daripada membuatnya sendiri. Ini membuat kode Anda lebih mudah diuji, dipelihara, dan digunakan kembali.

Untuk membuat layanan Angular, Anda dapat menggunakan Angular CLI. Navigasikan ke direktori app/ dan jalankan perintah berikut:

ng generate service nama-layanan

Ganti nama-layanan dengan nama yang Anda inginkan untuk layanan Anda. Misalnya:

ng generate service data

Ini akan membuat file data.service.ts di direktori app/. Buka file ini dan Anda akan melihat kelas layanan yang terlihat seperti ini:

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

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor() { }
}

Dekorator @Injectable menandai kelas sebagai layanan yang dapat diinjeksikan. Properti providedIn: 'root' menunjukkan bahwa layanan harus tersedia untuk seluruh aplikasi.

Untuk menggunakan layanan di komponen, Anda perlu menginjeksikannya ke dalam konstruktor komponen. Misalnya:

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  constructor(private dataService: DataService) { }

  getData() {
    return this.dataService.getData();
  }
}

Dalam contoh ini, layanan DataService diinjeksikan ke dalam konstruktor komponen MyComponent. Kemudian, komponen dapat menggunakan layanan untuk mendapatkan data atau melakukan tindakan lain.

11. Menggunakan Angular Material

Angular Material adalah pustaka komponen UI yang mengikuti pedoman Desain Material Google. Ini menyediakan serangkaian komponen yang telah dibangun sebelumnya yang dapat Anda gunakan untuk membangun antarmuka pengguna yang menarik dan responsif dengan cepat.

Untuk menggunakan Angular Material, Anda perlu menginstalnya menggunakan npm:

npm install @angular/material @angular/cdk @angular/animations

Setelah instalasi selesai, Anda perlu mengimpor modul Angular Material yang Anda butuhkan ke dalam modul aplikasi Anda. Misalnya, untuk menggunakan tombol Material, Anda perlu mengimpor MatButtonModule:

import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [
    MatButtonModule
  ]
})

Kemudian, Anda dapat menggunakan komponen tombol Material di template Anda:

<button mat-raised-button color="primary">Klik Saya!</button>

Angular Material menyediakan berbagai macam komponen, termasuk tombol, formulir, ikon, navigasi, dan tata letak. Anda dapat menemukan dokumentasi lengkap dan contoh di situs web Angular Material.

12. Menerapkan Pengujian Unit

Pengujian unit adalah proses menguji masing-masing unit kode Anda (misalnya, komponen, layanan, pipa) secara terpisah untuk memastikan bahwa mereka bekerja seperti yang diharapkan. Pengujian unit penting untuk memastikan kualitas dan keandalan aplikasi Anda.

Angular menggunakan Jasmine sebagai framework pengujian unit dan Karma sebagai peluncur pengujian. Ketika Anda membuat proyek Angular baru menggunakan Angular CLI, file pengujian unit dasar sudah dibuat untuk Anda.

Untuk menjalankan pengujian unit Anda, navigasikan ke direktori proyek Anda dan jalankan perintah berikut:

ng test

Ini akan membangun aplikasi Anda dan menjalankan pengujian unit di browser. Pelari pengujian akan menampilkan hasil pengujian dan melaporkan kegagalan atau kesalahan apa pun.

Anda dapat menulis pengujian unit untuk komponen, layanan, dan pipa Anda. Contoh file pengujian komponen (hello-world.component.spec.ts) mungkin terlihat seperti ini:

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { HelloWorldComponent } from './hello-world.component';

describe('HelloWorldComponent', () => {
  let component: HelloWorldComponent;
  let fixture: ComponentFixture<HelloWorldComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ HelloWorldComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(HelloWorldComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should render the greeting', () => {
    const compiled = fixture.nativeElement as HTMLElement;
    expect(compiled.querySelector('p')?.textContent).toContain('Hello World');
  });
});

Ini adalah contoh sederhana dari pengujian yang memastikan bahwa komponen dibuat dan bahwa template merender teks yang benar. Anda dapat menulis pengujian yang lebih kompleks untuk memvalidasi perilaku komponen Anda secara lebih rinci.

13. Praktik Terbaik untuk Pengembangan Angular

Berikut adalah beberapa praktik terbaik untuk diikuti saat mengembangkan aplikasi Angular:

• Gunakan Angular CLI: Angular CLI menyederhanakan banyak tugas pengembangan umum dan membantu Anda menjaga konsistensi dalam proyek Anda. Gunakan Angular CLI untuk membuat komponen, layanan, modul, dan proyek baru.
• Ikuti Konvensi Penamaan: Gunakan konvensi penamaan yang konsisten untuk file, kelas, dan variabel Anda. Ini membuat kode Anda lebih mudah dibaca dan dipahami.
• Gunakan TypeScript: TypeScript adalah superset dari JavaScript yang menambahkan pengetikan statis ke bahasa tersebut. Menggunakan TypeScript membantu Anda menangkap kesalahan di awal pengembangan dan membuat kode Anda lebih mudah dipelihara.
• Gunakan Injeksi Dependensi: Injeksi dependensi adalah pola desain yang memungkinkan Anda untuk menyediakan dependensi ke kelas daripada membuatnya sendiri. Ini membuat kode Anda lebih mudah diuji, dipelihara, dan digunakan kembali.
• Tulis Pengujian Unit: Pengujian unit penting untuk memastikan kualitas dan keandalan aplikasi Anda. Tulis pengujian unit untuk komponen, layanan, dan pipa Anda.
• Gunakan Gaya Modular: Organisasikan kode Anda menjadi modul yang kohesif dan lepas. Ini membuat kode Anda lebih mudah dipahami dan dipelihara.
• Optimalkan Kinerja: Optimalkan kinerja aplikasi Anda dengan mengurangi ukuran bundel, menggunakan pemuatan malas, dan menghindari kebocoran memori.
• Dokumentasikan Kode Anda: Dokumentasikan kode Anda secara menyeluruh menggunakan komentar dan penjelasan yang jelas. Ini membuat kode Anda lebih mudah dipahami dan dipelihara.
• Tetap Perbarui: Angular berkembang pesat. Tetap perbarui dengan rilis terbaru dan praktik terbaik.

14. Sumber Daya Tambahan untuk Belajar Angular

Berikut adalah beberapa sumber daya tambahan untuk belajar Angular:

• Dokumentasi Angular Resmi: https://angular.io/docs
• Tutorial Angular di W3Schools: https://www.w3schools.com/angular/
• Angular University: https://angular-university.io/
• TutorialsPoint Angular 8: https://www.tutorialspoint.com/angular8/index.htm (Perhatikan mungkin perlu disesuaikan untuk versi terbaru Angular)
• Stack Overflow: https://stackoverflow.com/ (Sumber yang bagus untuk menjawab pertanyaan dan memecahkan masalah)
• Komunitas Angular di GitHub: Cari repositori dan proyek Angular open-source.

15. Kesimpulan

Dalam panduan ini, Anda telah belajar cara menginstal Angular CLI, membuat proyek Angular baru, dan membangun komponen Angular pertama Anda. Anda juga telah belajar tentang modul Angular, routing, layanan, dan pengujian unit. Sekarang Anda memiliki dasar yang kuat untuk memulai pengembangan aplikasi Angular yang lebih kompleks.

Teruslah berlatih, bereksperimen, dan menjelajahi dokumentasi resmi untuk mengembangkan keterampilan Anda dan menjadi pengembang Angular yang kompeten. Selamat coding!