Hvad er der indenfor vinkel 8?

Sep 11, 2025
hvordan
Angular 8
(Billedkredit: fremtiden)

Vinkel 8 er den nyeste version af Googles vinkel - en af ​​de Bedste JavaScript-rammer rundt om. I denne artikel løber vi igennem, hvad der er specielt om vinkel 8, og vise dig, hvordan man kommer i gang. For det første et kort se tilbage til, hvad der er sket med rammerne hidtil.

Vinkelens introduktion førte til et paradigmeskift i webudvikling: Mens de fleste biblioteker begrænsede sig til at yde støtte til udviklere med relativt begrænset arkitektonisk indvirkning, gik Vinkels udviklerhold i den anden retning. Deres produkt tvinger dig til at bruge en bestemt arkitektur, med afvigelser, der spænder fra vanskeligt for kommercielt meningsløst. Faktisk løber de fleste vinkelkoder gennem et relativt komplekst transpillationsværktøjskæde, før det nogensinde rammer browseren.

På grund af den enorme succes for vinkel, både indenfor og uden for Google Inc, har udviklingen - ved og stor - stabiliseret. Det betyder, at brydningskodeændringer er få, mens de halvårlige opgraderinger er fokuseret på at tilpasse rammen for ændringer i webbrowsing landskabet.

I tilfælde af vinkel 8 er der for eksempel en ny JavaScript Compiler implementeret (omend stadig eksperimentelt). Det optimerer genereret kompatibilitetskode for at være betydeligt mindre og hurtigere på bekostning af ældre browsere. Desuden er webarbejderstøtte integreret for at øge vinkelens behandlingskapacitet. Kort sagt, der er meget at se - så lad os dykke lige ind.

Hvis du hellere vil designe et websted uden kode, så prøv en af ​​disse nemme Website Builders. . Og for at få tingene til at køre endnu glattere, få din Web Hosting. Service ret.

01. Kør en versionskontrol

Vinkels værktøjschain bor inde i Nodeejs miljø. Som af denne skrivning er node.js 10.9 eller bedre nødvendigt - hvis du finder dig selv på en ældre version, Besøg Node.js hjemmeside og få en opgradering. Koden nedenfor viser versionsstatus på denne maskine. 

 Tamhan @ tamhan18: ~ $ node -v
V12.4.0.
tamhan @ tamhan18: ~ $ npm -v
6.9,0

02. Installer vinkel

Vinkels ToolChain ligger i et kommandolinjevalg ved navn ng. . Det kan installeres via den velkendte NPM. 

 Tamhan @ tamhan18: ~ $ sudo npm installere -g @ vinkel / cli
tamhan @ tamhan18: ~ $ ng version

Pas på at besvare det spørgsmål, der vises i billedet nedenfor.

Click the icon in the top right to enlarge

Klik på ikonet øverst til højre for større billede (Billedkredit: Tam Hanna)

At få version info ud af værktøjet er ret svært - ikke kun er syntaxen unik, men udgangen er også verbose (se billede nedenfor).

Click the icon in the top right to enlarge

Klik på ikonet øverst til højre for større billede (Billedkredit: Tam Hanna)

03. Opret et projekt skelet

ng. genererer vinklet stilladser for os. I de følgende trin ønsker vi at tilføje routing og bruge SASS til CSS Transpilation. Skulle implementeringen mislykkes af en eller anden grund, tøm arbejdskataloget og genstart ng. med superbrugerrettigheder. 

 Tamhan @ Tamhan18: ~ $ Mkdir AngularSpace
Tamhan @ Tamhan18: ~ $ CD AngularSpace /
Tamhan @ Tamhan18: ~ / AngularSpace $ NG New WorksTest

04. Harness Differential Loading

Den nye version af vinkel optimerer baglæns kompatibilitetskode for nedsat effekt - en fil kaldet browserslist Giver dig mulighed for at bestemme, hvilke browsere der skal understøttes. Åben browserslist og fjern ordet ikke foran IE 9 til IE11. 

. . .
& gt; 0,5%
Sidste 2 versioner
Firefox ESR.
ikke død
Dvs. 9-11 # for IE 9-11 Support, fjern 'ikke'.

05. ... og se resultaterne

Bestil en kompilering af projektet, skift i distributionsmappen og udrensede unødvendige kortfiler. 

 Tamhan @ Tamhan18: ~ / AngularSpace / WorksTest $
sudo ng build.
Tamhan @ Tamhan18: ~ / AngularSpace / WorksTest / dist / WorksTest $ LS

Invoke Tree for at se resultaterne - ng. Opretter flere versioner af forskellige kodefiler (se billede nedenfor).

