Content
- 01. Executeu una comprovació de versió
- 02. Instal·leu Angular
- 03. Crea un esquelet de projecte
- 04. Càrrega diferencial d'arnès
- 05. ... i veure els resultats
- 06. Generar un treballador web
- 07. Exploreu el codi
- 08. Instal·leu bastides
- 09. No us preocupeu per la manca de constructor
- 10. Executeu una petita execució de compilació
- 11. ... i cerqueu la sortida
- 12. Comença a treballar
- 13. Exploreu Ivy
- 14. Proveu de modificar el processament
- 15. Gaudeix d'una migració millorada
- 16. Exploreu el control de l’espai de treball
- 17. Accelerar el procés
- 18. Eviteu els morts que caminen
- 19. Mireu el registre de canvis
Angular 8 és l'última versió d'Angular de Google, un dels millors marcs JavaScript de tot el món. En aquest article, examinarem allò especial d’Angular 8 i us mostrarem com començar. En primer lloc, una breu mirada enrere del que ha passat amb el marc fins ara.
La introducció d’Angular va provocar un canvi de paradigma en el desenvolupament web: mentre la majoria de biblioteques es limitaven a proporcionar assistència a desenvolupadors amb un impacte arquitectònic relativament limitat, l’equip de desenvolupadors d’Angular va anar en l’altra direcció. El seu producte us obliga a utilitzar una arquitectura específica, amb desviacions que van des de difícils fins a inútils comercialment. De fet, la majoria de codi Angular funciona mitjançant una cadena d’eines de transpilació relativament complexa abans que arribi al navegador.
A causa de l'immens èxit d'Angular, tant dins com fora de Google Inc, el desenvolupament s'ha estabilitzat, en general. Això vol dir que els canvis de codi de ruptura són pocs, mentre que les actualitzacions semestrals se centren a adaptar el marc als canvis del paisatge de navegació web.
En el cas d'Angular 8, per exemple, es desplega un nou compilador de JavaScript (encara que encara experimentalment). Optimitza el codi de compatibilitat generat perquè sigui significativament més petit i més ràpid a costa dels navegadors antics. A més, el suport per a treballadors web s’integra per augmentar la capacitat de processament d’Angular. En resum, hi ha molt per veure, així que anem a submergir-nos directament.
Si preferiu dissenyar un lloc sense codi, proveu un d’aquests fàcils creadors de llocs web. I perquè les coses funcionin encara més fàcilment, ajusteu el vostre servei d'allotjament web.
01. Executeu una comprovació de versió
La cadena d’eines d’Angular viu a l’entorn NodeJS. A partir d’aquest escrit, és necessari Node.js 10.9 o superior; si us trobeu amb una versió anterior, visiteu el lloc web Node.js i obteniu una actualització. El codi següent mostra l'estat de la versió en aquesta màquina.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Instal·leu Angular
La cadena d’eines d’Angular resideix en una utilitat de línia d’ordres anomenada ng. Es pot instal·lar mitjançant el conegut NPM.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: versió ~ $ ng
Aneu amb compte de respondre a la pregunta que es mostra a la imatge següent.
Treure informació de la versió de l’eina és bastant difícil, no només la sintaxi és única, sinó que la sortida també és detallada (vegeu la imatge següent).
03. Crea un esquelet de projecte
ng ens genera la bastida angular. En els passos següents, volem afegir enrutament i utilitzar Sass per a la transpilació CSS. Si el desplegament falla per algun motiu, buideu el directori de treball i reinicieu ng amb drets de superusuari.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng new workertest
04. Càrrega diferencial d'arnès
La nova versió d'Angular optimitza el codi de compatibilitat cap enrere per reduir l'impacte (un fitxer anomenat) llista de navegadors us permet decidir quins navegadors s’admeten. Obert llista de navegadors i elimina la paraula no davant de IE 9 a IE11.
. . . > 0,5% 2 darreres versions Firefox ESR no mort IE 9-11 # Per a la compatibilitat amb IE 9-11, elimineu "not".
05. ... i veure els resultats
Demaneu una compilació del projecte, canvieu-lo a la carpeta de distribució i purgeu els fitxers de mapa innecessaris.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Invoca l'arbre per veure els resultats - ng crea diverses versions de diversos fitxers de codi (vegeu la imatge següent).
06. Generar un treballador web
Els treballadors web permeten que JavaScript entri a l'última frontera de les aplicacions natives: processament massiu de tasques en paral·lel. Amb Angular 8, es pot crear un treballador web des de la comoditat de ng utilitat de línia d'ordres.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng generate web-worker myworker CREATE tsconfig.worker.json (212 bytes) CREATE src / app / myworker.worker.ts (157 bytes) UPDATE tsconfig.app.json (236 bytes ) ACTUALITZACIÓ angular.json (3640 bytes)
07. Exploreu el codi
ngÉs probable que la producció sembli intimidant a primera vista. Obertura del fitxer src / app / myworker.worker.ts en un editor de codi escollit revela el codi que hauríeu de conèixer bé des de WebWorker especificació. En principi, el treballador rep missatges i els processa segons sigui necessari.
/// reference lib = "webworker" /> addEventListener (‘message’, ({data}) => {const response = `resposta del treballador a $ {data}`; postMessage (resposta);});
08. Instal·leu bastides
Les aplicacions angulars consisteixen en components. Acomiadar el nostre treballador web és millor fer-ho dins de AppComponent, que s'amplia per incloure un oient per a OnInit esdeveniment. De moment, emetrà només informació d’estat.
importar {Component, OnInit} de '@ angular / core'; @Component ({...}) Classe d'exportació AppComponent implementa OnInit {title = 'workertest'; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. No us preocupeu per la manca de constructor
Els desenvolupadors experimentats de TypeScript es pregunten per què el nostre codi no utilitza el constructor proporcionat pel llenguatge de programació. La raó d’això és que ngOnInit és un esdeveniment del cicle de vida que s'activa sempre que té lloc un esdeveniment d'inicialització; no cal que estigui relacionat amb la invocació de classes.
10. Executeu una petita execució de compilació
En aquest moment, el programa ja està a punt per executar-se. L'executarem des del servidor dins de ng, que es pot invocar mitjançant l'ordre serve. Un aspecte correcte d’aquest enfocament és que el programa detecta canvis i recompila el projecte sobre la marxa.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Mireu la figura per veure-ho en acció a la imatge següent.
11. ... i cerqueu la sortida
ng servir introdueix l'adreça del seu servidor web local, que sol ser http: // localhost: 4200 /. Obriu la pàgina web i obriu les eines per a desenvolupadors per veure l'estat de sortida. Tingueu-ho en compte consola.log envia dades a la consola del navegador i deixa intacta la consola de la instància NodeJS.
12. Comença a treballar
En aquest moment, creem una instància del treballador i li proporcionem un missatge. Els resultats es mostren a la consola del navegador.
if (typeof Worker! == 'undefined') {// Crea un nou treballador const = new Worker ('./ myworker.worker', {type: 'module'}); worker.onmessage = ({data}) => {console.log ('la pàgina té el missatge: $ {data }'); }; worker.postMessage ('hola'); } else {console.log ("No hi ha assistència per a treballadors"); }
13. Exploreu Ivy
Les futures versions d’Angular utilitzaran un compilador més avançat, que donarà visualitzacions encara més petites. Tot i que el producte encara no està acabat, es pot generar un esquelet amb heura nou projecte d’heura: habilita-heura. També podeu canviar la configuració del compilador tal com es mostra al fragment.
"angularCompilerOptions": {"enableIvy": true}
Una advertència: l’heura comporta reduccions de mida sorprenents, però no és gratuïta. El producte encara no s’ha estabilitzat, de manera que no es recomana utilitzar-lo en entorns productius.
14. Proveu de modificar el processament
Angular’s ng l'eina de línia d'ordres va utilitzar els scripts fills internament durant algun temps. Angular 8 augmenta l’avantatge perquè ara també podeu utilitzar aquesta funció per executar les vostres pròpies tasques a mesura que s’aplica i compila la vostra aplicació.
"architect": {"build": {"builder": "@ angular-devkit / build-angular: browser",
Una aplicació ordenada de ng els scripts consisteixen a carregar directament aplicacions als serveis al núvol. El dipòsit de Git proporciona un script útil que penja el vostre treball a un compte de Firebase.
15. Gaudeix d'una migració millorada
Els desenvolupadors que migren d'Angular 1.x, també conegut com AngularJS, han tingut una bona part dels problemes que fan que el navegador funcioni bé en aplicacions "combinades". El nou servei d’ubicació unificada té com a objectiu facilitar aquest procés.
16. Exploreu el control de l’espai de treball
Els grans projectes es beneficien de la possibilitat de canviar dinàmicament l’estructura de l’espai de treball. Això es fa mitjançant la nova API Workspace introduïda a Angular 8.0: el fragment que acompanya aquest pas proporciona una visió general del comportament.
funció asincronitzada demostra () {const host = espais de treball. createWorkspaceHost (nou NodeJsSyncHost ()); const workspace = espera els espais de treball. readWorkspace ('path / to / workspace / directory /', host); projecte const = espai de treball.projectes. get ('la meva aplicació'); const buildTarget = project.targets. get ('construir'); buildTarget.options.optimization = cert; espera workspaces.writeWorkspace (espai de treball, amfitrió); }
17. Accelerar el procés
Construir grans bases de codis JavaScript és tediós. Les futures versions d’AngularJS utilitzaran el sistema de compilació de Bazel de Google per accelerar el procés; per desgràcia, en el moment de l’escriptura no estava preparat per a la primera hora.
18. Eviteu els morts que caminen
Tot i que Google té molta cura de no trencar el codi, algunes funcions simplement s’han d’eliminar perquè ja no són necessàries. Consulteu aquesta llista d’amortitzacions per obtenir més informació sobre les funcions que cal evitar.
19. Mireu el registre de canvis
Com sempre, un article mai no pot fer justícia a una versió completa. Afortunadament, aquest registre de canvis proporciona una llista detallada de tots els canvis, per si de cas us ve de gust comprovar el pols d’una funció especialment estimada per a vosaltres.
Teniu molts fitxers a punt per penjar-los al vostre lloc? Feu una còpia de seguretat a l’emmagatzematge al núvol més fiable.
Aquest article es va publicar originalment a la revista de disseny web creatiu Dissenyador web.
