'Katru gadu internets pārtrauc,' teikts, un izstrādātājiem parasti ir jāiet un jālabo. Ar ilgi gaidīto Stūraina varētu domāt, ka tas ir piemērojams 9. versijai, un lietotnēm, kas izstrādātas iepriekšējās versijās, būs jāveic liels migrācijas process.

Bet tas tā nav! Angular komanda pilnībā pārveidoja savu kompilatoru, kā rezultātā tika izveidota ātrāka būvēšana, ātrāki testa braucieni, mazāki saišķa izmēri un pats galvenais - atgriezeniska savietojamība ar vecākām versijām. Izmantojot Angular 9, izstrādātāji būtībā saņem visas privilēģijas bez grūtībām.

Šajā Angular 9 apmācībā mēs izveidosim Angular lietojumprogrammu no jauna. Mēs izmantosim dažas no jaunākajām Angular 9 funkcijām un pārdomāsim citus uzlabojumus.

9 leņķa apmācība: Sākot ar jaunu leņķa lietojumprogrammu

Sāksim ar mūsu Angular projekta piemēru. Vispirms instalēsim jaunāko Angular CLI versiju:

npm install -g @angular/cli

Mēs varam pārbaudīt leņķa CLI versiju, palaižot ng version

Pēc tam izveidosim leņķa lietojumprogrammu:

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

Mēs izmantojam divus argumentus mūsu ng new komanda:

• --create-application=false liks CLI ģenerēt tikai darbvietas failus. Tas palīdzēs mums labāk sakārtot kodu, kad mums ir nepieciešama vairāk nekā viena lietotne un vairākas bibliotēkas.
• --strict pievienos stingrākus noteikumus, lai ieviestu vairāk TypeScript rakstīšanas un kodu tīrības.

Tā rezultātā mums ir pamata darbvietas mape un faili.

Tagad pievienosim jaunu lietotni. Lai to izdarītu, mēs darbosimies:

ng generate application tv-show-rating

Mums tiks piedāvāts:

? 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

Ja palaidīsim ng serve, mēs redzēsim, kā lietotne darbojas ar sākotnējām sastatnēm.

Ja palaidīsim ng build --prod, mēs varēsim redzēt izveidoto failu sarakstu.

Mums ir divas katra faila versijas. Viens ir saderīgs ar mantotajām pārlūkprogrammām, bet otrs ir apkopots mērķauditorijas atlasei ES2015, kas izmanto jaunākas API un prasa mazāk polifilu, lai palaistu pārlūkprogrammās.

Viens liels Angular 9 uzlabojums ir saišķa izmērs. Pēc Angular komandas teiktā, lielajām lietotnēm var redzēt samazinājumu līdz 40%.

Jaunizveidotās lietotnes paketes lielums ir diezgan līdzīgs Angular 8 izmēram, taču, pieaugot jūsu lietotnei, redzēsit, ka saišķa izmērs kļūst mazāks salīdzinājumā ar iepriekšējām versijām.

Vēl viena iezīme, kas ieviesta 9. Leņķī, ir iespēja mūs brīdināt, ja kāds no komponents stila CSS faili ir lielāki par noteikto slieksni.

kāda ir dizaina hierarhija

Tas mums palīdzēs noķert slikta stila importu vai milzīgus komponentu stila failus.

Veidlapas pievienošana TV pārraižu vērtēšanai

Pēc tam mēs pievienosim veidlapu, lai novērtētu TV pārraides. Tam vispirms instalēsim bootstrap un ng-bootstrap:

npm install bootstrap @ng-bootstrap/ng-bootstrap

Vēl viens Angular 9 uzlabojums ir i18n (internacionalizācija). Iepriekš izstrādātājiem bija jāveic pilna būvēšana katrai lietotnes lokalizācijai. Tā vietā Angular 9 ļauj mums vienreiz izveidot lietotni un ģenerēt visus i18n failus pēc izveides procesā, ievērojami samazinot būvēšanas laiku. Tā kā ng-bootstrap ir atkarīgs no i18n, mēs savam projektam pievienosim jaunu paketi:

ng add @angular/localize

Tālāk mēs pievienosim Bootstrap motīvu mūsu lietotnes styles.scss

