Wat ass dobannen Angular 8?

Inhalt

• 01. Féiert eng Versiounskontroll
• 02. Installéiert Wénkel
• 03. Schafen e Projet Skelett
• 04. Harness Differential Belaaschtung
• 05. ... a kuckt d'Resultater
• 06. Spawn e Webaarbechter
• 07. Entdeckt de Code
• 08. Gerüst astellen
• 09. Maacht Iech keng Suergen iwwer de Mangel u Konstruktor
• 10. Féiert e klenge Kompiléierungslaf aus
• 11. ... a fënnt d'Ausgab
• 12. Gitt op d'Aarbecht
• 13. Entdeckt Ivy
• 14. Probéiert geännert ng Veraarbechtung
• 15. Genéisst verbessert Migratioun
• 16. Entdeckt Aarbechtsberäich Kontroll
• 17. Beschleunegt de Prozess
• 18. Vermeit de Walking Dead
• 19. Kuckt de Change Log

Angular 8 ass déi lescht Versioun vu Google Angular - ee vun de beschte JavaScript Frameworks ronderëm. An dësem Artikel lafe mir duerch dat wat speziell um Angular 8 ass, a weisen Iech wéi Dir ufänkt. Als éischt e kuerze Réckbléck op dat wat mam Kader bis elo geschitt ass.

D'Aféierung vun Angular huet zu engem Paradigmewiessel an der Webentwécklung gefouert: wärend déi meescht Bibliothéiken sech limitéiert hunn op Ënnerstëtzung fir Entwéckler mat relativ limitéierten architektoneschen Impakt ze bidden, ass d'Entwécklerenteam vun Angular an déi aner Richtung gaang. Hire Produkt zwéngt Iech eng spezifesch Architektur ze benotzen, mat Ofwäichungen, déi vu schwéier bis kommerziell sënnlos sinn. Tatsächlech leeft de meeschte Wénkelcode duerch e relativ komplexen Transpilatiouns-Toolchain ier et jeemools de Browser trëfft.

Wéinst dem enormen Erfolleg vun Angular, bannen an ausserhalb vu Google Inc, huet d'Entwécklung - am grousse Ganzen - stabiliséiert. Dëst bedeit datt d'Code Ännerunge wéineg sinn, wärend déi hallefjährlech Upgrades fokusséiert sinn op de Kader un d'Verännerunge vun der Internetsurfenlandschaft unzepassen.

Am Fall vun Angular 8 gëtt zum Beispill en neie JavaScript Compiler agesat (wann och nach experimentell). Et optiméiert generéiert Kompatibilitéitscode fir wesentlech méi kleng a méi séier op Käschte vun ale Browser ze sinn. Ausserdeem gëtt de Web Worker Support integréiert fir dem Angular seng Veraarbechtungsméiglechkeet ze erhéijen. Kuerz gesot, et ass vill ze gesinn - also loosst eis direkt dauchen.

Wann Dir léiwer e Site ouni Code designt, probéiert ee vun dësen einfache Websäit Builder. A fir d'Saache méi glat ze maachen, kritt Äre Webhosting Service richteg.

01. Féiert eng Versiounskontroll

Angular's Toolchain lieft am NodeJS Ëmfeld. Vun dësem Schreiwen ass Node.js 10.9 oder besser gebraucht - wann Dir Iech op enger aler Versioun fannt, besicht de Node.js Websäit a kritt en Upgrade. De Code hei ënnendrënner de Versiounsstatus op dëser Maschinn.

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

02. Installéiert Wénkel

Angular's Toolchain wunnt an engem Kommandozeilennotz genannt ng. Et kann iwwer de bekannten NPM installéiert ginn.

tamhan @ TAMHAN18: ~ $ sudo npm installéieren -g @ eckeg / cli tamhan @ TAMHAN18: ~ $ ng Versioun

Sidd virsiichteg d'Fro am Bild hei ënnen ze beäntweren.

