Daftar Isi

1. Pengantar Angular 5
2. Persiapan Lingkungan Pengembangan
3. Struktur Proyek Angular 5
4. Dasar-Dasar Angular 5
5. Membuat dan Menggunakan Komponen
6. Routing dan Navigasi
7. Service dan Dependency Injection
8. Integrasi Firebase dengan Angular 5
9. Membangun Aplikasi Lanjutan dengan Firebase
10. Sumber Belajar dan Source Code

1. Pengantar Angular 5

Angular 5 adalah salah satu framework JavaScript yang dikembangkan oleh Google untuk membangun aplikasi web yang dinamis dan modern. Angular menggunakan arsitektur berbasis komponen dan mendukung pengembangan aplikasi single-page (SPA) dengan performa tinggi.

Dalam ebook ini, Anda akan mempelajari Angular 5 mulai dari dasar, cara membuat komponen, routing, service, hingga mengintegrasikan Firebase untuk membangun aplikasi yang lengkap dan real-time.

2. Persiapan Lingkungan Pengembangan

Sebelum mulai coding, pastikan Anda sudah menyiapkan lingkungan pengembangan berikut:

• Node.js dan npm (Node Package Manager) terbaru
• Angular CLI (Command Line Interface) untuk membuat dan mengelola proyek Angular
• Editor kode seperti Visual Studio Code

Langkah instalasi Angular CLI:

npm install -g @angular/cli
      

Membuat proyek Angular baru:

ng new nama-proyek-angular
cd nama-proyek-angular
ng serve
      

Setelah menjalankan ng serve , buka http://localhost:4200 di browser untuk melihat aplikasi Angular Anda berjalan.

3. Struktur Proyek Angular 5

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

• src/app/ - Tempat file komponen, service, dan modul Angular
• src/assets/ - File aset seperti gambar dan stylesheet
• angular.json - Konfigurasi proyek Angular
• package.json - Daftar dependensi dan script npm

Struktur ini memudahkan pengelolaan kode dan pengembangan aplikasi secara modular.

4. Dasar-Dasar Angular 5

Angular 5 menggunakan TypeScript sebagai bahasa utama. Berikut beberapa konsep dasar yang perlu dipahami:

• Komponen (Component): Blok bangunan UI yang terdiri dari template, class, dan metadata.
• Template: HTML yang mengatur tampilan komponen.
• Data Binding: Menghubungkan data dari class ke template dan sebaliknya.
• Directive: Atribut khusus untuk mengubah tampilan atau perilaku elemen HTML.
• Module: Kumpulan komponen dan service yang membentuk aplikasi.

Contoh komponen sederhana:

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

@Component({
  selector: 'app-hello',
  template: '<h2>Halo, Angular 5!</h2>',
})
export class HelloComponent {}
      

5. Membuat dan Menggunakan Komponen

Komponen adalah inti dari aplikasi Angular. Berikut langkah membuat dan menggunakan komponen:

1. Membuat komponen baru dengan Angular CLI:

   ng generate component nama-komponen
             

2. Menggunakan selector komponen di template lain:

   <app-nama-komponen></app-nama-komponen>
             

3. Menambahkan logika dan data di class komponen:

   export class NamaKomponen {
     title = 'Judul Komponen';
   }
             

4. Menampilkan data di template dengan interpolation:

   <h1>{{ title }}</h1>
             

6. Routing dan Navigasi

Routing memungkinkan aplikasi Angular untuk berpindah antar halaman tanpa reload. Berikut cara mengatur routing:

1. Import RouterModule dan definisikan routes:

   import { RouterModule, Routes } from '@angular/router';
   
   const routes: Routes = [
     { path: '', component: HomeComponent },
     { path: 'about', component: AboutComponent },
   ];
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
   })
   export class AppRoutingModule {}
             

2. Tambahkan <router-outlet> di template utama:

   <router-outlet></router-outlet>
             

3. Gunakan routerLink untuk navigasi:

   <a routerLink="/about">Tentang</a>
             

7. Service dan Dependency Injection

Service adalah kelas yang menyediakan data atau fungsi yang dapat digunakan oleh beberapa komponen. Angular menggunakan dependency injection untuk mengelola service.

1. Membuat service dengan Angular CLI:

   ng generate service data
             