@import '~bootstrap/scss/bootstrap';

Mēs iekļausim NgbModule un ReactiveFormsModule mūsu AppModule ieslēgts app.module.ts:

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

Pēc tam mēs atjaunināsim app.component.html ar mūsu veidlapas pamata režģi:

ng g c TvRatingForm

Un ģenerējiet veidlapas komponentu:

tv-rating-form.component.html

Atjaunināsim TV SHOW {{tvShow.name}} OK un pievienojiet veidlapu, lai novērtētu TV pārraides.

tv-rating-form.component.ts

Un // ... 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(); } } izskatīsies šādi:

app.component.html

Visbeidzot, pievienosim veidlapu ng serve

tsconfig.json

Šajā brīdī mums ir dažas UI pamata funkcionalitātes. Tagad, ja mēs palaistu { // ... 'angularCompilerOptions': { 'fullTemplateTypeCheck': true, 'strictInjectionParameters': true, 'strictTemplates': true } } atkal mēs to varam redzēt darbībā.

Pirms dodamies tālāk, apskatīsim dažas interesantas jaunas Angular 9 funkcijas, kas tika pievienotas, lai palīdzētu atkļūdot. Tā kā tas ir ļoti izplatīts uzdevums mūsu ikdienas darbā, ir vērts zināt, kas ir mainījies, lai mazliet atvieglotu mūsu dzīvi.

Atkļūdošana ar Angular 9 Ivy

Vēl viens liels uzlabojums, kas ieviests Angular 9 un Angular Ivy, ir atkļūdošanas pieredze. Tagad kompilators var atklāt vairāk kļūdu un iemest tās “lasāmākā” veidā.

Apskatīsim to darbībā. Vispirms mēs aktivizēsim veidņu reģistrēšanu tvShows

name

Ja mēs atjaunināsim title masīvs un pārdēvēt tvShows = [ { title: 'Better call Saul!' }, { title: 'Breaking Bad' }, { title: 'Lost' }, { title: 'Mad men' } ]; uz @Input():

@Input()

... mēs saņemsim kļūdu no sastādītāja.

Šāda veida pārbaude ļaus mums novērst drukas kļūdas un nepareizu TypeScript tipu lietošanu.

geštalta uztveres organizācijas princips

Leņķiskās efejas apstiprināšana tv-rating-form.component.ts

Vēl viena laba pārbaude, ko mēs saņemam, ir @Input() title: string; . Piemēram, mēs to varam pievienot vietnei app.component.html:

app.component.ts

… Un iesiet to // ... export class AppComponent { title = null; }

$any()

… Un pēc tam mainiet any tāpat kā:

title

Veicot šīs trīs izmaiņas, no kompilatora tiks iegūta cita veida kļūda.

Gadījumā, ja mēs vēlamies to apiet, mēs var izmantot @Input() title: string | null ; uz veidnes, lai vērtību nodotu uz ExpressionChangedAfterItHasBeenCheckedError un izlabojiet kļūdu:

ExpressionChangedAfterItHasBeenCheckedError

Pareizais veids, kā to novērst, tomēr būtu ExpressionChangedAfterItHasBeenCheckedError uz anulējamas formas:

ng g s Title

BehaviorSubject leņķiskajā 9 efeja

Viena no visvairāk briesmīgajām kļūdām leņķiskajā attīstībā ir Observable Par laimi, Ivy kļūdu izskaidro skaidrāk, tādējādi atvieglojot problēmas atrašanu.

Tātad, ieviesīsim export class TitleService { private bs = new BehaviorSubject (''); constructor() {} get title$() { return this.bs.asObservable(); } update(title: string) { this.bs.next(title); } } kļūda. Lai to izdarītu, vispirms mēs izveidosim pakalpojumu:

app.component.html

Pēc tam mēs pievienosim

{ async}

un metodes, lai piekļūtu app.component.ts un radīt jaunu vērtību.

TitleService

Pēc tam mēs to pievienosim export class AppComponent implements OnInit { // ... title$: Observable ; constructor( private titleSvc: TitleService ) {} ngOnInit() { this.title$ = this.titleSvc.title$; } // ... }

tv-rating-form.component.ts

In TitleService ievadīsim AppComponent

ExpressionChangedAfterItHasBeenCheckedError

Visbeidzot, sadaļā // ... constructor( private titleSvc: TitleService ) { } ngOnInit() { this.titleSvc.update('new title!'); } mēs injicēsim app.component.html un atjauniniet setTimeout nosaukumu, kas metīs setTimeout(() => { this.titleSvc.update('new title!'); }); kļūda.

ExpressionChangedAfterItHasBeenCheckedError

Tagad mēs varam redzēt detalizētu kļūdu pārlūka izstrādes konsolē un noklikšķināt uz @angular/cdk parādīs, kur ir kļūda.

Mēs varam novērst šo kļūdu, aptinot servisa zvanu ar npm install @angular/cdk :

tv-rating-form.component.spec.ts

Lai saprastu, kāpēc 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(); })); // ... }); notiek kļūda, un izpētiet citas iespējas, Maksima Koretskija amats par tēmu ir vērts lasīt.

