Hva er inne i vinkel 8?

Jan 31, 2026
hvordan
Angular 8
[1. 3]
(Bildekreditt: Fremtid)

Vinkel 8 er den nyeste versjonen av Googles vinkel - en av Beste JavaScript-rammer rundt. I denne artikkelen går vi gjennom det som er spesielt med vinkel 8, og viser deg hvordan du kommer i gang. Først, en kort titt tilbake på det som skjedde med rammen så langt.

Vinkelens introduksjon førte til et paradigmeskifte i webutvikling: Mens de fleste biblioteker begrenset seg til å gi støtte til utviklere med relativt begrenset arkitektonisk innvirkning, gikk vinklesutviklerlaget i den andre retningen. Deres produkt tvinger deg til å bruke en bestemt arkitektur, med avvik som spenner fra vanskelige til kommersielt meningsløst. Faktisk løper de fleste vinkelkode gjennom en relativt kompleks transpilasjonsverktøykontroll før den noen gang treffer nettleseren.

På grunn av den enorme suksessen til vinkel, både innenfor og utenfor Google Inc, har utviklingen - av og stor - stabilisert. Dette betyr at bruddkodeendringer er få, mens de halvårlige oppgraderingene er fokusert på å tilpasse rammen til endringer i nettlesingslandskapet.

I tilfelle av vinkel 8, for eksempel, distribueres en ny JavaScript-kompilator (om enn fortsatt eksperimentelt). Det optimaliserer generert kompatibilitetskode for å være betydelig mindre og raskere på bekostning av eldre nettlesere. Videre er webarbeider-støtte integrert for å øke vinkelens behandlingskapasitet. Kort sagt, det er mye å se - så la oss dykke rett inn.

Hvis du hellere vil designe et nettsted uten kode, prøv en av disse enkle Nettstedbyggere . Og for å få ting til å løpe jevnere, få din Web Hosting. SERVICE HØYRE.

01. Kjør en versjonskontroll

Vinkelens verktøykontroll bor i Nodejs-miljøet. Fra denne skrivingen er node.js 10,9 eller bedre nødvendig - hvis du finner deg selv på en eldre versjon, Besøk Node.js nettstedet og få en oppgradering. Koden nedenfor viser versjonens status på denne maskinen. 

 tamhan @ tamhan18: ~ $ node -v
v12.4.0.
Tamhan @ Tamhan18: ~ $ NPM -V
6.9.0

02. Monter vinkelen

Vinkelens verktøykjøri ligger i et kommandolinjeverktøy som heter ng. . Den kan installeres via den velkjente NPM. 

 Tamhan @ Tamhan18: ~ $ Sudo NPM Install -G @ vinkel / cli
Tamhan @ Tamhan18: ~ $ NG versjon

Vær forsiktig med å svare på spørsmålet som vises i bildet nedenfor.

Click the icon in the top right to enlarge

Klikk på ikonet øverst til høyre for å forstørre (Bilde Kreditt: Tam Hanna)

Å få versjon info ut av verktøyet er ganske vanskelig - ikke bare er syntaksen unik, men utgangen er også verbose (se bildet nedenfor).

Click the icon in the top right to enlarge

Klikk på ikonet øverst til høyre for å forstørre (Bilde Kreditt: Tam Hanna)

03. Lag et prosjektskjelett

ng. genererer vinkel stillas for oss. I de følgende trinnene vil vi legge til ruting, og bruke Sass for CSS-transpilasjon. Skulle distribusjonen ikke av en eller annen grunn, tømme arbeidskatalogen og omstart på nytt ng. med superbrukerrettigheter. 

 Tamhan @ Tamhan18: ~ $ MKDIR Angularspace
Tamhan @ Tamhan18: ~ $ CD Angularspace /
Tamhan @ Tamhan18: ~ / Angularspace $ NG Ny Workertest

04. Harness differensial lasting

Den nye versjonen av vinkeloptimaliserer bakoverkompatibilitetskoden for redusert effekt - en fil som heter Browserslist. Lar deg bestemme hvilke nettlesere som skal støttes. Åpen Browserslist. og fjern ordet ikke foran IE 9 til IE11. 

. . .
& gt; 0,5%
Siste 2 versjoner
Firefox Esr.
ikke død
Dvs. 9-11 # for IE 9-11-støtte, fjern "ikke".

05. ... og se resultatene

Bestil en kompilering av prosjektet, endre i distribusjonsmappen og rense unødvendige kartfiler. 

 Tamhan @ Tamhan18: ~ / Angularspace / Workertest $
sudo ng bygge
Tamhan @ Tamhan18: ~ / Angularspace / Workertest / Dist / Workertest $ ls

Påkalle tre for å se resultatene - ng. Oppretter flere versjoner av ulike kodefiler (se bildet nedenfor).

