Εξέλιξη Κομματιού
Εισαγωγή
- Τι είναι το Angular;
- Angular εναντίον React εναντίον Vue
- Επισκόπηση των δυνατοτήτων και της αρχιτεκτονικής του Angular 17
- Ρύθμιση του Περιβάλλοντος Ανάπτυξης
Ξεκινώντας
- Δημιουργία ενός νέου έργου Angular 17 χρησιμοποιώντας το Angular CLI
- Εξερεύνηση της δομής του έργου και των αρχείων
- Εκτέλεση και παροχή της εφαρμογής
- Εμφάνιση δεδομένων χρησιμοποιώντας interpolation και expressions
Components
- Κατανόηση του ρόλου των components στο Angular 17
- Δημιουργία και χρήση components
- Μεταβίβαση δεδομένων μεταξύ components χρησιμοποιώντας inputs και outputs
- Χρήση των lifecycle hooks των components
Directives
- Κατανόηση της διαφοράς μεταξύ structural και attribute directives
- Δημιουργία και χρήση ενσωματωμένων directives όπως ngIf, ngFor, ngSwitch, κ.λπ.
- Δημιουργία και χρήση custom directives
Pipes
- Κατανόηση του σκοπού των pipes στο Angular 17
- Δημιουργία και χρήση ενσωματωμένων pipes όπως date, currency, json, κ.λπ.
- Δημιουργία και χρήση custom pipes
Services
- Κατανόηση του ρόλου των services στο Angular 17
- Δημιουργία και χρήση services
- Έγχυση εξαρτήσεων χρησιμοποιώντας providers
Modules
- Κατανόηση του ρόλου των modules στο Angular 17
- Δημιουργία και χρήση modules
- Εισαγωγή και εξαγωγή modules
Data Binding
- Κατανόηση της διαφοράς μεταξύ one-way και two-way data binding
- Δημιουργία και χρήση property binding, event binding και της σύνταξης banana-in-a-box
- Χρήση template reference variables
Routing
- Κατανόηση του ρόλου του routing στο Angular 17
- Δημιουργία και διαμόρφωση routes
- Πλοήγηση μεταξύ routes χρησιμοποιώντας routerLink και router.navigate()
- Χρήση route parameters, query parameters και fragments
Forms
- Κατανόηση της διαφοράς μεταξύ template-driven και reactive forms
- Δημιουργία και επικύρωση forms χρησιμοποιώντας form controls, form groups, form arrays, κ.λπ.
- Χρήση ενσωματωμένων validators όπως required, minLength, maxLength, κ.λπ.
- Δημιουργία και χρήση custom validators
HTTP Client
- Κατανόηση του ρόλου του HTTP client στο Angular 17
- Δημιουργία και χρήση HTTP requests για επικοινωνία με backend υπηρεσίες
- Χρήση observables για την διαχείριση ασύγχρονων ροών δεδομένων
- Χρήση interceptors για την τροποποίηση ή τον χειρισμό HTTP requests ή responses
New, Declarative Control Flow
- Επεξήγηση της νέας σύνταξης template control block και πώς απλοποιεί συνηθισμένες εργασίες όπως η υπό συνθήκη απόδοση, η επανάληψη και ο χειρισμός κενών συλλογών
- Παροχή παραδειγμάτων χρήσης των νέων μπλοκ, όπως @if, @else, @switch, @case, @default, @for και @empty
- Σύγκριση της νέας σύνταξης με την προηγούμενη, όπως *ngIf, *ngSwitch και *ngFor
- Αναφορά στο πώς τα νέα control blocks υποστηρίζουν εφαρμογές χωρίς ζώνες (zoneless) με signals
Deferred Loading Blocks
- Επεξήγηση της έννοιας του deferred loading και πώς μπορεί να βελτιώσει την απόδοση και την εμπειρία χρήστη των web εφαρμογών
- Παρουσίαση του νέου μπλοκ ελέγχου @defer που επιτρέπει την lazy-loading του περιεχομένου του μπλοκ και των εξαρτήσεών του
- Παροχή παραδειγμάτων χρήσης του μπλοκ @defer για διάφορα σενάρια, όπως φόρτωση components, directives, pipes, animations και styles
- Αναφορά στο πώς το μπλοκ @defer λειτουργεί με το νέο view transitions API
View Transitions API
- Επεξήγηση του σκοπού και των πλεονεκτημάτων του view transitions API, το οποίο επιτρέπει στους προγραμματιστές να προσαρμόζουν τις κινούμενες εικόνες και τις μεταβάσεις μεταξύ προβολών
- Παρουσίαση της νέας directive withViewTransitions που επιτρέπει τη χρήση του view transitions API
- Παροχή παραδειγμάτων χρήσης της directive withViewTransitions με διαφορετικούς τύπους μετάβασης, όπως fade, slide, zoom και flip
- Αναφορά στο πώς το view transitions API λειτουργεί με τον Angular router και το ιστορικό του προγράμματος περιήγησης
Άλλες Δυνατότητες και Βελτιώσεις
- Συνοπτική σύνοψη ορισμένων από τις άλλες δυνατότητες και βελτιώσεις που προσφέρει το Angular 17, όπως:
- Υποστήριξη για μεταβίβαση του @Component.styles ως συμβολοσειρά
- Ο κώδικας κινούμενων εικόνων του Angular είναι lazy-loadable
- Υποστήριξη TypeScript 5.2
- Το core signal API είναι πλέον σταθερό
- Η υποστήριξη Node.js v16 έχει αφαιρεθεί και η ελάχιστη υποστηριζόμενη έκδοση είναι η v18.13.0
- Το Esbuild θα είναι ο προεπιλεγμένος builder και ο προεπιλεγμένος dev server θα χρησιμοποιεί το Vite
Σύνοψη και Επόμενα Βήματα
Απαιτήσεις
- Κατανόηση HTML, CSS και JavaScript
- Εμπειρία με TypeScript και RxJS
- Εμπειρία στην ανάπτυξη web
Κοινό
- Προγραμματιστές που επιθυμούν να μάθουν πώς να χρησιμοποιούν το Angular 17 για τη δημιουργία δυναμικών και responsive web εφαρμογών
- Προγραμματιστές που επιθυμούν να αναβαθμίσουν τις δεξιότητές τους από προηγούμενες εκδόσεις του Angular
- Προγραμματιστές που επιθυμούν να εξερευνήσουν τις νέες δυνατότητες και βελτιώσεις του Angular 17
Σχόλια (2)
Η απόδοση του κλινικού εκπαιδευτήκαν σχολής μου αρέσαν κυρίως. Παράστησε το θέμα και, στο τέλος του, είχε καλά προσδιορισμένες διαδικασίες εξάσκησης για εμάς. Ήταν σε θέση να μας καθοδηγήσει αμέσως με τα προβλήματα που αντιμετώπισαμε κατά τη διάρκεια των συνεδριών εξάσκησης.
Rabin Byanjankar - Lument
Κομμάτι - Angular 17
Μηχανική Μετάφραση
Ήταν πολύ ενδιαφέρουση και επιχειρηματική. Ο εκπαιδευτικός ήταν πολύ υπομονετικός μαζί μας όταν δεν καταλάβαμε κάτι και εξασφάλισε ότι κανείς δεν παρέμεινε πίσω κατά τη διάρκεια της εκπαίδευσης.
Daniel - INIT Innovations in Transportation Ltd.
Κομμάτι - Angular 17
Μηχανική Μετάφραση