2. Contoh service sederhana:

   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root',
   })
   export class DataService {
     getData() {
       return ['Angular', 'Firebase', 'TypeScript'];
     }
   }
             

3. Menggunakan service di komponen:

   import { Component, OnInit } from '@angular/core';
   import { DataService } from './data.service';
   
   @Component({
     selector: 'app-list',
     template: '<ul><li *ngFor="let item of data">{{ item }}</li></ul>',
   })
   export class ListComponent implements OnInit {
     data: string[] = [];
   
     constructor(private dataService: DataService) {}
   
     ngOnInit() {
       this.data = this.dataService.getData();
     }
   }
             

8. Integrasi Firebase dengan Angular 5

Firebase adalah platform backend yang menyediakan database real-time, autentikasi, dan hosting. Berikut cara mengintegrasikan Firebase ke Angular 5:

1. Daftar dan buat project di Firebase Console .
2. Install Firebase dan AngularFire:

   npm install firebase @angular/fire --save
             

3. Tambahkan konfigurasi Firebase di environment:

   // environment.ts
   export const environment = {
     production: false,
     firebaseConfig: {
       apiKey: "API_KEY",
       authDomain: "PROJECT_ID.firebaseapp.com",
       databaseURL: "https://PROJECT_ID.firebaseio.com",
       projectId: "PROJECT_ID",
       storageBucket: "PROJECT_ID.appspot.com",
       messagingSenderId: "SENDER_ID",
       appId: "APP_ID"
     }
   };
             

4. Import AngularFireModule di app.module.ts:

   import { AngularFireModule } from '@angular/fire';
   import { environment } from '../environments/environment';
   
   @NgModule({
     imports: [
       AngularFireModule.initializeApp(environment.firebaseConfig),
       // module lain
     ],
   })
   export class AppModule {}
             

9. Membangun Aplikasi Lanjutan dengan Firebase

Berikut contoh membuat aplikasi daftar tugas (todo list) dengan Angular 5 dan Firebase Realtime Database:

1. Buat service untuk mengakses Firebase:

   import { Injectable } from '@angular/core';
   import { AngularFireDatabase } from '@angular/fire/database';
   import { Observable } from 'rxjs';
   
   @Injectable({
     providedIn: 'root',
   })
   export class TodoService {
     constructor(private db: AngularFireDatabase) {}
   
     getTodos(): Observable<any[]> {
       return this.db.list('todos').valueChanges();
     }
   
     addTodo(todo: string) {
       this.db.list('todos').push({ task: todo });
     }
   }
             

2. Buat komponen todo list:

   import { Component, OnInit } from '@angular/core';
   import { TodoService } from './todo.service';
   
   @Component({
     selector: 'app-todo',
     template: `
       <h2>Daftar Tugas</h2>
       <input [(ngModel)]="newTask" placeholder="Tugas baru" />
       <button (click)="addTask()" class="ml-2 px-3 py-1 bg-indigo-600 text-white rounded">Tambah</button>
       <ul>
         <li *ngFor="let todo of todos">{{ todo.task }}</li>
       </ul>
     `,
   })
   export class TodoComponent implements OnInit {
     todos: any[] = [];
     newTask = '';
   
     constructor(private todoService: TodoService) {}
   
     ngOnInit() {
       this.todoService.getTodos().subscribe(data => (this.todos = data));
     }
   
     addTask() {
       if (this.newTask.trim()) {
         this.todoService.addTodo(this.newTask.trim());
         this.newTask = '';
       }
     }
   }
             

3. Jangan lupa import FormsModule di app.module.ts untuk ngModel:

   import { FormsModule } from '@angular/forms';
   
   @NgModule({
     imports: [
       FormsModule,
       // module lain
     ],
   })
   export class AppModule {}
             

10. Sumber Belajar dan Source Code

Berikut beberapa sumber belajar dan channel yang direkomendasikan untuk mendalami Angular 5 dan Firebase:

• Dokumentasi Resmi Angular
• Dokumentasi Resmi Firebase
• Channel YouTube Academind (Tutorial Angular & Firebase)
• Channel YouTube Traversy Media (Tutorial Web Development)
• Source Code Angular di GitHub
• Source Code AngularFire di GitHub

Contoh repositori source code aplikasi Angular 5 dengan Firebase:

• https://github.com/username/angular5-firebase-todo