Click the icon in the top right to enlarge

Klik på ikonet øverst til højre for større billede (Billedkredit: Tam Hanna)

06. Spinker en webarbejder

Web-arbejdere Lad JavaScript komme ind i den sidste grænse af indfødte applikationer: Massivt parallel behandling af opgaver. Med vinkel 8 kan en webarbejder oprettes lige fra komforten af ng. Command Line Utility. 

 Tamhan @ Tamhan18: ~ / AngularSpace / WorksTest $
sudo ng genererer web-worker minworker
Opret Tsconfig.worker.json (212 bytes)
Opret src / app / myworker.worker.ts (157 bytes)
UPDATE TSCONFIG.APP.JSON (236 bytes)
Opdater Angular.json (3640 bytes)

07. Udforsk koden

ng. 's output vil sandsynligvis se skræmmende ved første øjekast. Åbner filen src / app / myworker.worker.ts i en kode editor. af valg afslører kode, som du bør vide godt fra WEBWORKER. Specifikation. I princippet modtager arbejderen meddelelser og behandler dem efter behov. 

 /// & lt; reference lib = "Webworker" / & GT;
addeventListener ('besked', ({data}) = & gt; {
 const respons = `arbejdstagerrespons på
$ {data} `;
 postmessage (svar);
});

08. Opsæt stilladser

Vinkelapplikationer består af komponenter. Afbrænding af vores webarbejder er bedst færdig indenfor AppComponent. , som udvides til at omfatte en lytter til Oninit. begivenhed. For nu vil det kun udsende statusoplysninger. 

 Import {Component, OnInit} fra '@ vinkel / kerne';
@Komponent({
. . .
})
Eksportklasse AppComponent Implements OnInit {
 titel = 'WorksTest';
 ngoninit () {
   Console.log ("AppComponent: OnInit ()");
 }
}

09. Bare rolig om manglen på konstruktør

Erfarne typeskriptudviklere spørger sig selv, hvorfor vores kode ikke bruger konstruktøren, der leveres af programmeringssproget. Årsagen til det er det ngoninit. Er en livscyklushændelse, der bliver fyret, når en initialiseringshændelse finder sted - det behøver ikke at være korreleret til klassens påkaldelse.

10. Udfør en lille kompileringskø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 serverkommandoen. Et pænt aspekt af denne tilgang er, at programmet registrerer ændringer og rekompler projektet på flugt. 

 Tamhan @ Tamhan18: ~ / AngularSpace / WorksTest $
sudo ng tjener

Tag et kig på figuren for at se dette i handling i billedet nedenfor.

Hit the icon in the top right to enlarge the image

Tryk på ikonet øverst til højre for at forstørre billedet (Billedkredit: Tam Hanna)

11. ... og find output

ng tjener. Putputs adressen til sin lokale webserver, som normalt er http: // localhost: 4200 / . Åbn websiden og åbn udviklerværktøjerne for at se statusudgangen. Husk det Console.Log. Udsender data til browserkonsollen og efterlader konsollen af ​​nodejs instans uberørt.

12. Kom på arbejde

På dette tidspunkt skaber vi en forekomst af arbejderen og giver det en besked. Dens resultater vises derefter i browserkonsollen. 

 Hvis (Type af Worker! == 'undefined') {
 // opret en ny
 const worker = ny arbejdstager ('./ myworker.worker', {type: 'modul'});
 worker.onmessage = ({data}) = & gt; {
   Console.log ('Side Fik besked: $ \
{data\}');
 };
 Worker.postmessage ('Hej');
} ellers {
     console.log ("ingen arbejdstagerstøtte");
}

13. Udforsk Ivy.

Fremtidige versioner af vinkel vil bruge en mere avanceret compiler, hvilket fører til endnu mindre visninger. Mens produktet ikke er færdigt endnu, kan et Ivy-aktiveret skelet fremkaldt via NG New Ivy-Project - Aktiver-Ivy . Alternativt kan du ændre kompilatorindstillingerne som vist i snippet. 

 "AngularCompilerOptions": {
       "Aktiverivy": TRUE
}

Et ord af advarsel: Ivy fører til fantastiske størrelsesreduktioner, men det er ikke gratis. Produktet har endnu ikke stabiliseret sig, så det anbefales ikke at bruge det i produktive omgivelser.

14. Prøv modificeret ng behandling

