Kursus Pengembangan Angular

Pelajaran 1 • Membuat Proyek Angular Pertama Anda

Gunakan Angular CLI untuk membuat proyek, jelajahi struktur filenya, dan jalankan server pengembangan. Bangun keakraban dengan tata letak ruang kerja yang digunakan di seluruh kursus.

Pelajaran 2 • Menyiapkan Lingkungan Pengembangan

Instal Node.js, npm, dan Angular CLI untuk menyiapkan ruang kerja lokal. Secara langsung memungkinkan pembuatan proyek yang dibahas di bagian selanjutnya.

Pelajaran 3 • TypeScript Penting untuk Angular

Perkenalkan tipe TypeScript, antarmuka, dekorator, dan modul sebagaimana digunakan di Angular. Pastikan peserta dapat membaca dan menulis kode Angular dengan percaya diri mulai bab kedua.

Pelajaran 1 • Anatomi Komponen Angular

Uraikan dekorator komponen, kelas, templat, dan gaya ke dalam perannya masing-masing. Tetapkan model mental untuk setiap elemen UI yang dibangun dalam kursus ini.

Pelajaran 2 • Atribut Directive dan Pipe

Terapkan atribut directive bawaan seperti ngClass dan ngStyle, dan ubah data dengan pipe bawaan. Lengkapi kemampuan templat sebelum beralih ke layanan.

Pelajaran 3 • Structural Directive Bawaan

Bahas ngIf, ngFor, dan ngSwitch untuk rendering bersyarat dan daftar dalam templat. Aktifkan tampilan konten dinamis yang penting untuk UI dunia nyata.

Pelajaran 4 • Sintaks Templat dan Pengikatan Data

Ajarkan interpolasi, pengikatan properti, pengikatan peristiwa, dan pengikatan dua arah dengan ngModel. Hubungkan logika komponen ke DOM untuk UI interaktif.

Pelajaran 1 • Pembahasan Mendalam Injeksi Dependensi

Jelajahi hierarki penyuntik Angular, token penyedia, dan cakupan injeksi. Aktifkan kontrol yang tepat atas pembuatan instance layanan dan berbagi antar modul.

Pelajaran 2 • Membuat dan Menggunakan Layanan

Hasilkan layanan dengan CLI, enkapsulasi logika bisnis, dan injeksikan ke dalam komponen. Tunjukkan prinsip tanggung jawab tunggal dalam arsitektur Angular.

Pelajaran 3 • Memahami NgModule

Jelaskan deklarasi, impor, ekspor, dan penyedia dalam metadata NgModule. Tetapkan sistem modul yang mengatur setiap aplikasi Angular.

Pelajaran 1 • Penjaga Rute dan Pemecah

Lindungi rute dengan penjaga CanActivate dan CanDeactivate serta ambil data terlebih dahulu dengan Resolve. Pastikan navigasi aman dan data dimuat sebelum rendering komponen.

Pelajaran 2 • Rute Anak dan Outlet Bernama

Sarangkan rute anak di dalam modul fitur dan gunakan outlet bernama untuk tampilan bantu. Dukung tata letak kompleks seperti dasbor dengan panel samping.

Pelajaran 3 • Lazy Loading Modul Fitur

Pisahkan aplikasi menjadi modul fitur yang dimuat lambat untuk mengurangi ukuran bundel awal. Secara langsung meningkatkan metrik kinerja yang dibahas di bab lanjutan.

Pelajaran 4 • Parameter Rute dan String Kueri

Baca segmen rute dinamis dan parameter kueri opsional menggunakan ActivatedRoute. Aktifkan tampilan detail dan daftar yang difilter yang didorong oleh status URL.

Pelajaran 1 • Pipe Async dan Integrasi Templat

Langgani observabel langsung di templat menggunakan async pipe, hilangkan manajemen langganan manual. Kurangi kode berulang dan cegah kebocoran memori di komponen.

