Vad finns i Angular 8?

Innehåll

• 01. Kör en versionskontroll
• 02. Installera vinkel
• 03. Skapa ett projektskelett
• 04. Sele differentiell belastning
• 05. ... och se resultaten
• 06. Spawn en webbarbetare
• 07. Utforska koden
• 08. Ställ in ställningar
• 09. Oroa dig inte för bristen på konstruktör
• 10. Utför en liten kompileringskörning
• 11. ... och hitta utdata
• 12. Gå till jobbet
• 13. Utforska Ivy
• 14. Prova modifierad ng-bearbetning
• 15. Njut av förbättrad migration
• 16. Utforska arbetsytans kontroll
• 17. Påskynda processen
• 18. Undvik att gå döda
• 19. Titta på ändringsloggen

Angular 8 är den senaste versionen av Googles Angular - en av de bästa JavaScript-ramarna. I den här artikeln går vi igenom det som är speciellt med Angular 8 och visar dig hur du kommer igång. Först en kort återblick över vad som har hänt med ramverket hittills.

Angular introduktion ledde till ett paradigmskifte i webbutveckling: medan de flesta bibliotek begränsade sig till att ge stöd till utvecklare med relativt begränsad arkitektonisk påverkan, gick Angular utvecklargrupp åt andra hållet. Deras produkt tvingar dig att använda en specifik arkitektur, med avvikelser som sträcker sig från svåra till kommersiellt meningslösa. Faktum är att de flesta vinkelkoder går igenom en relativt komplex transpileringsverktygskedja innan den någonsin träffar webbläsaren.

På grund av Angular enorma framgång, både inom och utanför Google Inc, har utvecklingen - i stort sett - stabiliserats. Detta innebär att kodändringar är få, medan de halvårliga uppgraderingarna är inriktade på att anpassa ramverket till förändringar i webbläsningslandskapet.

När det gäller Angular 8, till exempel, distribueras en ny JavaScript-kompilator (om än fortfarande experimentellt). Det optimerar genererad kompatibilitetskod så att den blir betydligt mindre och snabbare på bekostnad av äldre webbläsare. Dessutom är Web Worker-support integrerat för att öka Angular's bearbetningskapacitet. Kort sagt, det finns mycket att se - så låt oss dyka in.

Om du hellre vill utforma en webbplats utan kod kan du prova en av dessa enkla webbplatsbyggare. Och för att få saker att fungera ännu smidigare, få din webbhotell rätt.

01. Kör en versionskontroll

Angular's verktygskedja lever i NodeJS-miljön. När detta skrivs krävs Node.js 10.9 eller bättre - om du befinner dig i en äldre version, besök Node.js webbplats och få en uppgradering. Koden nedan visar versionsstatus på denna maskin.

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

02. Installera vinkel

Angular's verktygskedja finns i ett kommandoradsverktyg som heter ng. Den kan installeras via den välkända NPM.

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

Var försiktig med att svara på frågan som visas i bilden nedan.

Att få versioninfo ur verktyget är ganska svårt - inte bara är syntaxen unik, men utdata är också omfattande (se bilden nedan).

03. Skapa ett projektskelett

ng genererar vinkelställning till oss. I följande steg vill vi lägga till routing och använda Sass för CSS-transpilation. Om distributionen misslyckas av någon anledning, töm arbetskatalogen och starta om ng med superanvändares rättigheter.

tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng nytt arbetstest

04. Sele differentiell belastning

Den nya versionen av Angular optimerar bakåtkompatibilitetskoden för minskad påverkan - en fil som heter webbläsarlista låter dig bestämma vilka webbläsare som ska stödjas. Öppna webbläsarlista och ta bort ordet inte framför IE 9 till IE11.

. . . > 0,5% senaste 2 versionerna Firefox ESR inte död IE 9-11 # För IE 9-11-stöd, ta bort 'inte'.

05. ... och se resultaten

Beställ en sammanställning av projektet, byt till distributionsmappen och rensa onödiga kartfiler.

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

Anropa träd för att se resultaten - ng skapar flera versioner av olika kodfiler (se bilden nedan).

06. Spawn en webbarbetare

Webbarbetare låter JavaScript komma in i sista gränsen för inbyggda applikationer: massivt parallell bearbetning av uppgifter. Med Angular 8 kan en webbarbetare skapas direkt från ng kommandoradsverktyg.

tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng generera webbarbetare myworker CREATE tsconfig.worker.json (212 bytes) CREATE src / app / myworker.worker.ts (157 bytes) UPPDATERA tsconfig.app.json (236 bytes) ) UPPDATERA angular.json (3640 byte)

07. Utforska koden

ngProduktionen kommer sannolikt att se skrämmande ut vid första anblicken. Öppna filen src / app / myworker.worker.ts i en kodredigerare som valts avslöjar kod som du borde känna väl från Webbarbetare Specifikation. I princip tar arbetaren emot meddelanden och bearbetar dem efter behov.

/// referens lib = "webworker" /> addEventListener (’meddelande’, ({data}) => {const response = `arbetarens svar på $ {data}`; postMessage (svar);});

