Vad är inuti vinkel 8?

Feb 7, 2026
Hur
Angular 8
(Bildkredit: Framtida)

Angular 8 är den senaste versionen av Googles vinkel - en av Bästa JavaScript-ramarna runt omkring. I den här artikeln går vi igenom vad som är speciellt om vinkel 8 och visar hur du ska komma igång. Först en kort titt tillbaka på vad som hänt med ramverket hittills.

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

På grund av den enorma framgången med vinkeln, både inuti och utanför Google Inc, har utvecklingen - i stort sett stabiliserat. Det innebär att brytningskodförändringar är få, medan de halvåriga uppgraderingarna är inriktade på att anpassa ramen för förändringar i webbläsningslandskapet.

I fallet med vinkel 8, till exempel, används en ny JavaScript-kompilator (om än fortfarande experimentellt). Det optimerar genererad kompatibilitetskod för att vara betydligt mindre och snabbare på bekostnad av äldre webbläsare. Vidare är webbarbetarstöd integrerat för att öka vinkelens bearbetningsförmåga. Kort sagt, det finns mycket att se - så låt oss dyka rätt in.

Om du hellre vill utforma en webbplats utan kod, prova en av dessa enkla Webbplatsbyggare . Och för att få saker att springa även mjukare, få din webbhotell service rätt.

01. Kör en versionskontroll

Vinkelens verktygschain bor i Nodejs-miljön. Från och med det här skrivandet behövs node.js 10.9 eller bättre - om du befinner dig på en äldre version, Besök node.js webbplats och få en uppgradering. Koden nedan visar versionsstatus på den här maskinen. 

 Tamhan @ Tamhan18: ~ $ nod -v
v12.4.0
Tamhan @ Tamhan18: ~ $ npm -v
6.9.0

02. Montera vinkel

Vinkelens verktygschain bor 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.

Click the icon in the top right to enlarge

Klicka på ikonen längst upp till höger för att förstora (Bildkredit: Tam Hanna)

Att få versionsinformation ut ur verktyget är ganska svårt - inte bara är syntaxen unik, men utgången är också verbose (se bilden nedan).

Click the icon in the top right to enlarge

Klicka på ikonen längst upp till höger för att förstora (Bildkredit: Tam Hanna)

03. Skapa ett projektskelett

ng genererar vinkelställningen för oss. I följande steg vill vi lägga till routing och använda SASS för CSS-transpilering. Skulle utplaceringen misslyckas av någon anledning, töm arbetskatalogen och starta om ng med superuser rättigheter. 

 Tamhan @ Tamhan18: ~ $ MKDIR AngularSpace
Tamhan @ Tamhan18: ~ $ CD-vinkelutrymme /
Tamhan @ Tamhan18: ~ / AngularSpace $ ng ny workerth

04. Harness Differential Loading

Den nya versionen av vinkeloptimerar bakåtriktad kompatibilitetskod för minskad påverkan - en fil som heter Browserslist Låter dig bestämma vilka webbläsare som ska stödjas. Öppen Browserslist och ta bort ordet inte framför IE 9 till IE11. 

. . .
& gt; 0,5%
Senaste 2 versioner
Firefox ESR
inte död
Dvs 9-11 # för IE 9-11-stöd, ta bort "inte".

05. ... och se resultaten

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

 Tamhan @ Tamhan18: ~ / AngularSpace / WorkertStöst $
sudo ng build
Tamhan @ Tamhan18: ~ / AngularSpace / WorkertStest / Dist / WorkertStest $ ls

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

Click the icon in the top right to enlarge

Klicka på ikonen längst upp till höger för att förstora (Bildkredit: Tam Hanna)

06. Gjut en webbarbetare

Webbarbetare Låt Javascript komma in i den sista gränsen för inbyggda program: massivt parallell bearbetning av uppgifter. Med vinkel 8 kan en webbarbetare skapas direkt från komforten hos ng Command Line Utility. 

 Tamhan @ Tamhan18: ~ / AngularSpace / WorkertStöst $
