«Κάθε χρόνο το Διαδίκτυο διακόπτεται», λέει το ρητό, και οι προγραμματιστές συνήθως πρέπει να πάνε και να το διορθώσουν. Με την πολυαναμενόμενη Γωνιώδης έκδοση 9, κάποιος μπορεί να πιστεύει ότι αυτό θα ισχύει και οι εφαρμογές που έχουν αναπτυχθεί σε παλαιότερες εκδόσεις θα πρέπει να περάσουν από μια σημαντική διαδικασία μετεγκατάστασης.

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

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

Tutorial Angular 9: Ξεκινώντας με μια νέα γωνιακή εφαρμογή

Ας ξεκινήσουμε με το παράδειγμα του Angular project. Αρχικά, ας εγκαταστήσουμε την τελευταία έκδοση του Angular's CLI:

npm install -g @angular/cli

Μπορούμε να επαληθεύσουμε την έκδοση Angular CLI εκτελώντας ng version.

Στη συνέχεια, ας δημιουργήσουμε μια γωνιακή εφαρμογή:

ng new ng9-app --create-application=false --strict

Χρησιμοποιούμε δύο επιχειρήματα στο ng new εντολή:

• --create-application=false θα πει στο CLI να δημιουργεί μόνο αρχεία στο χώρο εργασίας. Αυτό θα μας βοηθήσει να οργανώσουμε καλύτερα τον κώδικα μας όταν χρειαζόμαστε περισσότερες από μία εφαρμογές και πολλές βιβλιοθήκες.
• --strict θα προσθέσει αυστηρότερους κανόνες για την επιβολή περισσότερων τύπων TypeScript και καθαριότητας κώδικα.

Ως αποτέλεσμα αυτού, έχουμε έναν βασικό φάκελο και αρχεία του χώρου εργασίας.

Τώρα, ας προσθέσουμε μια νέα εφαρμογή. Για να το κάνουμε αυτό, θα εκτελέσουμε:

ng generate application tv-show-rating

Θα μας ζητηθεί:

? Would you like to share anonymous usage data about this project with the Angular Team at Google under Google's Privacy Policy at https://policies.google.com/privacy? For more details and how to change this setting, see http://angular.io/analytics. No ? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? SCSS

Τώρα, εάν εκτελέσουμε ng serve, θα δούμε την εφαρμογή να λειτουργεί με το αρχικό της ικρίωμα.

Εάν εκτελέσουμε ng build --prod, μπορούμε να δούμε τη λίστα των παραγόμενων αρχείων.

Έχουμε δύο εκδόσεις κάθε αρχείου. Το ένα είναι συμβατό με προγράμματα περιήγησης παλαιού τύπου και το άλλο είναι στοχευμένο ES2015, το οποίο χρησιμοποιεί νεότερα API και απαιτεί λιγότερες πολυπληρώσεις για να εκτελείται σε προγράμματα περιήγησης.

Μία μεγάλη βελτίωση του Angular 9 είναι το μέγεθος της δέσμης. Σύμφωνα με την ομάδα Angular, μπορείτε να δείτε μείωση έως και 40% για μεγάλες εφαρμογές.

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

Ένα άλλο χαρακτηριστικό που παρουσιάζεται στο Angular 9 είναι η δυνατότητα να μας προειδοποιεί εάν υπάρχει κάποιο από τα συστατικό Τα αρχεία τύπου CSS είναι μεγαλύτερα από ένα καθορισμένο όριο.

βέλτιστες πρακτικές αρχιτεκτονικής εφαρμογών Android

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

Προσθήκη φόρμας για αξιολόγηση τηλεοπτικών εκπομπών

Στη συνέχεια, θα προσθέσουμε μια φόρμα για την αξιολόγηση τηλεοπτικών εκπομπών. Για αυτό, πρώτα, θα εγκαταστήσουμε bootstrap και ng-bootstrap:

npm install bootstrap @ng-bootstrap/ng-bootstrap

Μια άλλη βελτίωση στο Angular 9 είναι το i18n (διεθνοποίηση). Προηγουμένως, οι προγραμματιστές θα έπρεπε να εκτελούν μια πλήρη έκδοση για κάθε τοποθεσία σε μια εφαρμογή. Το Angular 9 μας επιτρέπει να δημιουργήσουμε μια εφαρμογή μία φορά και να δημιουργήσουμε όλα τα αρχεία i18n σε μια διαδικασία μετά την κατασκευή, μειώνοντας σημαντικά το χρόνο κατασκευής. Από ng-bootstrap έχει εξάρτηση από το i18n, θα προσθέσουμε το νέο πακέτο στο έργο μας:

