Σεμινάριο Front-End Development με Angular

Μάθημα 1 • Ενότητες Angular και Εκκίνηση Εφαρμογής

Εξηγεί τα NgModules, το κεντρικό AppModule και τον τρόπο με τον οποίο η Angular εκκινεί την εφαρμογή. Παρέχει το δομικό πλαίσιο που απαιτείται πριν από τη δημιουργία συστατικών.

Μάθημα 2 • Βασικά Στοιχεία TypeScript για Angular

Παρουσιάζει τους τύπους, τις διεπαφές και τους διακοσμητές της TypeScript που απαιτούνται για τη συγγραφή κώδικα Angular με αυτοπεποίθηση. Γεφυρώνει τη γνώση JavaScript με το τυποποιημένο οικοσύστημα της Angular.

Μάθημα 3 • Εισαγωγή στο Πλαίσιο Angular

Καλύπτει τον ρόλο της Angular στη σύγχρονη ανάπτυξη front-end και την αρχιτεκτονική της εμπνευσμένη από το MVC. Θέτει την εννοιολογική βάση για όλα τα επόμενα θέματα του πλαισίου.

Μάθημα 4 • Ρύθμιση του Περιβάλλοντος Ανάπτυξης

Εγκαθιστά και ρυθμίζει τα Node.js, npm και Angular CLI. Εξασφαλίζει ότι κάθε εκπαιδευόμενος διαθέτει ένα συνεπές, αναπαραγώγιμο τοπικό χώρο εργασίας.

Μάθημα 1 • Ενσωματωμένες Δομικές Οδηγίες

Εφαρμόζει τα *ngIf, *ngFor και *ngSwitch για δυναμικό έλεγχο της δομής του DOM. Δείχνει πώς οι οδηγίες επεκτείνουν την εκφραστικότητα των προτύπων.

Μάθημα 2 • Σύνδεση Ιδιοτήτων και Συμβάντων

Διδάσκει τη μονόδρομη ροή δεδομένων μέσω σύνδεσης ιδιοτήτων και τον χειρισμό συμβάντων χρήστη μέσω σύνδεσης συμβάντων. Συνδέει τη λογική των συστατικών με στοιχεία DOM και αλληλεπιδράσεις χρήστη.

Μάθημα 3 • Σύνταξη Προτύπων και Εκφράσεις

Καλύπτει τη γλώσσα εκφράσεων προτύπων της Angular, την ασφαλή πλοήγηση και τις μεταβλητές αναφοράς προτύπου. Επιτρέπει τη δυναμική απόδοση περιεχομένου εντός των προβολών συστατικών.

Μάθημα 4 • Άγκιστρα Κύκλου Ζωής Συστατικού

Εξερευνά την πλήρη ακολουθία αγκίστρων κύκλου ζωής από το ngOnInit έως το ngOnDestroy. Διδάσκει πότε και γιατί να χρησιμοποιείς κάθε άγκιστρο για αρχικοποίηση και εκκαθάριση.

Μάθημα 1 • Ερωτήματα ViewChild και ContentChild

Αποκτά πρόσβαση σε στιγμιότυπα θυγατρικών συστατικών και προβαλλόμενο περιεχόμενο μέσω προγραμματισμού με ερωτήματα. Επιτρέπει προηγμένο συντονισμό συστατικών πέρα από τη σύνδεση προτύπων.

Μάθημα 2 • Επικοινωνία Γονέα-προς-Παιδί με @Input

Χρησιμοποιεί το @Input για τη μεταβίβαση δεδομένων προς τα κάτω στο δέντρο συστατικών και επικυρώνει την είσοδο με ρυθμιστές. Καθιερώνει το κύριο πρότυπο ροής δεδομένων προς τα κάτω στην Angular.

Μάθημα 3 • Δημιουργία Προσαρμοσμένων Δομικών Οδηγιών