sudo ng genererar webbarbetare myworker
Skapa tsconfig.worker.json (212 byte)
Skapa src / app / myworker.worker.ts (157 bytes)
Uppdatera tsconfig.app.json (236 byte)
Uppdatera angular.json (3640 bytes)

07. Utforska koden

ng s utgång kommer sannolikt att se skrämmande vid första anblicken. Öppna filen src / app / myworker.worker.ts i en kodredigerare av valet avslöjar kod som du borde veta bra från Webworker Specifikation. I princip får arbetaren meddelanden och behandlar dem efter behov. 

 /// & lt; referens lib = "webworker" / & gt;
addeventlistener ('meddelande', ({data}) = & gt; {
 Const Response = `Worker Response till
$ {data} `;
 Postmessage (svar);
});

08. Ställ in byggnadsställningar

Vinkelapplikationer består av komponenter. Avfyrning av vår webbläsare är bäst gjort i Appcommonent , som utökas för att inkludera en lyssnare för Försätta händelse. För närvarande kommer det endast att avge statusinformation. 

 Importera {COMPONENT, ONINIT} från '@ vinkel / kärna';
@Komponent({
. . .
})
Exportera klass appkomponent implementerar oändliga {
 Titel = 'WorkertStest';
 ngoninit () {
   Console.log ("Appcomponent: Oninit ()");
 }
}

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

Erfaren 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 det ngoninit är en livscykel händelse som blir avfyrade när en initialiseringsevenemang äger rum - det behöver inte korreleras med klasskontor.

10. Utför en liten kompilera körning

Vid denna tidpunkt är programmet klart att springa. Vi kommer att utföra det från servern inuti ng , som kan åberopas via Serve-kommandot. En snygg aspekt av detta tillvägagångssätt är att programmet upptäcker förändringar och omkompar projektet på flugan. 

 Tamhan @ Tamhan18: ~ / AngularSpace / WorkertStöst $
sudo ng tjäna

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

Hit the icon in the top right to enlarge the image

Slå ikonen längst upp till höger för att förstora bilden (Bildkredit: Tam Hanna)

11. ... och hitta utgången

ng tjäna putputs adress till sin lokala webbserver, som vanligtvis är http: // localhost: 4200 / . Öppna webbsidan och öppna utvecklarverktygen för att se statusutgången. Tänk på att konsol.log Utmatar data till webbläsarkonsolen och lämnar konsolen i Nodejs-förekomsten orörd.

12. Gå till jobbet

Vid denna tidpunkt skapar vi en instans av arbetaren och ger det ett meddelande. Dess resultat visas sedan i webbläsarkonsolen. 

 Om (Type of Worker! == 'undefined') {
 // Skapa en ny
 Const Worker = New Worker ('./ myworker.worker', {Type: 'Module'});
 arbetare.onmessage = ({data}) = & gt; {
   Console.log ('sida fick meddelande: $ \
{data\}');
 };
 arbetare.postmessage ('Hello');
} annars {
     konsol.log ("ingen arbetstagare stöd");
}

13. Utforska Ivy

Framtida versioner av vinkeln kommer att använda en mer avancerad kompilator, vilket leder till ännu mindre vyer. Medan produkten inte är färdig, kan ett Ivy-aktiverat skelett gytas via NG New Ivy-Project - Aktivera-Ivy . Alternativt, ändra kompileringsinställningarna som visas i snippet. 

 "AngularComPileroptions": {
       "AXPANTIVY": sant
}

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

14. Försök modifierad NG-bearbetning

