Hvad er der inden for Angular 8?

Indhold

• 01. Kør en versionskontrol
• 02. Installer kantet
• 03. Opret et projektskelet
• 04. Sele forskelbelastning
• 05. ... og se resultaterne
• 06. Gyder en webarbejder
• 07. Udforsk koden
• 08. Sæt stilladser op
• 09. Bare rolig over manglen på konstruktør
• 10. Udfør en lille kompilkørsel
• 11. ... og find output
• 12. Gå på arbejde
• 13. Udforsk Ivy
• 14. Prøv ændret ng-behandling
• 15. Nyd forbedret migration
• 16. Udforsk kontrol af arbejdsområdet
• 17. Fremskynd processen
• 18. Undgå at gå døde
• 19. Se på ændringsloggen

Angular 8 er den nyeste version af Googles Angular - en af ​​de bedste JavaScript-rammer rundt. I denne artikel gennemgår vi det, der er specielt ved Angular 8, og viser dig, hvordan du kommer i gang. Først et kort blik tilbage på, hvad der er sket med rammen hidtil.

Angular's introduktion førte til et paradigmeskift i webudvikling: mens de fleste biblioteker begrænsede sig til at yde support til udviklere med relativt begrænset arkitektonisk indvirkning, gik Angular's udviklerhold i den anden retning. Deres produkt tvinger dig til at bruge en bestemt arkitektur med afvigelser lige fra vanskelige til kommercielt meningsløse. Faktisk kører de fleste vinkelkoder gennem en relativt kompleks transpileringsværktøjskæde, før den nogensinde rammer browseren.

På grund af Angular's enorme succes, både inden for og uden for Google Inc, er udviklingen - stort set - stabiliseret. Det betyder, at ændringer i kodebrydning er få, mens de halvårlige opgraderinger er fokuseret på at tilpasse rammen til ændringer i webbrowsinglandskabet.

I tilfælde af Angular 8 implementeres f.eks. En ny JavaScript-compiler (omend stadig eksperimentelt). Det optimerer genereret kompatibilitetskode til at være betydeligt mindre og hurtigere på bekostning af ældre browsere. Desuden er Web Worker support integreret for at øge Angular's behandlingsevne. Kort sagt er der meget at se - så lad os dykke lige ind.

Hvis du hellere vil designe et websted uden kode, kan du prøve en af ​​disse nemme websiteudviklere. Og for at få tingene til at køre endnu glattere, skal du få din webhostingtjeneste lige.

01. Kør en versionskontrol

Angular's værktøjskæde lever inden for NodeJS-miljøet. I skrivende stund er Node.js 10.9 eller bedre nødvendig - hvis du befinder dig i en ældre version, skal du besøge Node.js-webstedet og få en opgradering. Koden nedenfor viser versionens status på denne maskine.

tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0

02. Installer kantet

Angular's værktøjskæde findes i et kommandolinjeprogram, der hedder ng. Det kan installeres via den velkendte NPM.

tamhan @ TAMHAN18: ~ $ sudo npm install-g @ vinkel / cli tamhan @ TAMHAN18: ~ $ ng version

Vær omhyggelig med at besvare spørgsmålet vist på billedet nedenfor.

At få versionoplysninger ud af værktøjet er ret vanskeligt - ikke kun er syntaksen unik, men output er også detaljeret (se billedet nedenfor).

03. Opret et projektskelet

ng genererer vinklet stillads til os. I de følgende trin vil vi tilføje ruting og bruge Sass til CSS-transpilation. Skulle implementeringen mislykkes af en eller anden grund, skal du tømme arbejdsmappen og genstarte ng med superbrugerrettigheder.

tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng ny arbejdstest

04. Sele forskelbelastning

Den nye version af Angular optimerer bagudkompatibilitetskode til reduceret effekt - en fil kaldet browsersliste lader dig beslutte, hvilke browsere der skal understøttes. Åben browsersliste og fjern ordet ikke foran IE 9 til IE11.

. . . > 0,5% sidste 2 versioner Firefox ESR ikke død IE 9-11 # For IE 9-11 support skal du fjerne 'ikke'.

05. ... og se resultaterne

Bestil en kompilering af projektet, skift til distributionsmappen og rens unødvendige kortfiler.

tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls

Påkald træ for at se resultaterne - ng opretter flere versioner af forskellige kodefiler (se billedet nedenfor).

06. Gyder en webarbejder

Webarbejdere lader JavaScript gå ind i den sidste grænse for native applikationer: massiv parallel behandling af opgaver. Med Angular 8 kan en webarbejder oprettes lige fra komforten til ng kommandolinjeværktøj.

tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng generer webarbejder myworker CREATE tsconfig.worker.json (212 bytes) CREATE src / app / myworker.worker.ts (157 bytes) UPDATE tsconfig.app.json (236 bytes) ) OPDATER angular.json (3640 bytes)

07. Udforsk koden

ngProduktion ser sandsynligvis skræmmende ud ved første øjekast. Åbning af filen src / app / myworker.worker.ts i en kodeditor efter eget valg afslører kode, som du bør kende godt fra Webarbejder specifikation. I princippet modtager arbejdstageren beskeder og behandler dem efter behov.