Υλοποιεί δομικές οδηγίες χρησιμοποιώντας τα TemplateRef και ViewContainerRef για χειρισμό του DOM. Επεκτείνει την ικανότητα των εκπαιδευομένων να δημιουργούν επαναχρησιμοποιήσιμη λογική διάταξης.

Μάθημα 4 • Δημιουργία Προσαρμοσμένων Οδηγιών Χαρακτηριστικών

Δημιουργεί οδηγίες που τροποποιούν την εμφάνιση ή τη συμπεριφορά του στοιχείου υποδοχής χωρίς αλλαγή της δομής του DOM. Ενισχύει το πρότυπο οδηγίας που παρουσιάστηκε στο Κεφάλαιο 2.

Μάθημα 1 • Δημιουργία και Παροχή Υπηρεσιών Angular

Δημιουργεί υπηρεσίες με το CLI και τις καταχωρεί σε επίπεδο ενότητας, συστατικού ή ρίζας. Καθιερώνει το επίπεδο υπηρεσιών ως την έδρα της κοινόχρηστης λογικής.

Μάθημα 2 • HTTP Client και Ενσωμάτωση REST API

Ρυθμίζει το HttpClientModule και εκτελεί αιτήματα GET, POST, PUT και DELETE. Συνδέει το επίπεδο υπηρεσιών με πραγματικές πηγές δεδομένων υποστήριξης.

Μάθημα 3 • Χειρισμός Σφαλμάτων και Παρεμβολείς HTTP

Υλοποιεί καθολικό χειρισμό σφαλμάτων με catchError και μετασχηματισμό αιτημάτων/αποκρίσεων με παρεμβολείς. Παράγει πρότυπα επικοινωνίας HTTP έτοιμα για παραγωγή.

Μάθημα 4 • Εμβάθυνση στην Έγχυση Εξαρτήσεων

Εξερευνά την ιεραρχία έγχυσης εξαρτήσεων, τα διακριτικά έγχυσης και τους τύπους παρόχων. Επιτρέπει λεπτομερή έλεγχο του τρόπου επίλυσης των εξαρτήσεων σε όλη την εφαρμογή.

Μάθημα 1 • Φρουροί Διαδρομών και Έλεγχος Πρόσβασης

Υλοποιεί φρουρούς CanActivate, CanDeactivate και CanLoad για την προστασία διαδρομών. Ενσωματώνει την αυθεντικοποίηση και την εξουσιοδότηση στο επίπεδο πλοήγησης.

Μάθημα 2 • Καθυστερημένη Φόρτωση και Επιλυτές Διαδρομών

Διαχωρίζει την εφαρμογή σε ενότητες λειτουργιών που φορτώνονται κατ' απαίτηση και προ-ανακτά δεδομένα με επιλυτές. Βελτιώνει την απόδοση αρχικής φόρτωσης και την εμπειρία χρήστη.

Μάθημα 3 • Ένθετες Διαδρομές και Ονομασμένες Εξόδους

Δομεί θυγατρικές διαδρομές κάτω από γονικές διαδρομές και χρησιμοποιεί ονομασμένες εξόδους για βοηθητικές προβολές. Υποστηρίζει σύνθετες απαιτήσεις διάταξης σε μεγάλες εφαρμογές.

Μάθημα 4 • Ρύθμιση Δρομολογητή και Βασική Πλοήγηση

Ρυθμίζει το RouterModule με ορισμούς διαδρομών και προσθέτει τα router-outlet και routerLink. Θέτει τα θεμέλια για όλες τις λειτουργίες πλοήγησης.

Μάθημα 1 • Δυναμικές Φόρμες με FormArray

Χρησιμοποιεί το FormArray για προσθήκη και αφαίρεση στοιχείων ελέγχου φόρμας κατά την εκτέλεση για δεδομένα μεταβλητού μήκους. Διαχειρίζεται πραγματικά σενάρια όπως επαναλαμβανόμενα στοιχεία γραμμής.

Μάθημα 2 • Επικυρωτές και Προσαρμοσμένη Επικύρωση

