Pelajari Angular 4 dalam 10 Jam: Kursus Tercepat untuk Developer!

Pelajari Angular 4 dalam 10 jam dan tingkatkan keterampilan coding Anda! Kursus cepat ini dirancang untuk developer ambisius. Daftar sekarang dan mulai kembangkan aplikasi web yang menakjubkan!

By WGS INDONESIA
4.9/4.9
Indonesia
Rp 43,750.00 GRATIS
E-COURSE banner with text and icons representing Artificial Intelligence and video learning

Detail Pembelajaran

Pelajari Angular 4 dalam 10 Jam: Kursus Tercepat untuk Developer!
  • Angular, Pemrograman Web, Pengembangan Aplikasi, Kursus Online, Belajar Cepat

Baca Online

Pelajari Angular 4 dalam 10 Jam: Kursus Tercepat untuk Developer!

1. Pengantar Angular 4

Angular 4 adalah framework front-end yang dikembangkan oleh Google untuk membangun aplikasi web yang dinamis dan responsif. Versi 4 merupakan penyempurnaan dari Angular 2 dengan peningkatan performa dan ukuran bundle yang lebih kecil.

Logo Angular 4 modern flat design dengan latar belakang merah dan ikon huruf A putih

Dalam ebook ini, Anda akan belajar dasar-dasar Angular 4 secara cepat dan praktis, sehingga dapat langsung membuat aplikasi web yang menarik.

2. Persiapan dan Setup Lingkungan

Untuk mulai menggunakan Angular 4, Anda perlu menyiapkan beberapa alat seperti Node.js, npm, dan Angular CLI. Berikut langkah-langkahnya:

  1. Install Node.js dari situs resmi nodejs.org .
  2. Pastikan npm sudah terinstall bersama Node.js.
  3. Install Angular CLI versi 1.4 (sesuai Angular 4) dengan perintah: npm install -g @angular/cli@1.4 .
  4. Buat proyek baru dengan ng new nama-proyek dan masuk ke folder proyek.
  5. Jalankan server development dengan ng serve dan buka http://localhost:4200 di browser.
Tampilan terminal dengan perintah instalasi Node.js, npm, dan Angular CLI versi 1.4

3. Struktur Proyek Angular

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

  • src/app : Tempat file komponen dan service.
  • src/assets : File statis seperti gambar dan stylesheet.
  • angular.json : Konfigurasi proyek Angular.
  • package.json : Daftar dependensi dan script npm.
Diagram struktur folder proyek Angular 4 dengan folder src, app, assets, dan file konfigurasi

Memahami struktur ini penting agar Anda dapat mengelola kode dengan baik.

4. Membuat dan Menggunakan Komponen

Komponen adalah blok bangunan utama dalam Angular. Untuk membuat komponen baru, gunakan Angular CLI: 

ng generate component nama-komponen

Contoh komponen sederhana: 

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

@Component({
  selector: 'app-salam',
  template: '<h2>Halo, Selamat Belajar Angular 4!</h2>',
  styles: ['h2 { color: #4F46E5; }']
})
export class SalamComponent {}
Tampilan kode editor dengan kode TypeScript komponen Angular 4 bernama SalamComponent

Komponen ini dapat digunakan di template lain dengan tag <app-salam> .

5. Template dan Data Binding

Template adalah HTML yang mengikat data dari komponen. Angular menyediakan beberapa jenis data binding:

  • Interpolation: Menampilkan data dengan {{ data }} .
  • Property Binding: Mengikat properti HTML dengan [property]="data" .
  • Event Binding: Menangani event dengan (event)="handler()" .
  • Two-way Binding: Mengikat data dua arah dengan [(ngModel)]="data" . 
<input [(ngModel)]="nama" placeholder="Masukkan nama">
<p>Halo, {{ nama }}!</p>
Form input teks dengan binding dua arah dan paragraf menampilkan teks dinamis di aplikasi Angular 4

6. Directive dan Pipes

Directive mengubah tampilan atau perilaku elemen HTML. Contoh directive bawaan:

  • *ngIf : Menampilkan elemen secara kondisional.
  • *ngFor : Melakukan perulangan pada list.
  • [ngClass] : Mengatur kelas CSS secara dinamis.

Pipes digunakan untuk memformat data di template, misalnya: 

<p>Tanggal hari ini: {{ today | date:'fullDate' }}</p>
<p>Harga: {{ price | currency:'IDR' }}</p>
Contoh kode Angular 4 menggunakan directive ngIf, ngFor dan pipes date serta currency

7. Service dan Dependency Injection

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

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

@Injectable()
export class DataService {
  getData() {
    return ['Angular', 'React', 'Vue'];
  }
}

Menggunakan service di komponen: 

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

@Component({
  selector: 'app-list',
  template: '<ul><li *ngFor="let item of items">{{ item }}</li></ul>'
})
export class ListComponent {
  items: string[];
  constructor(private dataService: DataService) {
    this.items = this.dataService.getData();
  }
}
Kode TypeScript service dan komponen Angular 4 yang menggunakan dependency injection untuk mengambil data

8. Routing dan Navigasi

Routing memungkinkan aplikasi Angular memiliki beberapa halaman dengan navigasi tanpa reload. Contoh konfigurasi routing: 

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 {}

Gunakan <router-outlet> di template utama untuk menampilkan halaman sesuai rute.

Kode routing Angular 4 dengan dua rute dan tampilan router-outlet di template

9. Formulir dan Validasi

Angular 4 menyediakan dua cara membuat form: Template-driven dan Reactive Forms. Contoh form sederhana dengan validasi: 

<form #formData="ngForm" (ngSubmit)="submitForm(formData)">
  <input name="email" ngModel required email placeholder="Email">
  <div *ngIf="formData.submitted && formData.controls.email?.invalid" class="text-red-600">
    Email tidak valid!
  </div>
  <button type="submit">Kirim</button>
</form>
Form input email dengan validasi dan pesan error berwarna merah di aplikasi Angular 4

10. Build dan Deployment

Setelah aplikasi selesai, lakukan build produksi dengan perintah: 

ng build --prod

Folder dist/ akan berisi file hasil build yang siap di-deploy ke server atau layanan hosting seperti Firebase, Netlify, atau server Anda sendiri.

Proses build aplikasi Angular 4 dan upload file hasil build ke server hosting

Selamat! Anda sudah siap membuat aplikasi Angular 4 dengan cepat dan efisien.

Edukasi Terkait