ng add @angular/localize

Στη συνέχεια, θα προσθέσουμε το θέμα Bootstrap στην εφαρμογή μας styles.scss:

@import '~bootstrap/scss/bootstrap';

Και θα συμπεριλάβουμε NgbModule και ReactiveFormsModule στο AppModule μας στις app.module.ts:

// ... import { ReactiveFormsModule } from '@angular/forms'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; @NgModule({ imports: [ // ... ReactiveFormsModule, NgbModule ], })

Στη συνέχεια, θα ενημερώσουμε app.component.html με ένα βασικό πλέγμα για τη φόρμα μας:

ng g c TvRatingForm

Και δημιουργήστε το στοιχείο φόρμας:

tv-rating-form.component.html

Ας ενημερώσουμε TV SHOW {{tvShow.name}} OK και προσθέστε τη φόρμα για να βαθμολογήσετε τηλεοπτικές εκπομπές.

tv-rating-form.component.ts

Και // ... export class TvRatingFormComponent implements OnInit { tvShows = [ { name: 'Better call Saul!' }, { name: 'Breaking Bad' }, { name: 'Lost' }, { name: 'Mad men' } ]; form = new FormGroup({ tvShow: new FormControl('', Validators.required), rating: new FormControl('', Validators.required), }); submit() { alert(JSON.stringify(this.form.value)); this.form.reset(); } } θα μοιάζει με αυτό:

app.component.html

Τέλος, ας προσθέσουμε τη φόρμα στο ng serve:

tsconfig.json