Angular Ivy ļauj mums kļūdas uzrādīt skaidrāk un palīdz ieviest TypeScript rakstīšanu mūsu kodā. Nākamajā sadaļā mēs aplūkosim dažus izplatītākos scenārijus, kuros mēs izmantosim Ivy un atkļūdošanas priekšrocības.

Testa uzrakstīšana mūsu lietotnei Angular 9 ar komponentu jostām

Angular 9 tika ieviesta jauna testēšanas API, ko sauc komponentu jostas . Ideja ir noņemt visus darbus, kas nepieciešami, lai mijiedarbotos ar DOM, padarot to daudz vieglāku darbu un stabilāku vadīšanu.

Komponentu vadu API ir iekļauta ComponentHarness bibliotēku, tāpēc vispirms to instalēsim mūsu projektā:

TvRatingForm

Tagad mēs varam izrakstīt testa un sviras komponentu siksnas. Sadaļā NgbRating iestatīsim testu:

ComponentHarness

Pēc tam ieviesīsim static mūsu komponentam. Mēs izveidosim divas iejūgus: vienu hostSelector un otru // ... 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 nepieciešama a click lauks class TvRatingFormHarness extends ComponentHarness { // ... protected getButton = this.locatorFor('button'); async submit() { const button = await this.getButton(); await button.click(); } } , kuram jāņem komponenta selektora vērtība.

locatorForAll

Mūsu gadījumā mēs izveidosim pogu Iesniegt atlasītāju un funkciju, lai aktivizētu rate Jūs varat redzēt, cik daudz vieglāk tas tiek īstenots.

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(); } }

Pēc tam mēs pievienosim metodes, kā iestatīt vērtējumu. Šeit mēs izmantojam TvRatingFormHarness meklēt visus NgbRatingHarness elementi, kas attēlo zvaigznes, uz kurām lietotājs var noklikšķināt. TvRatingFormHarness funkcija tikai iegūst visas iespējamās vērtējumu zvaigznes un noklikšķina uz tās, kas atbilst nosūtītajai vērtībai.

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

Pēdējais trūkstošais gabals ir savienojums 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}'); }); }); uz select. Lai to izdarītu, mēs vienkārši pievienojam lokatoru app.component.spec.ts klasē.

title

Tagad uzrakstīsim savu testu:

null

