Kursus Pelatihan Angular 17

Pengenalan Angular 17

• Apa itu Angular?
• Angular vs React vs Vue
• Ikhtisar fitur dan arsitektur Angular 17
• Menyiapkan Lingkungan Pengembangan

Mulai Membangun

• Membuat proyek Angular 17 baru menggunakan Angular CLI
• Mengenal struktur proyek dan file
• Menjalankan dan menyajikan aplikasi
• Menampilkan data menggunakan interpolasi dan ekspresi

Komponen

• Memahami peran komponen dalam Angular 17
• Membuat dan menggunakan komponen
• Menyalurkan data antar komponen menggunakan input dan output
• MemGunakan hook siklus hidup komponen

Direktif

• Memahami perbedaan antara direktif struktural dan direktif atribut
• Membuat dan menggunakan direktif bawaan seperti ngIf, ngFor, ngSwitch, dll.
• Membuat dan menggunakan direktif khusus

Pipa (Pipes)

• Memahami tujuan penggunaan pipa dalam Angular 17
• Membuat dan menggunakan pipa bawaan seperti date, currency, json, dll.
• Membuat dan menggunakan pipa khusus

Layanan (Services)

• Memahami peran layanan dalam Angular 17
• Membuat dan menggunakan layanan
• Menyuntikkan dependensi menggunakan penyedia (providers)

Modul

• Memahami peran modul dalam Angular 17
• Membuat dan menggunakan modul
• Mengimpor dan mengekspor modul

Pengikatan Data (Data Binding)

• Memahami perbedaan antara pengikatan data satu arah dan dua arah
• Membuat dan menggunakan pengikatan properti, pengikatan peristiwa, dan sintaks banana-in-a-box
• MemGunakan variabel referensi template

Perutean (Routing)

• Memahami peran perutean dalam Angular 17
• Membuat dan mengonfigurasi rute
• Menavigasi antar rute menggunakan routerLink dan router.navigate()
• MemGunakan parameter rute, parameter kueri, dan fragmen

Formulir (Forms)

• Memahami perbedaan antara formulir yang didorong template (template-driven) dan formulir reaktif (reactive forms)
• Membuat dan memvalidasi formulir menggunakan kontrol formulir, grup formulir, array formulir, dll.
• MemGunakan validator bawaan seperti required, minLength, maxLength, dll.
• Membuat dan menggunakan validator khusus

Klien HTTP (HTTP Client)

• Memahami peran klien HTTP dalam Angular 17
• Membuat dan menggunakan permintaan HTTP untuk berkomunikasi dengan layanan backend
• MemGunakan observables untuk menangani aliran data asinkron
• MemGunakan interceptor untuk mengubah atau menangani permintaan atau respons HTTP

Alur Kendali Deklaratif Baru

• Menjelaskan sintaks blok kendali template baru dan bagaimana hal itu menyederhanakan tugas umum seperti render kondisional, perulangan, dan penanganan koleksi kosong
• Memberikan contoh penggunaan blok baru, seperti @if, @else, @switch, @case, @default, @for, dan @empty
• Membandingkan sintaks baru dengan yang sebelumnya, seperti *ngIf, *ngSwitch, dan *ngFor
• Menyebutkan bagaimana blok kendali baru mendukung aplikasi tanpa zona (zoneless) dengan sinyal (signals)

Blok Muat Lambat (Deferred Loading Blocks)

• Menjelaskan konsep muat lambat (deferred loading) dan bagaimana hal itu dapat meningkatkan kinerja dan pengalaman pengguna aplikasi web
• Memperkenalkan blok kendali baru @defer yang memungkinkan muat lambat konten blok dan dependensinya
• Memberikan contoh penggunaan blok @defer untuk berbagai skenario, seperti memuat komponen, direktif, pipa, animasi, dan gaya
• Menyebutkan bagaimana blok @defer bekerja dengan API transisi tampilan baru

API Transisi Tampilan (View Transitions API)

• Menjelaskan tujuan dan manfaat API transisi tampilan, yang memungkinkan pengembang menyesuaikan animasi dan transisi antara tampilan
• Memperkenalkan direktif baru withViewTransitions yang memungkinkan penggunaan API transisi tampilan
• Memberikan contoh penggunaan direktif withViewTransitions dengan berbagai jenis transisi, seperti fade, slide, zoom, dan flip
• Menyebutkan bagaimana API transisi tampilan bekerja dengan perutean Angular dan riwayat browser

Fitur dan Peningkatan Lainnya

• Meringkas beberapa fitur dan peningkatan lain yang ditawarkan Angular 17, seperti:
• Dukungan untuk meneruskan @Component.styles sebagai string
• Kode animasi Angular dapat dimuat secara lambat (lazy-loadable)
• Dukungan TypeScript 5.2
• API sinyal inti kini stabil
• Dukungan untuk Node.js v16 telah dihapus dan versi dukungan minimum adalah v18.13.0
• Esbuild akan menjadi builder default dan server dev default akan menggunakan Vite