/// reference lib = "webworker" /> addEventListener (’meddelelse’, ({data}) => {const respons = `medarbejderrespons på $ {data}`; postMessage (svar);});

08. Sæt stilladser op

Vinkelapplikationer består af komponenter. Afskydning af vores webarbejder gøres bedst inden i AppComponent, som udvides til at omfatte en lytter til OnInit begivenhed. Indtil videre udsender den kun statusoplysninger.

importer {Component, OnInit} fra '@ vinkel / kerne'; @Component ({..}) Eksportklasse AppComponent implementerer OnInit {title = 'workertest'; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}

09. Bare rolig over manglen på konstruktør

Erfarne TypeScript-udviklere spørger sig selv, hvorfor vores kode ikke bruger den konstruktør, der leveres af programmeringssproget. Årsagen til det er, at ngOnInit er en livscyklusbegivenhed, der fyres, hver gang en initialiseringshændelse finder sted - dette behøver ikke at være korreleret med klasseopkald.

10. Udfør en lille kompilkørsel

På dette tidspunkt er programmet klar til at køre. Vi udfører det fra serveren inde i ng, som kan påberåbes via tjenekommandoen. Et pænt aspekt ved denne tilgang er, at programmet opdager ændringer og kompilerer projektet igen.

tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve

Se figuren for at se dette i aktion i billedet nedenfor.

11. ... og find output

ng server putputs adressen på den lokale webserver, som normalt er http: // localhost: 4200 /. Åbn websiden, og åbn udviklerværktøjerne for at se statusoutputtet. Husk det console.log sender data til browserkonsollen og efterlader konsollen for NodeJS-instansen uberørt.

12. Gå på arbejde

På dette tidspunkt opretter vi en instans af arbejdstageren og giver den en besked. Dens resultater vises derefter i browserkonsollen.

if (typeof Worker! == ’undefined’) {// Opret en ny const worker = ny Worker (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (’side fik besked: $ {data }’); }; worker.postMessage ('hej'); } andet {console.log ("Ingen medarbejderstøtte"); }

13. Udforsk Ivy

Fremtidige versioner af Angular bruger en mere avanceret kompilator, hvilket fører til endnu mindre visninger. Mens produktet endnu ikke er færdigt, kan et vedbend-aktiveret skelet gydes via ng nyt vedbens-projekt - aktiver-vedbend. Alternativt kan du ændre compilerindstillingerne som vist i uddraget.

"angularCompilerOptions": {"enableIvy": sandt}

Et advarselsord: Ivy fører til fantastiske størrelsesreduktioner, men det er ikke gratis. Produktet skal endnu ikke stabiliseres, så det anbefales ikke at bruge det i produktive miljøer.

14. Prøv ændret ng-behandling

Angular's ng kommandolinjeværktøj brugt underordnede scripts internt i nogen tid. Angular 8 øger ante ved, at du nu også kan bruge denne facilitet til at køre dine egne opgaver, når din applikation er samlet og kompileret.

"arkitekt": {"build": {"builder": "@ angular-devkit / build-angular: browser",

En pæn anvendelse af ng scripts involverer direkte upload af applikationer til cloud-tjenester. Git-arkivet giver et nyttigt script, der uploader dit arbejde til en Firebase-konto.

15. Nyd forbedret migration

Udviklere, der migrerer væk fra Angular 1.x, også kendt som AngularJS, har haft en god del af problemerne med at få navigatoren til at arbejde lige i 'kombinerede' applikationer. Den nye Unified Location Service sigter mod at gøre denne proces glattere.

16. Udforsk kontrol af arbejdsområdet

Store projekter drager fordel af evnen til at ændre arbejdsområdestrukturen dynamisk. Dette gøres via den nye Workspace API introduceret i Angular 8.0 - uddraget, der ledsager dette trin, giver et hurtigt overblik over adfærden.

async-funktion demonstrerer () {const host = workspaces. createWorkspaceHost (ny NodeJsSyncHost ()); const workspace = afventer arbejdsområder. readWorkspace ('sti / til / workspace / directory /', vært); const project = workspace.projects. få ('min-app'); const buildTarget = project.targets. få ('bygge'); buildTarget.options.optimization = sand; afventer workspaces.writeWorkspace (arbejdsområde, vært); }

17. Fremskynd processen

Opbygning af store JavaScript-kodebaser bliver kedeligt. Fremtidige versioner af AngularJS vil bruge Googles Bazel build-system til at fremskynde processen - desværre var det i skrivende stund ikke klar til primetime.

18. Undgå at gå døde

Selvom Google er yderst forsigtig med ikke at bryde kode, skal nogle funktioner simpelthen fjernes, da de ikke længere er nødvendige. Tjek denne afskrivningsliste for at lære mere om funktioner, der bør undgås.

19. Se på ændringsloggen

Som altid kan en artikel aldrig gøre ret til en hel udgivelse. Heldigvis giver denne ændringslog en detaljeret liste over alle ændringerne - bare hvis du nogensinde har lyst til at kontrollere pulsen på en funktion, der er særlig kær for dig.

Har du mange filer klar til upload til dit websted? Sikkerhedskopier dem i den mest pålidelige cloud-opbevaring.

Denne artikel blev oprindeligt offentliggjort i kreativt webdesignmagasin Webdesigner.