08. Ställ in ställningar

Vinkelapplikationer består av komponenter. Att avfyra vår webbarbetare görs bäst inom AppComponent, som utvidgas till att omfatta en lyssnare för OnInit händelse. För närvarande kommer den endast att avge statusinformation.

importera {Component, OnInit} från '@ vinkel / kärna'; @Component ({..}) Exportklass AppComponent implementerar OnInit {title = ’workertest’; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}

09. Oroa dig inte för bristen på konstruktör

Erfarna TypeScript-utvecklare frågar sig varför vår kod inte använder konstruktören som tillhandahålls av programmeringsspråket. Anledningen till det är att ngOnInit är en livscykelhändelse som avfyras när en initialiseringshändelse äger rum - detta behöver inte korreleras med klassinrop.

10. Utför en liten kompileringskörning

Vid denna tidpunkt är programmet klart att köras. Vi kommer att köra det från servern inuti ng, som kan åberopas via kommandot serve. En snygg aspekt av detta tillvägagångssätt är att programmet upptäcker förändringar och kompilerar projektet omedelbart.

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

Ta en titt på figuren för att se detta i handling i bilden nedan.

11. ... och hitta utdata

ng servera putputs adressen till sin lokala webbserver, vilket vanligtvis är http: // localhost: 4200 /. Öppna webbsidan och öppna utvecklarverktygen för att se statusutdata. Tänk på att console.log matar ut data till webbläsarkonsolen och lämnar konsolen för NodeJS-instansen orörd.

12. Gå till jobbet

Vid denna tidpunkt skapar vi en instans av arbetaren och förser den med ett meddelande. Dess resultat visas sedan i webbläsarkonsolen.

if (typeof Worker! == ’undefined’) {// Skapa en ny konstarbetare = new Worker (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (sidan fick meddelande: $ {data } ’); }; worker.postMessage ('hej'); } annat {console.log ("Inget arbetarsupport"); }

13. Utforska Ivy

Framtida versioner av Angular kommer att använda en mer avancerad kompilator, vilket leder till ännu mindre vyer. Medan produkten inte är klar ännu kan ett murgröna-aktiverat skelett skapas via ng nytt murgröna-projekt - aktivera-murgröna. Alternativt kan du ändra kompilatorinställningarna som visas i kodavsnittet.

"angularCompilerOptions": {"enableIvy": true}

Ett varningsord: Ivy leder till fantastiska storleksminskningar, men det är inte gratis. Produkten har ännu inte stabiliserats, så det rekommenderas inte att använda den i produktiva miljöer.

14. Prova modifierad ng-bearbetning

Angular's ng kommandoradsverktyget använde underordnade skript internt under en tid. Angular 8 ökar ante genom att du nu också kan använda den här anläggningen för att köra dina egna uppgifter när din applikation är sammansatt och sammanställd.

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

En snygg applikation av ng skript innebär direkt uppladdning av applikationer till molntjänster. Git-arkivet ger ett användbart skript som laddar upp ditt arbete till ett Firebase-konto.

15. Njut av förbättrad migration

Utvecklare som migrerar bort från Angular 1.x, även känd som AngularJS, har haft en stor del av problemen för att få navigatören att fungera rätt i ”kombinerade” applikationer. Den nya Unified Location Service syftar till att göra processen smidigare.

16. Utforska arbetsytans kontroll

Stora projekt drar nytta av förmågan att ändra arbetsytans struktur dynamiskt. Detta görs via det nya Workspace API som introducerades i Angular 8.0 - utdraget som följer med detta steg ger en snabb översikt över beteendet.

async-funktion demonstrera () {const host = arbetsytor. createWorkspaceHost (ny NodeJsSyncHost ()); const workspace = väntar på arbetsytor. readWorkspace (’sökväg / till / arbetsyta / katalog /’, värd); const project = workspace.projects. få ('min-app'); const buildTarget = project.targets. få ('bygg'); buildTarget.options.optimization = true; väntar på workspaces.writeWorkspace (arbetsyta, värd); }

17. Påskynda processen

Att bygga stora JavaScript-kodbaser blir tråkigt. Framtida versioner av AngularJS kommer att använda Googles Bazel-byggsystem för att påskynda processen - tyvärr var det i skrivande stund inte redo för primetime.

18. Undvik att gå döda

Även om Google är mycket försiktig med att inte bryta koden måste vissa funktioner helt enkelt tas bort eftersom de inte längre behövs. Kontrollera denna avskrivningslista för att lära dig mer om funktioner som bör undvikas.

19. Titta på ändringsloggen

Som alltid kan en artikel aldrig göra rättvisa åt en hel release. Lyckligtvis ger denna ändringslogg en detaljerad lista över alla ändringar - bara om du någonsin känner för att kolla pulsen på en funktion som är särskilt kär för dig.

Har du många filer redo att laddas upp till din webbplats? Säkerhetskopiera dem i den mest tillförlitliga molnlagringen.

Den här artikeln publicerades ursprungligen i kreativ tidskrift för webbdesign Webbdesigner.