Σε αυτό το σημείο, έχουμε κάποια βασική λειτουργικότητα διεπαφής χρήστη. Τώρα, αν τρέξουμε { // ... 'angularCompilerOptions': { 'fullTemplateTypeCheck': true, 'strictInjectionParameters': true, 'strictTemplates': true } } και πάλι, μπορούμε να το δούμε σε δράση.

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

Εντοπισμός σφαλμάτων με Angular 9 Ivy

Μια άλλη μεγάλη βελτίωση που παρουσιάστηκε στο Angular 9 και το Angular Ivy είναι η εμπειρία εντοπισμού σφαλμάτων. Ο μεταγλωττιστής μπορεί τώρα να εντοπίσει περισσότερα σφάλματα και να τα ρίξει με πιο «αναγνώσιμο» τρόπο.

Ας το δούμε σε δράση. Αρχικά, θα ενεργοποιήσουμε τον έλεγχο προτύπων στο tvShows:

name

Τώρα, εάν ενημερώσουμε title πίνακας και μετονομασία tvShows = [ { title: 'Better call Saul!' }, { title: 'Breaking Bad' }, { title: 'Lost' }, { title: 'Mad men' } ]; έως @Input():

@Input()

… Θα λάβουμε ένα σφάλμα από τον μεταγλωττιστή.

Αυτός ο έλεγχος τύπου θα μας επιτρέψει να αποτρέψουμε τα τυπογραφικά λάθη και την εσφαλμένη χρήση των τύπων TypeScript.

Επικύρωση γωνιακού κισσού για tv-rating-form.component.ts

Μια άλλη καλή επικύρωση που λαμβάνουμε είναι με @Input() title: string; . Για παράδειγμα, ενδέχεται να το προσθέσουμε στο app.component.html:

app.component.ts

… Και συνδέστε το σε // ... export class AppComponent { title = null; } :

google api επεξεργασίας φυσικής γλώσσας

$any()

… Και μετά αλλάξτε any έτσι:

title

Εάν πραγματοποιήσουμε αυτές τις τρεις αλλαγές, θα λάβουμε έναν άλλο τύπο σφάλματος από τον μεταγλωττιστή.

Σε περίπτωση που θέλουμε να το παρακάμψουμε, εμείς μπορώ χρήση @Input() title: string | null ; στο πρότυπο για να μεταδώσετε την τιμή σε ExpressionChangedAfterItHasBeenCheckedError και διορθώστε το σφάλμα:

ExpressionChangedAfterItHasBeenCheckedError

Ο σωστός τρόπος, ωστόσο, θα ήταν να κάνετε ExpressionChangedAfterItHasBeenCheckedError στη μηδενική μορφή:

ng g s Title

Το BehaviorSubject στο Angular 9 Ivy

Ένα από τα πιο φοβερά σφάλματα στην ανάπτυξη της Γωνίας είναι το Observable. Ευτυχώς, ο Ivy εμφανίζει το σφάλμα με πιο καθαρό τρόπο, διευκολύνοντας την εύρεση από πού προέρχεται το πρόβλημα.

Λοιπόν, ας παρουσιάσουμε ένα export class TitleService { private bs = new BehaviorSubject (''); constructor() {} get title$() { return this.bs.asObservable(); } update(title: string) { this.bs.next(title); } } λάθος. Για να το κάνουμε αυτό, πρώτα, θα δημιουργήσουμε μια υπηρεσία:

css cheat φύλλο με παραδείγματα

app.component.html

Στη συνέχεια, θα προσθέσουμε ένα

{ async}

και μεθόδους για πρόσβαση στο app.component.ts και να εκπέμψει μια νέα τιμή.

TitleService

Μετά από αυτό, θα το προσθέσουμε στο export class AppComponent implements OnInit { // ... title$: Observable ; constructor( private titleSvc: TitleService ) {} ngOnInit() { this.title$ = this.titleSvc.title$; } // ... } :

tv-rating-form.component.ts

Και στο TitleService, θα εγχύσουμε το AppComponent:

ExpressionChangedAfterItHasBeenCheckedError

Τέλος, σε // ... constructor( private titleSvc: TitleService ) { } ngOnInit() { this.titleSvc.update('new title!'); } , θα κάνουμε ένεση app.component.html και ενημερώστε τον τίτλο του setTimeout, ο οποίος θα ρίξει ένα setTimeout(() => { this.titleSvc.update('new title!'); }); λάθος.

ExpressionChangedAfterItHasBeenCheckedError

Τώρα μπορούμε να δούμε το λεπτομερές σφάλμα στην κονσόλα dev του προγράμματος περιήγησης και κάνοντας κλικ στο @angular/cdk θα μας δείξει πού βρίσκεται το σφάλμα.

Μπορούμε να διορθώσουμε αυτό το σφάλμα, ολοκληρώνοντας την κλήση υπηρεσίας με npm install @angular/cdk :

tv-rating-form.component.spec.ts

Για να καταλάβετε γιατί το import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { ReactiveFormsModule } from '@angular/forms'; describe('TvRatingFormComponent', () => { let component: TvRatingFormComponent; let fixture: ComponentFixture ; beforeEach(async (() => { TestBed.configureTestingModule({ imports: [ NgbModule, ReactiveFormsModule ], declarations: [TvRatingFormComponent] }).compileComponents(); })); // ... }); συμβαίνει σφάλμα και εξερευνήστε άλλες δυνατότητες, Η θέση του Maxim Koretskyi σχετικά με το θέμα αξίζει να διαβάσετε.

Το Angular Ivy μας επιτρέπει να παρουσιάσουμε λάθη με πιο καθαρό τρόπο και βοηθά στην επιβολή της πληκτρολόγησης TypeScript στον κώδικά μας. Στην ακόλουθη ενότητα, θα καλύψουμε ορισμένα κοινά σενάρια όπου θα εκμεταλλευτούμε το Ivy και τον εντοπισμό σφαλμάτων.

Γράφοντας ένα τεστ για την εφαρμογή Angular 9 με εξαρτήματα εξαρτημάτων

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

Το API καλωδίωσης στοιχείων περιλαμβάνεται στο ComponentHarness βιβλιοθήκη, οπότε ας το εγκαταστήσουμε πρώτα στο έργο μας:

TvRatingForm

Τώρα μπορούμε να γράψουμε ένα τεστ και να αξιοποιήσουμε τις πλεξούδες εξαρτημάτων. Στο NgbRating, ας ξεκινήσουμε τη δοκιμή:

ComponentHarness

Στη συνέχεια, ας εφαρμόσουμε ένα static για το συστατικό μας. Θα δημιουργήσουμε δύο ιμάντες: μία για hostSelector και άλλη για // ... import { ComponentHarness, HarnessLoader } from '@angular/cdk/testing'; import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; class TvRatingFormHarness extends ComponentHarness { static hostSelector = 'app-tv-rating-form'; } class NgbRatingHarness extends ComponentHarness { static hostSelector = 'ngb-rating'; } // ... . TvRatingFormHarness απαιτεί ένα click πεδίο, class TvRatingFormHarness extends ComponentHarness { // ... protected getButton = this.locatorFor('button'); async submit() { const button = await this.getButton(); await button.click(); } } , το οποίο θα πρέπει να λαμβάνει την τιμή του επιλογέα του στοιχείου.

locatorForAll

Για το , θα δημιουργήσουμε έναν επιλογέα για το κουμπί υποβολής και μια συνάρτηση για την ενεργοποίηση ενός rate. Μπορείτε να δείτε πόσο πιο εύκολο γίνεται αυτό.

class NgbRatingHarness extends ComponentHarness { // ... protected getRatings = this.locatorForAll('span:not(.sr-only)'); async rate(value: number) { const ratings = await this.getRatings(); return ratings[value - 1].click(); } }

Στη συνέχεια, θα προσθέσουμε μεθόδους για να ορίσετε μια βαθμολογία. Εδώ χρησιμοποιούμε TvRatingFormHarness για να αναζητήσετε όλα τα NgbRatingHarness στοιχεία που αντιπροσωπεύουν τα αστέρια στα οποία μπορεί να κάνει κλικ ο χρήστης. Το TvRatingFormHarness Η συνάρτηση λαμβάνει όλα τα αστέρια και τα κλικ όλων των πιθανών αξιολογήσεων που αντιστοιχούν στην τιμή που έχει σταλεί

class TvRatingFormHarness extends ComponentHarness { // ... getRating = this.locatorFor(NgbRatingHarness); // ... }

Το τελευταίο κομμάτι που λείπει είναι η σύνδεση describe('TvRatingFormComponent', () => { // ... it('should pop an alert on submit', async () => { spyOn(window, 'alert'); const select = fixture.debugElement.query(By.css('select')).nativeElement; select.value = 'Lost'; select.dispatchEvent(new Event('change')); fixture.detectChanges(); const harness = await TestbedHarnessEnvironment.harnessForFixture(fixture, TvRatingFormHarness); const rating = await harness.getRating(); await rating.rate(1); await harness.submit(); expect(window.alert).toHaveBeenCalledWith('{'tvShow':'Lost','rating':1}'); }); }); έως select. Για να το κάνουμε αυτό, προσθέτουμε απλώς τον εντοπιστή στο app.component.spec.ts τάξη.

title

Τώρα, ας γράψουμε τη δοκιμή μας:

null

Παρατηρήστε ότι για το describe('AppComponent', () => { // ... it(`should have as title 'tv-show-rating'`, () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; expect(app.title).toEqual(null); }); }); μέσα στη φόρμα, δεν εφαρμόσαμε τη ρύθμιση της τιμής του μέσω καλωδίου. Αυτό συμβαίνει επειδή το API εξακολουθεί να μην υποστηρίζει την επιλογή. Αλλά αυτό μας δίνει την ευκαιρία να συγκρίνουμε εδώ πώς φαινόταν η αλληλεπίδραση με στοιχεία πριν από τις εξαρτήσεις εξαρτημάτων.

Ένα τελευταίο πράγμα πριν εκτελέσουμε τις δοκιμές. Πρέπει να διορθώσουμε ng test από την ενημέρωση npm install @angular/fire firebase να είναι environment.ts.

environment.prod.ts

Τώρα, όταν τρέχουμε export const environment = { // ... firebase: { apiKey: '{your-api-key}', authDomain: '{your-project-id}.firebaseapp.com', databaseURL: 'https://{your-project-id}.firebaseio.com', projectId: '{your-project-id}', storageBucket: '{your-project-id}.appspot.com', messagingSenderId: '{your-messaging-id}', appId: '{your-app-id}' } }; , η δοκιμή μας περνά.

Επιστροφή στην εφαρμογή μας Angular 9: Αποθήκευση δεδομένων σε μια βάση δεδομένων

Ας ολοκληρώσουμε το φροντιστήριο Angular 9 προσθέτοντας μια σύνδεση στο Firestore και αποθηκεύοντας τις βαθμολογίες στη βάση δεδομένων.

Για να το κάνουμε αυτό, πρέπει να το κάνουμε δημιουργήστε ένα έργο Firebase . Στη συνέχεια, θα εγκαταστήσουμε τις απαιτούμενες εξαρτήσεις.

app.module.ts

Στις ρυθμίσεις έργου του Firebase Console, θα λάβουμε τη διαμόρφωσή του και θα τις προσθέσουμε στο import { AngularFireModule } from '@angular/fire'; import { AngularFirestoreModule } from '@angular/fire/firestore'; import { environment } from '../environments/environment'; @NgModule({ // ... imports: [ // ... AngularFireModule.initializeApp(environment.firebase), AngularFirestoreModule, ], // ... }) και tv-rating-form.component.ts:

AngularFirestore

Μετά από αυτό, θα εισαγάγουμε τις απαραίτητες ενότητες στο import { AngularFirestore } from '@angular/fire/firestore'; export class TvRatingFormComponent implements OnInit { constructor( // ... private af: AngularFirestore, ) { } async submit(event: any) { this.form.disable(); await this.af.collection('ratings').add(this.form.value); this.form.enable(); this.form.reset(); } } :

AppComponent

Στη συνέχεια, στο app.component.ts, θα εγχύσουμε το import { AngularFirestore } from '@angular/fire/firestore'; export class AppComponent implements OnInit { // ... ratings$: Observable; constructor( // ... private af: AngularFirestore ) { } ngOnInit() { // ... this.ratings$ = this.af.collection('ratings').valueChanges(); } } υπηρεσία και αποθηκεύστε μια νέα βαθμολογία κατά την υποβολή της φόρμας:

app.component.html

Τώρα, όταν πηγαίνουμε στο Firebase Console, θα δούμε το νέο στοιχείο.

Τέλος, ας απαριθμήσουμε όλες τις βαθμολογίες σε // ...

{{rating.tvShow}} ({{rating.rating}})

. Για να το κάνουμε αυτό, σε

|_+_|

, θα λάβουμε τα δεδομένα από τη συλλογή:

|_+_|

… Και σε

|_+_|

, θα προσθέσουμε μια λίστα αξιολογήσεων:

|_+_|

Έτσι μοιάζει η εφαρμογή εκμάθησης Angular 9 όταν συγκεντρώνονται όλα.

Angular 9 and Angular Ivy: Καλύτερη ανάπτυξη, καλύτερες εφαρμογές και καλύτερη συμβατότητα

Σε αυτό το σεμινάριο Angular 9, καλύψαμε τη δημιουργία μιας βασικής φόρμας, την αποθήκευση δεδομένων στο Firebase και την ανάκτηση στοιχείων από αυτήν.

στοιχεία & αρχές σχεδιασμού

Στην πορεία, είδαμε ποιες βελτιώσεις και νέες δυνατότητες περιλαμβάνονται στα Angular 9 και Angular Ivy. Για μια πλήρη λίστα, μπορείτε να ελέγξετε τα επίσημα Angular blog's τελευταία δημοσίευση .

---

Ως συνεργάτης του Google Cloud, οι ειδικοί της ApeeScape που είναι πιστοποιημένοι από την Google είναι διαθέσιμοι σε εταιρείες κατα παραγγελια για τα πιο σημαντικά έργα τους.

Κατανόηση των βασικών

Σε τι χρησιμοποιείται το Angular;

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

Ποια είναι η τελευταία έκδοση του Angular;

Η τελευταία έκδοση του Angular είναι το Angular 10, το οποίο ενημερώνει το CLI και το Angular Material εκτός από το πλαίσιο. (Πριν από αυτό, το Angular 9 ήταν η πρώτη έκδοση που ενεργοποίησε τον μεταγλωττιστή Angular Ivy από προεπιλογή.)

Γιατί το Angular είναι τόσο δημοφιλές;

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

Αξίζει να μάθεις το Angular;

Ναί. Το Angular είναι ένα από τα τρία πιο δημοφιλή πλαίσια και έχει μια τεράστια και ενεργή κοινότητα. Η υποστήριξη από την Google καθιστά πιθανό να είναι μαζί μας για πολλά ακόμη χρόνια.

Τι είναι το Ivy στο Angular;

Το Angular Ivy είναι το νέο Angular compiler. Είναι το αποτέλεσμα μιας μεγάλης αναπαράστασης της ομάδας Angular που εργάστηκε για δύο χρόνια. Θέτει τα θεμέλια για πολλές βελτιώσεις, επιτρέποντας στην Angular να παραμείνει ενημερωμένη με τις τελευταίες καινοτομίες στην ανάπτυξη ιστού.

Πώς μπορώ να ενεργοποιήσω το Angular Ivy;

Στο Angular 9, το Ivy είναι ενεργοποιημένο από προεπιλογή. Είναι επίσης δυνατό να ενεργοποιήσετε το Ivy στο Angular 8, αλλά εάν δεν χρησιμοποιείτε ακόμα το Angular 9, η πρόταση είναι να κάνετε αναβάθμιση στην έκδοση 9 για να ενεργοποιήσετε το Ivy.