Click the icon in the top right to enlarge

Klikk på ikonet øverst til høyre for å forstørre (Bilde Kreditt: Tam Hanna)

06. Gyte en webarbeider

Webarbeidere la JavaScript inn i den siste grensen av innfødte applikasjoner: massivt parallell behandling av oppgaver. Med vinkel 8, kan en webarbeider opprettes rett fra komforten til ng. Kommandolinjeverktøy. 

 Tamhan @ Tamhan18: ~ / Angularspace / Workertest $
sudo ng generere webarbeider minworker
Opprett tsconfig.worker.json (212 byte)
Opprett SRC / APP / MyWorker.worker.ts (157 byte)
Oppdater tsconfig.app.json (236 bytes)
Oppdater angel.json (3640 bytes)

07. Utforsk koden

ng. ens utgang er sannsynlig å se skremmende ved første øyekast. Åpner filen src / app / myworker.worker.ts i en Kodedaktør av valg avslører koden som du burde vite godt fra WebWorder. spesifikasjon. I prinsippet mottar arbeideren meldinger og behandler dem etter behov. 

 /// & lt; referanse lib = "webworker" / & gt;
addeventlistener ('melding', ({data}) = & gt; {
 const response = `arbeidstaker svar på
$ {data} `;
 postmessage (respons);
});

08. Sett opp stillas

Vinkelapplikasjoner består av komponenter. Avfyring av vår webarbeider er best gjort i APPOMCOMENT , som er utvidet til å inkludere en lytter for Oninit. begivenhet. For nå vil det bare gi statusinformasjon. 

 Importer {komponent, oninit} fra '@ vinkel / kjerne';
@Komponent({
. . .
})
Eksporter klasse APPCOMPONENT implementerer oninit {
 tittel = 'workertest';
 ngoninit () {
   Console.log ("APPCOMBONENT: ONINIT ()");
 }
}

09. Ikke bekymre deg for mangelen på konstruktør

Erfarne typekryptere, spør seg selv hvorfor vår kode ikke bruker konstruktøren som tilbys av programmeringsspråket. Årsaken til det er det ngoninit. er en livscyklushendelse som blir sparket når en initialiseringshendelse finner sted - dette trenger ikke å være korrelert til klassens påkalling.

10. Utfør en liten kompilere løp

På dette tidspunktet er programmet klar til å kjøre. Vi vil utføre det fra serveren inne i ng. , som kan påberopes via serverkommandoen. Et fint aspekt av denne tilnærmingen er at programmet oppdager endringer og kompromasser prosjektet på flyet. 

 Tamhan @ Tamhan18: ~ / Angularspace / Workertest $
sudo ng tjene

Ta en titt på figuren for å se dette i aksjon i bildet nedenfor.

Hit the icon in the top right to enlarge the image

Trykk på ikonet øverst til høyre for å forstørre bildet (Bilde Kreditt: Tam Hanna)

11. ... og finn utgangen

ng tjener Putputs adressen til den lokale webserveren, som vanligvis er http: // localhost: 4200 / . Åpne nettsiden og åpne utviklerverktøyene for å se statusutgangen. Husk det Console.Log. Utfører data til nettleserkonsollen og forlater konsollen til Nodejs-forekomsten uberørt.

12. Kom deg til jobb

På dette tidspunktet skaper vi en forekomst av arbeideren og gir den en melding. Resultatene er så vist i nettleserkonsollen. 

 Hvis (Typeof arbeidstaker! == 'undefined') {
 // Lage en ny
 const Worker = ny arbeidstaker ('./ myworker.worker', {Type: 'modul'});
 arbeider.onmessage = ({data}) = & gt; {
   Console.log ('Side fikk melding: $ \
{data\}');
 };
 arbeider.Postmessage ('hallo');
} else {
     konsoll.log ("ingen arbeidstaker støtte");
}

13. Utforsk Ivy.

Fremtidige versjoner av vinkel vil bruke en mer avansert kompilator, som fører til enda mindre visninger. Mens produktet ikke er ferdig ennå, kan et Ivy-aktivert skjelett bli oppstått via NG New Ivy-prosjekt - Aktiver-Ivy . Alternativt kan du endre kompilatorinnstillingene som vist i snippeten. 

 "AngularCompileroptions": {
       "Entabley": True
}

Et ord med advarsel: Ivy fører til fantastiske størrelsesreduksjoner, men det er ikke gratis. Produktet har ennå ikke stabilisere seg, så det anbefales ikke å bruke det i produktive miljøer.

14. Prøv endret NG-behandling

