Τι νέο υπάρχει στο Angular v16;

Το Angular, που διατηρείται από την Google, είναι ένα ευρέως χρησιμοποιούμενο πλαίσιο ανοιχτού κώδικα για την ανάπτυξη εφαρμογών ιστού. Σας προσφέρει μια ισχυρή εργαλειοθήκη και μια σειρά από δυνατότητες που σας επιτρέπουν να δημιουργείτε δυναμικές, ανταποκρινόμενες και επεκτάσιμες εφαρμογές web.

Η πρόσφατη κυκλοφορία της Angular έκδοσης 16 εισάγει συναρπαστικές ενημερώσεις και βελτιώσεις στην εμπειρία ανάπτυξης, καθώς και καλύτερη απόδοση και σταθερότητα εφαρμογής.

1. Γωνιακά Σήματα

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

@Συστατικό ({
 εκλέκτορας: "η εφαρμογή μου",
 αυτόνομο: αληθής,
 πρότυπο: `
{{ πλήρες όνομα() }} "setName('John')">Κάντε κλικ</button>
`,
})
εξαγωγήτάξη Εφαρμογή {
 όνομα = σήμα('Ιωάννα');
 επώνυμο = σήμα(





instagram viewer

'Ελαφίνα');
 πλήρες όνομα = υπολογισμένο(() =>`${Αυτό.όνομα()}${Αυτό.επίθετο()}`);
κατασκευαστής() {
 αποτέλεσμα(() =>κονσόλα.κούτσουρο('Όνομα άλλαξε:', Αυτό.πλήρες όνομα()));
 }
 setName (newName: σειρά) {
Αυτό.firstName.set (newName);
 }
}

Το παραπάνω απόσπασμα κώδικα δημιουργεί μια υπολογισμένη τιμή που ονομάζεται fullName, η οποία βασίζεται στα σήματα firstName και lastName. Επιπλέον, ορίζει ένα εφέ, μια λειτουργία επανάκλησης που εκτελείται κάθε φορά που αλλάζει η τιμή των σημάτων που διαβάζει.

Σε αυτήν την περίπτωση, η τιμή fullName εξαρτάται από το firstName και το lastName, επομένως η αλλαγή ενός από τα δύο ενεργοποιεί το εφέ. Όταν η τιμή του firstName έχει οριστεί σε John, το πρόγραμμα περιήγησης καταγράφει το ακόλουθο μήνυμα στην κονσόλα:

 Άλλαξε όνομα: John Doe.

2. Αυτόνομη Ng Νέα Συλλογή

Ξεκινώντας από το Angular v16, μπορείτε να δημιουργήσετε νέα αυτόνομα έργα από την αρχή! Για να δοκιμάσετε την προεπισκόπηση προγραμματιστή των αυτόνομων σχηματικών, βεβαιωθείτε ότι έχετε εγκαταστήσει το Angular CLI v16 και εκτελέστε την ακόλουθη εντολή:

ng νέο -- αυτόνομο

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

3. Αυτόματη αντιστοίχιση παραμέτρων διαδρομής

Εξετάστε μια διαμόρφωση δρομολόγησης ως εξής:

εξαγωγήσυνθ διαδρομές: Διαδρομές = [{
 μονοπάτι: 'search:/id',
 συστατικό: SearchComponent,
 επίλυση: {
 Λεπτομέρειες αναζήτησης: searchResolverFn
 }
}];

Πριν από το Angular 16, έπρεπε να εισαγάγετε την υπηρεσία ActivatedRoute για να ανακτήσετε παραμέτρους URL, παραμέτρους ερωτήματος ή συσχετισμένα δεδομένα για μια συγκεκριμένη διεύθυνση URL.

Ακολουθεί ένα παράδειγμα για το πώς έπρεπε να το κάνετε:

@Συστατικό({
 ...
})
εξαγωγήτάξη SearchComponent {
 μόνο για ανάγνωση #activatedRoute = ένεση (ActivatedRoute);
 id$ = μόνο για ανάγνωση Αυτό.#activatedRoute.paramMap (χάρτης(παραμέτρους => params.get('ταυτότητα')));
 δεδομένα μόνο για ανάγνωση$ = Αυτό.#activatedRoute.data.map(({
 Λεπτομέρειες αναζήτησης
 }) => Λεπτομέρειες αναζήτησης);
}

Με το Angular 16, δεν χρειάζεται πλέον να εισάγετε την υπηρεσία ActivatedRoute για να ανακτήσετε διάφορες παραμέτρους διαδρομής, επειδή μπορείτε να τις συνδέσετε απευθείας σε εισόδους στοιχείων.

Για να ενεργοποιήσετε αυτήν τη λειτουργία σε μια εφαρμογή που χρησιμοποιεί το σύστημα λειτουργικών μονάδων, ορίστε την αντίστοιχη τιμή στις επιλογές του RouterModule:

RouterModule.forRoot (διαδρομές, {
 bindComponentInputs: αληθής
})

Για μια αυτόνομη εφαρμογή, πρέπει να καλέσετε μια συνάρτηση:

provideRoutes (διαδρομές, withComponentInputBinding());

Μόλις ενεργοποιήσετε αυτήν τη λειτουργία, το στοιχείο γίνεται πολύ πιο απλό:

@Συστατικό({
 ...
})
εξαγωγήτάξη SearchComponent {
@Εισαγωγή() id!: σειρά;
@Εισαγωγή() SearchDetails!: SearchDetails.
}

4. Απαιτούμενη είσοδος

Ένα ιδιαίτερα αναμενόμενο χαρακτηριστικό για την κοινότητα Angular είναι η δυνατότητα επισήμανσης ορισμένων εισόδων όπως απαιτείται. Μέχρι τώρα, έπρεπε να χρησιμοποιήσετε διάφορους τρόπους αντιμετώπισης για να το πετύχετε, όπως η δημιουργία ενός σφάλματος στο NgOnInit κύκλου ζωής εάν η μεταβλητή δεν είχε καθοριστεί ή τροποποιούσε τον επιλογέα του στοιχείου ώστε να συμπεριλάβει το υποχρεωτικό εισροές.

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

@Εισαγωγή({
 απαιτείται: αληθής
}) όνομα!: σειρά;

5. Vite ως διακομιστής προγραμματιστών

Το Angular 14 παρουσίασε ένα νέο πακέτο JavaScript που ονομάζεται EsBuild, το οποίο βελτίωσε σημαντικά τους χρόνους κατασκευής κατά περίπου 40%. Ωστόσο, θα μπορούσατε να συνειδητοποιήσετε αυτό το κέρδος απόδοσης μόνο κατά τη φάση κατασκευής και όχι κατά την ανάπτυξη με τον διακομιστή dev.

Στην επερχόμενη κυκλοφορία του Angular, το εργαλείο κατασκευής Vite επιτρέπει τη χρήση του EsBuild και κατά την ανάπτυξη.

Για να ενεργοποιήσετε αυτήν τη δυνατότητα, ενημερώστε τη διαμόρφωση του builder στο αρχείο angular.json ως εξής:

"αρχιτέκτονας": {
"χτίζω": {
"οικοδόμος": "@angular-devkit/build-angular: browser-esbuild",
"επιλογές": {
 ...
 }
 }

Λάβετε υπόψη ότι αυτή η λειτουργία είναι ακόμα πειραματική.

Ενίσχυση της αναπτυξιακής εμπειρίας και απόδοσης

Η Angular έκδοση 16 φέρνει συναρπαστικές ενημερώσεις όπως τα Angular Signals για διαχείριση δεδομένων, αυτόνομο έργο δημιουργία, αυτόματη αντιστοίχιση παραμέτρων διαδρομής, απαιτούμενες εισροές και ενσωμάτωση του Vite για βελτίωση ανάπτυξη. Αυτές οι βελτιώσεις βελτιώνουν την εμπειρία ανάπτυξης και αυξάνουν την απόδοση της εφαρμογής.