Επικοινωνήστε μαζί μας

Εξέλιξη Κομματιού

Εισαγωγή

  • Τι είναι το 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
 28 Ώρες

Αριθμός συμμετέχοντων


Τιμή ανά συμμετέχοντα

Σχόλια (2)

Εφεξής Μαθήματα

Σχετικές Κατηγορίες