Versiounsinformatioun aus dem Tool kréien ass ganz schwéier - net nëmmen d'Syntax eenzegaarteg, awer d'Ausgab ass och verboss (kuckt d'Bild hei drënner).

03. Schafen e Projet Skelett

ng generéiert de Wénkelsteiger fir eis. An de folgende Schrëtt wëlle mir Routing bäifügen, a benotzen Sass fir CSS Transpilatioun. Sollt den Deplacement aus irgendege Grënn ausgefall sinn, eidel den Aarbechtsverzeechnes eidel, a neistarten ng mat Superuser Rechter.

tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng nei Workertest

04. Harness Differential Belaaschtung

Déi nei Versioun vum Angular optiméiert de Réckkompatibilitéitscode fir reduzéierten Impakt - eng Datei genannt Browser Lëscht léisst Dir entscheeden wéi eng Browser ënnerstëtzt ginn. Opmaachen Browser Lëscht an ewechzehuelen d'Wuert net virum IE 9 bis IE11.

. . . > 0,5% lescht 2 Versiounen Firefox ESR net dout IE 9-11 # Fir IE 9-11 Ënnerstëtzung, ewechhuelen 'net'.

05. ... a kuckt d'Resultater

Bestellt eng Kompiléierung vum Projet, ännert an de Verdeelungsdossier a läscht onnéideg Kaartendateien.

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

Opruff Bam fir d'Resultater ze gesinn - ng erstellt verschidde Versioune vu verschiddene Code Dateien (kuck d'Bild hei drënner).

06. Spawn e Webaarbechter

Webaarbechter loossen JavaScript déi lescht Grenz vun natierlechen Uwendungen aginn: massiv parallel Veraarbechtung vun Aufgaben. Mat Angular 8 kann e Webaarbechter direkt aus dem Komfort vun der erstallt ginn ng Kommandozeilennotz.

tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng generéiert Web-Worker myworker CREATE tsconfig.worker.json (212 Bytes) CREATE src / app / myworker.worker.ts (157 Bytes) UPDATE tsconfig.app.json (236 Bytes) ] UPDATE angular.json (3640 Bytes)

07. Entdeckt de Code

ngSeng Ausgab wäert wahrscheinlech op den éischte Bléck entimidéierend ausgesinn. Datei opmaachen src / app / myworker.worker.ts an engem Code Editor vun der Wiel verréid de Code deen Dir gutt vun der WebAarbechter Spezifizéierung. Prinzipiell kritt den Aarbechter Messagen a veraarbecht se wéi néideg.

/// Referenz lib = "webworker" /> addEventListener ('Message', ({data}) => {const response = `Aarbechter Äntwert op $ {data}`; postMessage (Äntwert);});

08. Gerüst astellen

Wénkel Uwendungen bestinn aus Komponenten. Ofzeschalten vun eisem Webaarbechter ass am beschten am AppComponent, deen erweidert gëtt fir en Nolauschterer fir de OnInit Manifestatioun. Fir elo wäert et nëmmen Statusinformatioun emittéieren.

importéiert {Component, OnInit} vun '@ angular / core'; @Component ({..}) Exportklass AppComponent implementéiert OnInit {title = 'workertest'; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}

09. Maacht Iech keng Suergen iwwer de Mangel u Konstruktor

Erfuerene TypeScript Entwéckler froen sech firwat eise Code net den Konstruktor benotzt deen vun der Programmiersprache geliwwert gëtt. De Grond dofir ass dee ngOnInit ass e Liewenszyklus Event dat entlooss gëtt wann en Initialiséierungs Event stattfënnt - dëst muss net mat der Klass Uruff korreléiert ginn.

10. Féiert e klenge Kompiléierungslaf aus

Zu dësem Zäitpunkt ass de Programm fäerdeg ze lafen. Mir maachen et aus dem Server bannent ng, wat kann iwwer de Serv Kommando opgeruff ginn. E klengen Aspekt vun dëser Approche ass datt de Programm Ännerungen detektéiert an de Projet direkt flitt.

tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng servéieren

Kuckt d'Figur fir dëst an Handlung am Bild hei drënner ze gesinn.

11. ... a fënnt d'Ausgab

NG zerwéieren putputs d'Adress vu sengem lokale Webserver, wat normalerweis ass http: // localhost: 4200 /. Öffnen d'Websäit an öffnen d'Entwéckler Tools fir de Statusausgang ze gesinn. Bedenkt datt console.log gëtt Daten an d'Browser Konsol aus a léisst d'Konsole vun der NodeJS Instanz onberéiert.

12. Gitt op d'Aarbecht

Zu dësem Zäitpunkt kreéiere mir eng Instanz vum Aarbechter a ginn him eng Noriicht. Seng Resultater ginn dann an der Browser Konsol gewisen.

