Angular-front-end-1 basic learn for angular.pptx

angular basic

1. Pengenalan Angular Mega Jaya., S.T., M.TI

2. Sejarah Angular JS ke Angular Modern Angular adalah framework open-source yang dikembangkan oleh Google untuk membangun aplikasi web dinamis. Angular mengalami perubahan besar sejak pertama kali diperkenalkan, terutama saat transisi dari AngularJS ke Angular 2+ yang berbasis TypeScript. Miško Hevery

3. Version of Angular Angular JS 2010 - 2016 Angular 2 (2016 - 2017) Angular 4 (Mar 2017) Angular 5 (Nov 2017) Angular 6 (Mei 2018) Angular 7 (Oct 2018) Angular 8 (Mei 2019) Angular 9 (Feb 2020) Angular 10 (Jun 2020) Angular 11 (Nov 2020) Angular 12 (Mei 2021) Angular 13 (Nov 2021) Angular 14 (Jun 2021) Angular 15 (Nov 2022) Angular 16 (Mei 2023) Angular 17 (Nov 2023) Angular 18 (Jun 2024) Angular 19 (Nov 2024) https://angular.dev/update-guide

4. Angular JS

5. Angular 2+ (Typescript)

6. Instalasi 1. NodeJS: https://nodejs.org 2. Angular: Install via NPM 3. Typescript: Install via NPM 4. Visual Studio Code : https://code.visualstudio.com/ npm install -g @angular/cli npm install -g @angular/cli@<version> ng –version

7. Struktur Angular Arsitektur Angular Arsitektur Angular didasarkan pada struktur modular dan hirarki dengan blok penyusun utama seperti: Modules Components Templates Services Modules Aplikasi angular disusun kedalam module, yang mana itu merupakan kumpulan components, directive dan service yang terkait. Module utama disebut module root yang bertanggung jawab untuk mem-bootstraping aplikasi angular. Setiap aplikasi Angular memiliki setidaknya satu modul, AppModule, yang didefinisikan dalam file app.module.ts.

8. Struktur Angular

9. Struktur Angular Components Components adalah blok penyusun antarmuka pengguna atau user interface aplikasi angular yang terdiri dari kelas TypeScript, template HTML, dan stylesheet CSS. Komponen bertanggung jawab untuk mengelola data dan logika yang terkait dengan bagian tertentu dari aplikasi.

10. Struktur Angular Templates Template angular ditulis dengan HTML, ini dapat mencakup tentang data binding, directive dan elemen lainnya yang membantu kita dalam pembuatan aplikasi web yang dinamis dan interaktif. Pada contoh HelloComponent di page sebelumnya, template didefinisikan sebagai string dalam dekorator @Component: kita menggunakan kurung kurawal ganda {{ }} untuk mengikat properti ‘nama’ dari kelas TypeScript komponen ke template. Ini disebut interpolasi, dan memungkinkan template menampilkan data dinamis dari komponen.

11. Struktur Angular Services Service di Angular adalah objek tunggal yang dapat digunakan untuk berbagi data dan fungsionalitas di beberapa komponen. Mereka biasanya digunakan untuk tugas-tugas seperti mengambil data dari API, otentikasi pengguna, dan fitur aplikasi umum lainnya. Jadi komponen hanya berfungsi untuk user interface (tampilan) dan pengikatan data (data binding) sementara data diambil dari service, sederhananya untuk urusan yang berhubungan dengan server (Rest API) sepenuhnya tanggung jawab dari service dan untuk menampilkan data ke browser tugas dari komponen.

12. Struktur Angular Dalam contoh kode ini, kita mendefinisikan DataService menggunakan dekorator @Injectable. Layanan ini menggunakan Angular HttpClient untuk mengambil data dari ‘apiUrl’. Fungsi atau method getData() mengembalikan Observable, yang memungkinkan komponen berlangganan aliran data dan memperbarui statusnya ketika data baru diterima. Untuk menggunakan DataService dalam sebuah komponen, pertama-tama kita perlu memasukkannya ke dalam konstruktor komponen: Dalam contoh ini, kita mengimpor DataService dan memasukkannya ke dalam konstruktor DataComponent. Dalam lifecycle hook ngOnInit(), kita berlangganan method getData() dan memperbarui properti ‘data’ komponen ketika data baru diterima.

13. Struktur Folder

14. Root Project

15. Component Komponen adalah unit dasar dalam aplikasi Angular. Setiap halaman atau bagian dari UI aplikasi direpresentasikan oleh komponen. Komponen terdiri dari tiga bagian utama: TypeScript (.ts) → Berisi logika komponen. HTML (.html) → Template tampilan komponen. CSS (.css atau .scss) → Styling tampilan komponen. ng generate component home

16. Module Apa itu Module? Module adalah wadah yang mengelompokkan komponen, service, dan directive menjadi satu kesatuan. Setiap aplikasi Angular harus memiliki minimal satu module utama (AppModule). Module utama mendaftarkan semua komponen yang akan digunakan dalam aplikasi. Semua komponen yang kita buat harus dideklarasikan dalam declarations agar bisa digunakan di dalam aplikasi. Module lain bisa ditambahkan ke imports, seperti FormsModule untuk form handling atau HttpClientModule untuk komunikasi API.

17. app.module

18. Template Apa itu Template? Template adalah tampilan UI dalam sebuah komponen. Template bisa berupa file HTML terpisah (.html) atau inline di dalam TypeScript.