Vinkelens ng. Kommandolinjeverktøyet brukte barneskript internt i noen tid. Vinkel 8 ups Ante I du kan nå, bruk dette anlegget til å kjøre dine egne oppgaver, ettersom søknaden din er samlet og samlet. 

 "Arkitekt": {
       "bygge": {
         "Builder": "@ vinkel-Devkit /
Bygg-vinkel: nettleser ",

En fin påføring av ng. Skript innebærer direkte opplasting av applikasjoner til Cloud Services. De Git repository. Gir et nyttig skript som laster opp arbeidet ditt til en Firebase-konto.

15. Nyt forbedret migrasjon

Utviklere som migrerer vekk fra vinkel 1.x, også kjent som angularjs, har hatt en rettferdig andel av problemer som får navigatoren til å fungere rett i "kombinert" applikasjoner. Den nye enhetlige plasseringstjenesten tar sikte på å gjøre denne prosessen jevnere.

16. Utforsk arbeidsområde kontroll

Store prosjekter drar nytte av evnen til å endre arbeidsområdets struktur dynamisk. Dette gjøres via det nye arbeidsområdet API introdusert i vinkel 8.0 - Stektet som følger med dette trinnet gir en rask oversikt over oppførselen. 

 Async-funksjonen demonstrerer () {
   const host = arbeidsområder.
CreatherSpacehost (ny nodejssynchost ());
   const workspace = venter arbeidsområder.
Readworkspace ('Path / To / Workspace / Directory /',
vert);
   const Prosjekt = arbeidsområde.projects.
få ('min-app');
   const buildtarget = prosjekt.targets.
få ('bygge');
   buildtarget.options.optimization = sant;
   venter arbeidspaces.writeworkspace (arbeidsområde,
vert);
}

17. Fremskynde prosessen

Å bygge store JavaScript-kode baser blir kjedelig. Fremtidige versjoner av Angularjs vil bruke Googles Bazel Build System for å akselerere prosessen - dessverre, på tidspunktet for skriving var det ikke klar for primetime.

18. Unngå å gå døde

Selv om Google tar stor forsiktighet, ikke å bryte koden, må enkelte funksjoner bare fjernes som de ikke lenger er nødvendig. Sjekk Denne avskrivningslisten for å lære mer om funksjoner som bør unngås.

19. Se på endringsloggen

Som alltid kan en artikkel aldri gjøre rettferdighet til en hel utgivelse. Heldigvis, Denne endringen logger Gir en detaljert liste over alle endringene - bare hvis du noen gang har lyst til å sjekke pulsen av en funksjon, spesielt kjære for deg.

Fikk mange filer klar for opplasting til nettstedet ditt? Tilbake dem opp i de mest pålitelige skylagring .

Denne artikkelen ble opprinnelig publisert i Creative Web Design Magazine Webdesigner .

Les mer:

  • Legg til multi-språklig støtte til vinkel
  • The Best JavaScript APIer
  • Hvordan kode raskere, lettere javascript

hvordan - Mest populære artikler

Hvordan løse en vanskelig design kort

hvordan Jan 31, 2026

[1. 3] [Bilde: Jack Renwick Studio] Hvis noen vet hvordan man skal håndtere en vanskelig kort, er det de smarte desig..

Hvordan designe med CSS-former: en introduksjon

hvordan Jan 31, 2026

[1. 3] Grunnlaget for hvert nettsted er å dele opp siden ned i mindre elementer som har innhold. Det store problemet med dette fo..

Arbeidsbilde Mask Magic With Houdini

hvordan Jan 31, 2026

[1. 3] Hvis du er interessert i å lære mer om Houdini, sørg for at du går på å generere New York (april 24-25). På kon..

Affinity Designer: Slik bruker du grids

hvordan Jan 31, 2026

[1. 3] Affinity Designer er en suite med vektor redigeringsverktøy tilgjengelig for Mac og Windows, så vel som på iPad...

Lag fantastiske landskap i Houdini

hvordan Jan 31, 2026

[1. 3] Ved å bruke en nodebasert, prosessorisk tilnærming, gir 3D-programvare Houdini fra SideFX digitale artister et bemerkelse..

Hvordan lage en lava lampe med nøkkelbilde

hvordan Jan 31, 2026

[1. 3] Det er noe merkelig tilfredsstillende om lava lamper. Et beroligende, fargerikt lys og mesmeriserende voksagtige blobs som ..

Prep ditt arbeid for 3D-utskrift: 8 Top Tips

hvordan Jan 31, 2026

3D-utskrift har blitt enormt populært. Hvis du vil begynne å skrive ut din egen 3D Art. , det er noen ting å se etter for å få de beste resultatene. Her vil jeg vise deg h..

Anatomien til karikatur: 15 Topptips

hvordan Jan 31, 2026

[1. 3] Som en heltid Freelancer, er jeg vant til å jobbe over en rekke stilarter og tegningsteknikker . Disse inkl..

Kategorier