Εφαρμόζει σύγχρονους και ασύγχρονους επικυρωτές και δημιουργεί επαναχρησιμοποιήσιμες προσαρμοσμένες συναρτήσεις επικύρωσης. Εξασφαλίζει την ακεραιότητα των δεδομένων πριν από την υποβολή.

Μάθημα 3 • Υποβολή Φόρμας και Διαχείριση Κατάστασης

Διαχειρίζεται την υποβολή, τον επαναφορά και την κατάσταση dirty/touched της φόρμας για βελτιωμένη εμπειρία χρήστη. Συνδέει τα δεδομένα της φόρμας με κλήσεις υπηρεσίας που παρουσιάστηκαν στο Κεφάλαιο 4.

Μάθημα 4 • Φόρμες Οδηγούμενες από Πρότυπο

Χρησιμοποιεί τα ngForm, ngModel και ενσωματωμένους επικυρωτές για τη δημιουργία φορμών δηλωτικά στο πρότυπο. Εισάγει έννοιες φορμών με ελάχιστο φόρτο TypeScript.

Μάθημα 1 • NgRx Entity και DevTools

Απλοποιεί τη διαχείριση συλλογών με το NgRx Entity και επιθεωρεί την κατάσταση με τα Redux DevTools. Επιταχύνει την ανάπτυξη και την αποσφαλμάτωση λειτουργιών με έντονη χρήση αποθήκης.

Μάθημα 2 • Εισαγωγή στο NgRx Store

Εγκαθιστά το NgRx και ορίζει ενέργειες, μειωτές και την αποθήκη για ένα τμήμα λειτουργίας. Καθιερώνει το πρότυπο Redux εντός του οικοσυστήματος της Angular.

Μάθημα 3 • Κατάσταση Βασισμένη σε Υπηρεσία με BehaviorSubject

Αποθηκεύει και μοιράζεται κατάσταση σε όλα τα συστατικά χρησιμοποιώντας το BehaviorSubject σε μια υπηρεσία. Παρέχει μια ελαφριά λύση κατάστασης πριν από την εισαγωγή του NgRx.

Μάθημα 4 • NgRx Effects για Παράπλευρες Επιδράσεις

Διαχειρίζεται ασύγχρονες λειτουργίες όπως κλήσεις HTTP εκτός μειωτών χρησιμοποιώντας NgRx Effects. Διατηρεί τους μειωτές αμιγείς και συγκεντρώνει τη λογική παράπλευρων επιδράσεων.

Μάθημα 1 • Στρατηγικές Ανάπτυξης Λογισμικού και Ενσωμάτωση CI/CD

Αναπτύσσει εκδόσεις Angular σε στατική φιλοξενία και ενσωματώνει αυτοματοποιημένους αγωγούς για συνεχή παράδοση. Κλείνει τον κύκλο ζωής ανάπτυξης από τον κώδικα στην παραγωγή.

Μάθημα 2 • Δοκιμή Μονάδας Συστατικών και Υπηρεσιών

Γράφει δοκιμές μονάδας με Jasmine και TestBed για συστατικά, υπηρεσίες και αγωγούς. Επικυρώνει μεμονωμένες μονάδες σε απομόνωση πριν από την ενσωμάτωση.

Μάθημα 3 • Βελτιστοποίηση Πακέτου και Ρύθμιση Κατασκευής

Ρυθμίζει κατασκευές παραγωγής, tree shaking και διαφορική φόρτωση για βέλτιστο μέγεθος πακέτου. Προετοιμάζει την εφαρμογή για πραγματικούς περιορισμούς ανάπτυξης.

Μάθημα 4 • Δοκιμή από Άκρο σε Άκρο με Cypress

Αυτοματοποιεί τη δοκιμή ροής χρήστη με το Cypress για την επικύρωση της πλήρους συμπεριφοράς της εφαρμογής. Συμπληρώνει τις δοκιμές μονάδας με ρεαλιστικά σενάρια βασισμένα σε πρόγραμμα περιήγησης.