Vinkel s. ng. Kommandolinjeværktøj brugte børne scripts internt i nogen tid. Vinkel 8 UPS Ante, fordi du nu kan bruge denne facilitet til at køre dine egne opgaver, da din ansøgning er samlet og kompileret. 

 "Arkitekt": {
       "Build": {
         "Builder": "@ Angular-Devkit /
Build-vinkel: Browser ",

En pæn ansøgning af ng. Scripts indebærer direkte uploading af applikationer til Cloud Services. Det Git repository. Giver et nyttigt script, der uploader dit arbejde til en firebase-konto.

15. Nyd forbedret migration

Udviklere migrerer væk fra vinkel 1.x, også kendt som AngularJs, har haft en rimelig andel af problemer, der får navigatoren til at arbejde lige i 'kombinerede' applikationer. Den nye Unified Location Service har til formål at gøre denne proces glattere.

16. Udforsk arbejdsområdet

Store projekter nyder godt af evnen til at ændre arbejdspladestrukturen dynamisk. Dette sker via den nye Workspace API, der introduceres i Vinkel 8.0 - Snippet, der ledsager dette trin, giver et hurtigt overblik over adfærd. 

 Async-funktion demonstrere () {
   const host = arbejdsområder.
CREATUREWORKSPACEHOST (NEW NODEJSSYNCHOST ());
   const workspace = afventer arbejdsområder.
Readworkspace ('Sti / til / arbejdsområde / bibliotek /',
vært);
   CONST PROJECT = WORKSPACE.PROJECTS.
få ('my-app');
   const buildtarget = Project.Targets.
få ('build');
   buildtarget.options.optimization = true;
   Await Workspaces.WriteWorkspace (arbejdsområde,
vært);
}

17. Fremskynde processen

Bygning Store JavaScript-kodebaser bliver kedelig. Fremtidige versioner af Angularjs vil bruge Googles Bazel Build System til at fremskynde processen - desværre var det ikke klar til primetime.

18. Undgå at gå de døde

Selvom Google tager ekstrem omhu ikke at bryde kode, skal nogle funktioner simpelthen fjernes, da de ikke længere er nødvendige. Kontrollere Denne afskrivningsliste at lære mere om funktioner, der bør undgås.

19. Kig på ændringsloggen

Som altid kan en artikel aldrig gøre ret til en hel udgivelse. Heldigvis, denne ændring log Giver en detaljeret liste over alle ændringerne - bare hvis du nogensinde har lyst til at kontrollere pulsen af ​​en funktion, især kære for dig.

Fik mange filer klar til upload til dit websted? Tilbage dem i de mest pålidelige Sky lagring .

Denne artikel blev oprindeligt offentliggjort i Creative Web Design Magazine Webdesigner .

Læs mere:

  • Tilføj flersproget støtte til vinkel
  • De bedste javascript apis
  • HVORDAN DO KODE HOFTASTER, LIGHTER JAVASCRIPT

hvordan - Mest populære artikler

Adobe Fresco Tutorial: Opret et portræt i maleriappet

hvordan Sep 11, 2025

(Billedkredit: Phil Galloway) For denne Adobe Fresco-tutorial skaber jeg et levende og følelsesmæssigt portræt, de..

Kom godt i gang med Adobe Dimension CC

hvordan Sep 11, 2025

Adobe Dimension gør det til en brise til at oprette komplekse scener (Billedkredit: Mike Griggs) Adobe D..

Kom i gang med Redux Thunk

hvordan Sep 11, 2025

Status er en stor del af en reaktionsapplikation, hvorfor Redux almindeligvis er parret med det. Disse data kommer ofte fra en da..

3 Tips til udformning af fantastisk udskrivning af reklamemateriale

hvordan Sep 11, 2025

I en stadig mere digital verden har klogt udformet printfremmende materiale beføjelse til at gøre en alvorlig indvirkning. Mås..

Procreat Tutorial: Nye værktøjer udforsket

hvordan Sep 11, 2025

Da jeg først opdagede ProCreate, blev jeg bedøvet af ideen om at have en bærbar enhed, der gjorde det muligt for mig at male d..

Strøm en blog ved hjælp af WordPress API

hvordan Sep 11, 2025

I løbet af de sidste par år har udviklingen af ​​en hvile API til WordPress åbnet nye døre for udviklere. Udviklere, der ..

Sådan blandes en gouache palette

hvordan Sep 11, 2025

Gouache er mere tilgivende end akvarelmaling, men beslutninger, du får tidligt, kan stadig påvirke resten af maleri ..

Brug af vektorværktøjer: En webdesigner tilgang

hvordan Sep 11, 2025

Hvis du er en webdesigner, er der en god chance for, at Photoshop i øjeblikket er åben og kører på din computer. Lad os se det - Photoshop har altid været arbejdshest og de facto standar..

Kategorier