Angular 17 Κομμάτι εκπαίδευσης

Εισαγωγή στο Angular 17

• Τι είναι το Angular;
• Angular vs React vs Vue
• Επισκόπηση των λειτουργιών και της αρχιτεκτονικής του Angular 17
• Διαμόρφωση του Περιβάλλοντος Ανάπτυξης

Αρχικές Εκκινήσεις

• Δημιουργία ενός νέου έργου Angular 17 χρησιμοποιώντας το Angular CLI
• Εξερεύνηση της δομής του έργου και των αρχείων
• Εκτέλεση και εξυπηρέτηση της εφαρμογής
• Παρουσίαση δεδομένων χρησιμοποιώντας διασταυρούμενα αναφορές και εκφράσεις

Συστατικά (Components)

• Κατανόηση του ρόλου των συστατικών στο Angular 17
• Δημιουργία και χρήση συστατικών
• Μετάδοση δεδομένων μεταξύ συστατικών χρησιμοποιώντας inputs και outputs
• Χρήση hook lifecycle συστατικών

Οδηγοί (Directives)

• Κατανόηση της διαφοράς μεταξύ δομικών και attributive οδηγών
• Δημιουργία και χρήση ενσωματωμένων οδηγών όπως ngIf, ngFor, ngSwitch, κ.λπ.
• Δημιουργία και χρήση προσαρμοσμένων οδηγών

Σωλήνες (Pipes)

• Κατανόηση του σκοπού των σωλήνων στο Angular 17
• Δημιουργία και χρήση ενσωματωμένων σωλήνων όπως date, currency, json, κ.λπ.
• Δημιουργία και χρήση προσαρμοσμένων σωλήνων

Υπηρεσίες (Services)

• Κατανόηση του ρόλου των υπηρεσιών στο Angular 17
• Δημιουργία και χρήση υπηρεσιών
• Ενέγερση εξαρτήσεων χρησιμοποιώντας providers

Μονάδες (Modules)

• Κατανόηση του ρόλου των μονάδων στο Angular 17
• Δημιουργία και χρήση μονάδων
• Εισαγωγή και εξαγωγή μονάδων

Δέσμευση Δεδομένων (Data Binding)

• Κατανόηση της διαφοράς μεταξύ μονοκατεύθυνσης και δύο κατευθύνσεων δέσμευσης δεδομένων
• Δημιουργία και χρήση property binding, event binding και συντακτικής μορφής banana-in-a-box
• Χρήση μεταβλητών αναφοράς templates

Δρομολόγηση (Routing)

• Κατανόηση του ρόλου της δρομολόγησης στο Angular 17
• Δημιουργία και ρύθμιση διαδρομών
• Πλοήγηση μεταξύ διαδρομών χρησιμοποιώντας routerLink και router.navigate()
• Χρήση παραμέτρων διαδρομής, παραμέτρων ερωτήματος και αποσπασμάτων

Φόρμες (Forms)

• Κατανόηση της διαφοράς μεταξύ template-driven και reactive forms
• Δημιουργία και έλεγχος φόρμ χρησιμοποιώντας form controls, form groups, form arrays, κ.λπ.
• Χρήση ενσωματωμένων ελεγκτών όπως required, minLength, maxLength, κ.λπ.
• Δημιουργία και χρήση προσαρμοσμένων ελεγκτών

HTTP Client

• Κατανόηση του ρόλου του HTTP client στο Angular 17
• Δημιουργία και χρήση αιτημάτων HTTP για επικοινωνία με backend υπηρεσίες
• Χρήση observables για διαχείριση ασύγχρονων ρευμάτων δεδομένων
• Χρήση interceptors για τροποποίηση ή διαχείριση αιτημάτων ή αποκρίσεων HTTP

Νέα, Δηλωτική Ροή Ελέγχου

• Εξήγηση της νέας συντακτικής μορφής μπλοκ ελέγχου templates και πώς απλοποιεί συνηθισμένες εργασίες όπως η συνθήκη απόδοσης, οι επαναλήψεις και η διαχείριση κενών συλλογών
• Παροχή παραδειγμάτων χρήσης των νέων μπλοκ, όπως @if, @else, @switch, @case, @default, @for και @empty
• Σύγκριση της νέας συντακτικής μορφής με την προηγούμενη, όπως *ngIf, *ngSwitch και *ngFor
• Αναφορά σε πώς τα νέα μπλοκ ελέγχου υποστηρίζουν applications χωρίς ζώνη με signals

Μπλοκ Καθυστερημένης Φόρτωσης

• Εξήγηση της έννοιας της καθυστερημένης φόρτωσης και πώς μπορεί να βελτιώσει την απόδοση και την εμπειρία χρήστη των εφαρμογών web
• Εισαγωγή του νέου μπλοκ ελέγχου @defer που επιτρέπει τη διαδραστική φόρτωση του περιεχομένου του μπλοκ και των εξαρτήσεών του
• Παροχή παραδειγμάτων χρήσης του μπλοκ @defer για διάφορα σενάρια, όπως η φόρτωση συστατικών, οδηγών, σωλήνων, κινούμενων σχεδίων και σtyles
• Αναφορά σε πώς το μπλοκ @defer λειτουργεί με το νέο API μεταβάσεων προβολών

API Μεταβάσεων Προβολών

• Εξήγηση του σκοπού και των οφελών του API μεταβάσεων προβολών, που επιτρέπει στους αναπτύκτες να προσαρμόζουν τα κινούμενα σχέδια και τις μεταβάσεις μεταξύ προβολών
• Εισαγωγή της νέας οδηγού withViewTransitions που επιτρέπει τη χρήση του API μεταβάσεων προβολών
• Παροχή παραδειγμάτων χρήσης της οδηγού withViewTransitions με διάφορους τύπους μεταβάσεων, όπως fade, slide, zoom και flip
• Αναφορά σε πώς το API μεταβάσεων προβολών λειτουργεί με τον δρομολογητή Angular και το ιστορικό του περιηγητή

Άλλες Λειτουργίες και Βελτιώσεις

• Σύντομη σύνοψη μερικών από τις άλλες λειτουργίες και βελτιώσεις που προσφέρει το Angular 17, όπως:
• Υποστήριξη για πέρασμα @Component.styles ως string
• Ο κώδικας κινούμενων σχεδίων του Angular είναι διαδραστικά φορτώσιμος
• Υποστήριξη TypeScript 5.2
• Το βασικό API signals είναι πλέον σταθερό
• Η υποστήριξη Node.js v16 έχει καταργηθεί και η ελάχιστη υποστηριζόμενη έκδοση είναι v18.13.0
• Το Esbuild θα είναι ο προεπιλεγμένος builder και ο προεπιλεγμένος dev server θα χρησιμοποιεί Vite