Ievērojiet, ka mūsu describe('AppComponent', () => { // ... it(`should have as title 'tv-show-rating'`, () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.componentInstance; expect(app.title).toEqual(null); }); }); veidlapā mēs neieviesām tā vērtības iestatīšanu, izmantojot zirglietu. Tas tāpēc, ka API joprojām neatbalsta opcijas izvēli. Bet tas dod mums iespēju šeit salīdzināt, kā mijiedarbība ar elementiem izskatījās pirms komponentu iejūgiem.

Vēl viena lieta, pirms mēs veicam testus. Mums jālabo ng test kopš mēs atjauninājām npm install @angular/fire firebase būt environment.ts.

cik jūs maksājat

environment.prod.ts

Tagad, kad mēs skrienam 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}' } }; , mūsu pārbaude iztur.

Atpakaļ uz mūsu Angular 9 piemēru: datu saglabāšana datu bāzē

Apkoposim mūsu Angular 9 apmācību, pievienojot savienojumu ar Firestore un saglabājot vērtējumus datu bāzē.

Lai to izdarītu, mums tas ir jādara izveidojiet Firebase projektu . Pēc tam mēs instalēsim nepieciešamās atkarības.

app.module.ts

Firebase Console projekta iestatījumos mēs iegūsim tā konfigurāciju un pievienosim to vietnei import { AngularFireModule } from '@angular/fire'; import { AngularFirestoreModule } from '@angular/fire/firestore'; import { environment } from '../environments/environment'; @NgModule({ // ... imports: [ // ... AngularFireModule.initializeApp(environment.firebase), AngularFirestoreModule, ], // ... }) un tv-rating-form.component.ts:

AngularFirestore

Pēc tam importēsim nepieciešamos moduļus mapē 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

Pēc tam app.component.ts ievadīsim 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(); } } pakalpojumu un saglabājiet jaunu vērtējumu, iesniedzot veidlapu:

app.component.html

Tagad, pārejot uz Firebase konsoli, tiks parādīts jaunizveidotais vienums.

atpūsties api mezglā js

Visbeidzot, uzskaitīsim visus vērtējumus // ...

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

. Lai to izdarītu, sadaļā

|_+_|

mēs iegūsim datus no kolekcijas:

|_+_|

… Un sadaļā

|_+_|

pievienosim vērtējumu sarakstu:

|_+_|

Tas izskatās mūsu Angular 9 apmācības lietotne, kad tas viss ir salikts kopā.

Angular 9 un Angular Ivy: labāka attīstība, labākas lietotnes un labāka saderība

Šajā Angular 9 apmācībā aplūkojām pamata veidlapas izveidi, datu saglabāšanu Firebase un vienumu izgūšanu no tā.

Pa ceļam mēs redzējām, kādi uzlabojumi un jaunas funkcijas ir iekļautas Angular 9 un Angular Ivy. Pilnu sarakstu varat apskatīt oficiālajā Angular emuārā jaunākā izlaiduma ziņa .

---

Kā Google Cloud partneris ApeeScape Google sertificētie eksperti ir pieejami uzņēmumiem pēc pieprasījuma viņu svarīgākajiem projektiem.

Izpratne par pamatiem

Kāpēc lieto Angular?

Angular ir JavaScript sistēma, kas palīdz izstrādātājiem viegli izveidot ātras tīmekļa un mobilās lietojumprogrammas. Tas nāk ar iepriekš izveidotu funkcionalitāti, lai palīdzētu izstrādātājiem ātri sākt darboties.

Kāda ir jaunākā Angular versija?

Angular jaunākā versija ir Angular 10, kas papildus ietvaram atjaunina CLI un Angular Material. (Pirms tam Angular 9 bija pirmā versija, kas pēc noklusējuma iespējoja Angular Ivy kompilatoru.)

Kāpēc Angular ir tik populārs?

Angular tika izveidots 2013. gadā un ieguva savu popularitāti kā pilnībā aprīkots ietvars, piegādājot kopā ar daudziem komponentiem, kas visbiežāk nepieciešami tīmekļa izstrādātājiem.

Vai Angular ir vērts mācīties?

Jā. Angular ir viens no trim populārākajiem ietvariem, un tajā ir milzīga un aktīva sabiedrība. Ja to atbalsta Google, iespējams, ka būsiet kopā ar mums vēl daudzus gadus.

Kas ir Īvija leņķiskā?

Angular Ivy ir jauns leņķa kompilators. Tas ir rezultāts tam, ka Angular komanda nopietni pārstrādāja divus gadus. Tas ir pamats daudziem uzlabojumiem, ļaujot Angular sekot līdzi jaunākajām tīmekļa izstrādes inovācijām.

Kā iespējot Angular Ivy?

Programmā Angular 9 efeja pēc noklusējuma ir iespējota. Ir iespējams iespējot Ivy arī Angular 8, taču, ja jūs vēl neizmantojat Angular 9, ieteicams jaunināt uz 9. versiju, lai iespējotu Ivy.