wann (typeof Worker! == 'ondefinéiert') {// Erstellt en neie Const Worker = neien Worker ('./ myworker.worker', {type: 'module'}); worker.onmessage = ({data}) => {console.log (’Säit krut Message: $ {data }’); }; Aarbechter.postMessage ('hallo'); } soss {console.log ("Keen Aarbechter Ënnerstëtzung"); }

13. Entdeckt Ivy

Zukünfteg Versioune vun Angular benotzen e méi fortgeschratte Compiler, wat zu nach méi klengen Usiichten féiert. Wärend de Produkt nach net fäerdeg ass, kann en Ivy-aktivéiert Skelett iwwer gespaut ginn ng nei Ivy-Projet - aktivéieren-Ivy. Alternativ ännert d'Compiler-Astellunge wéi am Snippet gewisen.

"angularCompilerOptions": {"enableIvy": richteg}

E Wuert vu Warnung: Ivy féiert zu erstaunlech Gréisstreduktiounen, awer et ass net gratis. D'Produkt huet sech nach stabiliséiert, sou datt et a produktiven Ëmfeld benotzt gëtt net recommandéiert.

14. Probéiert geännert ng Veraarbechtung

Wénkel’s ng Kommandozeilentool benotzt Kandskripter intern fir eng Zäit. Angular 8 hëlt d'Ante an datt Dir elo och dës Ariichtung benotze kënnt fir Är eegen Aufgaben auszeféieren wéi Är Uwendung zesummegesat a kompiléiert ass.

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

Eng propper Uwendung vun ng Skripte beinhalt d'Uwendung vun Uwendungen u Cloud Servicer direkt. De Git Repository bitt e nëtzlecht Skript dat Är Aarbecht op e Firebase Kont eropluet.

15. Genéisst verbessert Migratioun

Entwéckler déi aus Angular 1.x wanderen, och bekannt als AngularJS, hunn e fairen Undeel u Probleemer gehat, fir datt de Navigator direkt an 'kombinéierten' Uwendungen funktionnéiert. Den neien Unified Location Service soll dëse Prozess méi glat maachen.

16. Entdeckt Aarbechtsberäich Kontroll

Grouss Projete profitéiere vun der Fäegkeet d'Aarbechtsberäichstruktur dynamesch z'änneren. Dëst gëtt iwwer déi nei Workspace API gemaach, déi am Angular 8.0 agefouert gouf - de Snippet mat dësem Schrëtt bitt e séieren Iwwerbléck iwwer d'Verhalen.

async Funktioun demonstriert () {const Host = Workspaces. createWorkspaceHost (nei NodeJsSyncHost ()); const Workspace = Aarbechtsraim waarden. readWorkspace (’path / to / workspace / directory /’, host); const Projet = workspace.projects. kréien ('meng App'); const buildTarget = project.targets. kréien ('bauen'); buildTarget.options.optimization = richteg; Waarden op Workspaces.writeWorkspace (Workspace, Host); }

17. Beschleunegt de Prozess

Grouss JavaScript Code Basen ze bauen gëtt langweileg. Zukünfteg Versioune vun AngularJS benotze Google's Bazel Build System fir de Prozess ze beschleunegen - leider, zum Schreiwe war et net prett fir Primetime.

18. Vermeit de Walking Dead

Och wann Google extrem Suergfalt hëlt kee Code ze briechen, musse verschidde Funktiounen einfach ewechgeholl ginn well se net méi gebraucht ginn. Kontrolléiert dës Ofschreiwungslëscht fir méi iwwer Features ze léieren déi vermeit solle ginn.

19. Kuckt de Change Log

Wéi ëmmer kann een Artikel ni enger ganzer Verëffentlechung gerecht ginn. Glécklecherweis gëtt dësen Ännerungsprotokoll eng detailléiert Lëscht vun allen Ännerungen - just am Fall wou Dir Iech iergendwann fillt de Puls vun enger Feature ze kontrolléieren déi Iech besonnesch léif ass.

Hutt Dir vill Dateie prett fir op Är Site eropzelueden? Setzt se zréck an déi verlässlechst Cloud Späichere.

Dësen Artikel gouf ursprénglech am kreativen Webdesign Magazin publizéiert Web Designer.