Course Outline
Εισαγωγή
- Τι είναι το Angular;
- Angular εναντίον React εναντίον Vue
- Επισκόπηση Angular 17 χαρακτηριστικά και αρχιτεκτονική
- Δημιουργία Αναπτυξιακού Περιβάλλοντος
Ξεκινώντας
- Δημιουργία νέου έργου Angular 17 χρησιμοποιώντας Angular CLI
- Εξερεύνηση της δομής και των αρχείων του έργου
- Εκτέλεση και εξυπηρέτηση της εφαρμογής
- Εμφάνιση δεδομένων με χρήση παρεμβολής και εκφράσεων
Συστατικά
- Κατανόηση του ρόλου των εξαρτημάτων στο Angular 17
- Δημιουργία και χρήση στοιχείων
- Διαβίβαση δεδομένων μεταξύ στοιχείων με χρήση εισόδων και εξόδων
- Χρήση γάντζων κύκλου ζωής εξαρτημάτων
οδηγίες
- Κατανόηση της διαφοράς μεταξύ των οδηγιών δομής και χαρακτηριστικών
- Δημιουργία και χρήση ενσωματωμένων οδηγιών όπως ngIf, ngFor, ngSwitch κ.λπ.
- Δημιουργία και χρήση προσαρμοσμένων οδηγιών
Σωλήνες
- Κατανόηση του σκοπού των σωλήνων στο Angular 17
- Δημιουργία και χρήση ενσωματωμένων σωλήνων όπως ημερομηνία, νόμισμα, json κ.λπ.
- Δημιουργία και χρήση προσαρμοσμένων σωλήνων
Υπηρεσίες
- Κατανόηση του ρόλου των υπηρεσιών στο Angular 17
- Δημιουργία και χρήση υπηρεσιών
- Έγχυση εξαρτήσεων χρησιμοποιώντας παρόχους
Ενότητες
- Κατανόηση του ρόλου των ενοτήτων στο Angular 17
- Δημιουργία και χρήση ενοτήτων
- Εισαγωγή και εξαγωγή μονάδων
Δεδομένα Δεδομένων
- Κατανόηση της διαφοράς μεταξύ μονόδρομης και αμφίδρομης σύνδεσης δεδομένων
- Δημιουργία και χρήση σύνδεσης ιδιοτήτων, σύνδεσης συμβάντων και σύνταξης banana-in-a-box
- Χρήση μεταβλητών αναφοράς προτύπου
Δρομολόγηση
- Κατανόηση του ρόλου της δρομολόγησης στο Angular 17
- Δημιουργία και διαμόρφωση διαδρομών
- Πλοήγηση μεταξύ διαδρομών χρησιμοποιώντας routerLink και router.navigate()
- Χρήση παραμέτρων διαδρομής, παραμέτρων ερωτήματος και θραυσμάτων
Έντυπα
- Κατανόηση της διαφοράς μεταξύ των μορφών που βασίζονται σε πρότυπο και των αντιδραστικών
- Δημιουργία και επικύρωση φορμών χρησιμοποιώντας στοιχεία ελέγχου φορμών, ομάδες φορμών, πίνακες φορμών κ.λπ.
- Χρησιμοποιώντας ενσωματωμένους επικυρωτές όπως απαιτείται, minLength, maxLength κ.λπ.
- Δημιουργία και χρήση προσαρμοσμένων επικυρωτών
Πελάτης HTTP
- Κατανόηση του ρόλου του πελάτη HTTP στο Angular 17
- Δημιουργία και χρήση αιτημάτων HTTP για επικοινωνία με υπηρεσίες υποστήριξης
- Χρήση παρατηρήσιμων στοιχείων για το χειρισμό ασύγχρονων ροών δεδομένων
- Χρήση υποκλοπών για την τροποποίηση ή το χειρισμό αιτημάτων ή απαντήσεων HTTP
Νέα, δηλωτική ροή ελέγχου
- Επεξήγηση της σύνταξης του νέου μπλοκ ελέγχου προτύπου και του τρόπου με τον οποίο απλοποιεί κοινές εργασίες όπως απόδοση υπό όρους, επαναφορά και χειρισμό κενών συλλογών
- Δίνοντας παραδείγματα χρήσης των νέων μπλοκ, όπως @if, @else, @switch, @case, @default, @for και @empty
- Σύγκριση της νέας σύνταξης με την προηγούμενη, όπως *ngIf, *ngSwitch και *ngFor
- Αναφέροντας πώς τα νέα μπλοκ ελέγχου υποστηρίζουν εφαρμογές χωρίς ζώνες με σήματα
Μπλοκ αναβαλλόμενης φόρτωσης
- Εξήγηση της έννοιας της αναβαλλόμενης φόρτωσης και πώς μπορεί να βελτιώσει την απόδοση και την εμπειρία χρήστη των εφαρμογών Ιστού
- Παρουσιάζουμε το νέο μπλοκ ελέγχου @defer που επιτρέπει την τεμπελική φόρτωση του περιεχομένου του μπλοκ και των εξαρτήσεών του
- Δίνοντας παραδείγματα χρήσης του μπλοκ @defer για διαφορετικά σενάρια, όπως φόρτωση στοιχείων, οδηγιών, αγωγών, κινούμενων εικόνων και στυλ
- Αναφέροντας πώς λειτουργεί το μπλοκ @defer με το νέο API μεταβάσεων προβολής
Προβολή μεταβάσεων API
- Εξήγηση του σκοπού και των πλεονεκτημάτων του API μεταβάσεων προβολής, το οποίο επιτρέπει στους προγραμματιστές να προσαρμόζουν τις κινούμενες εικόνες και τις μεταβάσεις μεταξύ των προβολών
- Παρουσίαση της νέας οδηγίας withViewTransitions που επιτρέπει τη χρήση του API μεταβάσεις προβολής
- Δίνοντας παραδείγματα χρήσης της οδηγίας withViewTransitions με διαφορετικούς τύπους μετάβασης, όπως fade, slide, zoom και flip
- Αναφέροντας πώς λειτουργεί το API μεταβάσεων προβολής με το δρομολογητή Angular και το ιστορικό του προγράμματος περιήγησης
Άλλα χαρακτηριστικά και βελτιώσεις
- Συνοψίζοντας μερικά από τα άλλα χαρακτηριστικά και βελτιώσεις που προσφέρει το Angular 17, όπως:
- Υποστήριξη για μετάδοση στο @Component.styles ως συμβολοσειρά
- Ο κώδικας κινούμενων εικόνων του Angular μπορεί να φορτωθεί
- TypeScript 5.2 υποστήριξη
- Το API του βασικού σήματος είναι πλέον σταθερό
- Η υποστήριξη Node.js v16 έχει καταργηθεί και η ελάχιστη έκδοση υποστήριξης είναι η έκδοση 18.13.0
- Το Esbuild θα είναι το προεπιλεγμένο πρόγραμμα δημιουργίας και ο προεπιλεγμένος διακομιστής προγραμματισμού θα χρησιμοποιεί το Vite
Περίληψη και Επόμενα Βήματα
Requirements
- Κατανόηση των HTML, CSS και JavaScript
- Εμπειρία με TypeScript και RxJS
- Εμπειρία ανάπτυξης ιστοσελίδων
Ακροατήριο
- Προγραμματιστές που επιθυμούν να μάθουν πώς να χρησιμοποιούν το Angular 17 για τη δημιουργία δυναμικών και αποκρινόμενων εφαρμογών ιστού
- Προγραμματιστές που επιθυμούν να αναβαθμίσουν τις δεξιότητές τους από προηγούμενες εκδόσεις του Angular
- Προγραμματιστές που επιθυμούν να εξερευνήσουν τις νέες δυνατότητες και βελτιώσεις του Angular 17
Testimonials (2)
Μου άρεσε κυρίως η ροή της προπόνησης. πέρασε από το θέμα και στο τέλος του θέματος, μας έκανε καλά καθορισμένες προπονήσεις. Ήταν σε θέση να μας καθοδηγήσει αμέσως με τα ζητήματα που αντιμετωπίσαμε στις προπονήσεις.
Rabin Byanjankar - Lument
Course - Angular 17
Machine Translated
Ήταν πολύ διαδραστικό και ενημερωτικό. Ο εκπαιδευτής ήταν πολύ υπομονετικός μαζί μας όταν δεν καταλαβαίναμε κάτι και φρόντισε να μην έμενε κανένας πίσω σε όλη τη διάρκεια της προπόνησης.
Daniel - INIT Innovations in Transportation Ltd.
Course - Angular 17
Machine Translated