Vinklar ng Kommandoradsverktyget använde barnskript internt under en tid. Angular 8 UPS Ante som du kan nu, även använda den här möjligheten för att köra dina egna uppgifter, eftersom din ansökan är monterad och sammanställd. 

 "Arkitekt": {
       "Bygg": {
         "Builder": "@ vinkel-devkit /
Byggvinkel: Browser ",

En snygg tillämpning av ng Skript innebär direkt uppladdning av applikationer till molntjänster. De Gitförråd Ger ett användbart skript som laddar upp ditt arbete till ett Firebase-konto.

15. Njut av förbättrad migrering

Utvecklare migrerar bort från vinkel 1.x, även känd som angularjs, har haft en rättvis andel av problem som får navigatören att arbeta rätt i "kombinerade" applikationer. Den nya enhetliga platsen syftar till att göra denna process mjukare.

16. Utforska arbetsytan

Stora projekt drar nytta av förmågan att ändra arbetsytans struktur dynamiskt. Detta görs via den nya arbetsytan API som introducerades i vinkel 8.0 - Snippet som åtföljer detta steg ger en snabb översikt över beteendet. 

 Async-funktion demonstrera () {
   const värd = arbetsytor.
CreatActorSpaceHost (New NodejsSynchost ());
   Const Workspace = väntar på arbetsytor.
ReadWorkspace ('Path / to / WorkSpace / katalog /',
värd);
   Const Project = WorkSpace.Projects.
få ('my-app');
   Const BuildTarget = Project.Targets.
få ("build");
   buildtarget.options.optimization = true;
   Await Workspaces.writeworkspace (arbetsyta,
värd);
}

17. Accelerera processen

Byggnad Stora JavaScript-kodbaser blir tråkiga. Framtida versioner av Angularjs kommer att använda Googles Bazel Build-system för att påskynda processen - tyvärr, vid skrivningstiden var det inte klart för primetime.

18. Undvik att gå döda

Även om Google tar extremt omsorg som inte bryter kod, behöver vissa funktioner helt enkelt avlägsnas eftersom de inte längre behövs. Kolla upp Denna avskrivningar lista För att lära dig mer om funktioner som bör undvikas.

19. Titta på förändringsloggen

Som alltid kan en artikel aldrig göra rättvisa till en hel release. Som tur är, Denna ändringslogg Ger en detaljerad lista över alla ändringar - bara om du någonsin tycker om att kontrollera pulsen av en funktion, särskilt kära för dig.

Har du många filer redo för uppladdning till din webbplats? Tillbaka upp dem på det mest tillförlitliga molnlagring .

Den här artikeln publicerades ursprungligen i kreativ webbdesignmagasin Webbdesigner .

Läs mer:

  • Lägg till flera språkstöd till vinkel
  • De bästa javascript apis
  • Hur man kodar snabbare, lättare javascript

Hur - Mest populära artiklar

Hur man hämtar Instagram Foton: Allt du behöver veta

Hur Feb 7, 2026

(Bildkredit: Joseph Foley på Instagram) Hämta Instagram Images - Hämta Instagra..

Hur snabbt skissar händer

Hur Feb 7, 2026

För att rita händer måste du titta förbi komplexiteten i handens anatomi och känna igen enkla regler som hjälper dig att dr..

Hur man monterar ditt konstverk

Hur Feb 7, 2026

Ett väl utfört montering är mer än bara en annan Konstteknik att lägga till ditt verktygsbälte. Det kommer a..

Hur man målar en drömlik fantasifästsplats

Hur Feb 7, 2026

1800-talet Rococo målare använde fantasi, drömlika paletter, romantisk atmosfär och livligt borstarbete för att skapa en und..

Hur man skapar tecknade tecken i Cinema 4D

Hur Feb 7, 2026

Med tillkomsten av mobila spel och indie Videospel , det har varit en stor tillströmning av illustratörer och an..

Skärpa dina skissförmåga

Hur Feb 7, 2026

Sketching är ett enkelt men kraftfullt verktyg för alla som är involverade i att göra digitala produkter. Pennor, papper och whiteboards är lättillgängliga på varje kontor..

Hur man använder blandningsformer för att animera tecken

Hur Feb 7, 2026

Medan du riggar din 3D-modeller Att använda ben kan vara mycket effektiva, ibland är det bara inte lämpligt - och ansiktsuttryck är en av dessa tider. I såda..

Rita exakta ben och muskel

Hur Feb 7, 2026

Anatomi är ett stort ämne och kräver en blandning av vetenskaplig information och konstnärlig praktik. Till exempel behöver ..

Kategorier