Pelajaran 2 • Subjek dan Multicasting

Gunakan Subject, BehaviorSubject, dan ReplaySubject untuk mengirimkan nilai ke beberapa pelanggan. Aktifkan pola status bersama yang digunakan dalam manajemen status berbasis layanan.

Pelajaran 3 • Operator RxJS Inti

Terapkan map, filter, switchMap, mergeMap, dan catchError untuk mengubah dan menggabungkan aliran. Bekali peserta untuk menangani persyaratan transformasi data dunia nyata.

Pelajaran 1 • Mocking HTTP dalam Pengembangan

Gunakan HttpClientTestingModule dan API web dalam memori untuk mensimulasikan respons backend selama pengembangan. Pisahkan kemajuan frontend dari ketersediaan backend.

Pelajaran 2 • Strategi Penanganan Kesalahan dan Pengulangan

Tangani kesalahan HTTP dengan operator catchError, retry, dan retryWhen untuk panggilan API yang tangguh. Pastikan degradasi yang baik dan umpan balik kesalahan yang ramah pengguna.

Pelajaran 3 • Interceptor HTTP

Buat interceptor untuk melampirkan token auth, mencatat permintaan, dan mengubah respons secara global. Pusatkan masalah HTTP lintas sektor tanpa mengubah panggilan layanan individual.

Pelajaran 4 • Pengaturan HttpClient dan Permintaan GET

Impor HttpClientModule, injeksikan HttpClient, dan lakukan permintaan GET bertipe. Tetapkan garis dasar untuk semua komunikasi backend di aplikasi.

Pelajaran 1 • Formulir Dinamis dengan FormArray

Kelola daftar kontrol dengan panjang variabel menggunakan FormArray untuk skenario formulir dinamis. Dukung kasus penggunaan seperti menambahkan beberapa alamat atau item baris.

Pelajaran 2 • Dasar-Dasar Formulir Reaktif

Bangun formulir secara terprogram menggunakan FormControl, FormGroup, dan FormBuilder. Aktifkan logika formulir yang skalabel dan dapat diuji yang sepenuhnya digerakkan dari kelas komponen.

Pelajaran 3 • UX Formulir dan Aksesibilitas

Terapkan status touched, dirty, dan pristine untuk mengontrol visibilitas kesalahan dan meningkatkan UX formulir. Pastikan formulir memenuhi standar aksesibilitas dengan atribut ARIA yang tepat.

Pelajaran 4 • Validator Kustom dan Validasi Asinkron

Tulis validator kustom sinkron dan asinkron untuk pemeriksaan lintas bidang dan sisi server. Perpanjang sistem validasi Angular untuk memenuhi aturan bisnis yang kompleks.

Pelajaran 1 • Dasar-Dasar Manajemen Status

Implementasikan status berbasis layanan dengan BehaviorSubject dan perkenalkan konsep penyimpanan NgRx untuk status yang skalabel. Persiapkan peserta untuk memilih strategi status yang tepat untuk kompleksitas aplikasi.

Pelajaran 2 • Directive dan Pipe Kustom

Bangun atribut directive yang dapat digunakan kembali dengan HostListener dan HostBinding, dan buat pipe kustom murni dan tidak murni. Perluas kemampuan templat Angular untuk kebutuhan domain spesifik.

Pelajaran 3 • Proyeksi Konten dan Komponen Dinamis

Gunakan ng-content untuk proyeksi slot tunggal dan ganda serta buat komponen secara dinamis saat runtime. Aktifkan komponen pustaka UI yang sangat fleksibel dan dapat digunakan kembali.

Pelajaran 4 • Strategi Deteksi Perubahan

Bandingkan deteksi perubahan Default dan OnPush serta terapkan OnPush dengan data dan observabel yang tidak dapat diubah. Secara signifikan mengurangi render ulang yang tidak perlu di pohon komponen besar.