Conţinut
- 01. Rulați o verificare a versiunii
- 02. Instalați Angular
- 03. Creați un schelet de proiect
- 04. Încărcarea diferențială a cablajului
- 05. ... și vezi rezultatele
- 06. Apare un lucrător web
- 07. Explorează codul
- 08. Montați schele
- 09. Nu vă faceți griji cu privire la lipsa constructorului
- 10. Executați o mică rulare de compilare
- 11. ... și găsiți ieșirea
- 12. Pune-te la lucru
- 13. Explorează Ivy
- 14. Încercați modificarea procesării
- 15. Bucurați-vă de migrație îmbunătățită
- 16. Explorează controlul spațiului de lucru
- 17. Accelerează procesul
- 18. Evitați morții care umblă
- 19. Uită-te la jurnalul de schimbări
Angular 8 este cea mai recentă versiune a Google’s Angular - unul dintre cele mai bune cadre JavaScript din jur. În acest articol, vom trece în revistă ceea ce este special la Angular 8 și vă vom arăta cum să începeți. În primul rând, o scurtă privire înapoi la ceea ce s-a întâmplat până acum cu cadrul.
Introducerea Angular a dus la o schimbare de paradigmă în dezvoltarea web: în timp ce majoritatea bibliotecilor s-au limitat la oferirea de asistență dezvoltatorilor cu impact arhitectural relativ limitat, echipa de dezvoltatori Angular a mers în cealaltă direcție. Produsul lor te obligă să folosești o arhitectură specifică, cu abateri variind de la dificile la inutile din punct de vedere comercial. De fapt, majoritatea codului unghiular rulează printr-un lanț de instrumente de transpilare relativ complex înainte de a ajunge vreodată în browser.
Datorită succesului imens al companiei Angular, atât în interiorul, cât și în afara companiei Google Inc, dezvoltarea s-a stabilizat - în general. Aceasta înseamnă că modificările de coduri de rupere sunt puține, în timp ce actualizările semestriale sunt axate pe adaptarea cadrului la schimbările din peisajul de navigare pe web.
În cazul Angular 8, de exemplu, este implementat un nou compilator JavaScript (deși încă experimental). Optimizează codul de compatibilitate generat pentru a fi semnificativ mai mic și mai rapid în detrimentul browserelor mai vechi. Mai mult, suportul Web Worker este integrat pentru a crește capacitatea de procesare a Angular. Pe scurt, sunt multe de văzut - așa că hai să ne scufundăm chiar înăuntru.
Dacă preferați să proiectați un site fără cod, încercați unul dintre acești constructori de site-uri ușoare. Și pentru ca lucrurile să funcționeze și mai ușor, obțineți serviciul de găzduire web corect.
01. Rulați o verificare a versiunii
Lanțul de instrumente Angular trăiește în mediul NodeJS. Începând cu această scriere, este nevoie de Node.js 10.9 sau mai bine - dacă vă aflați într-o versiune mai veche, accesați site-ul web Node.js și obțineți un upgrade. Codul de mai jos arată starea versiunii pe această mașină.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Instalați Angular
Lanțul de instrumente Angular se află într-un utilitar de linie de comandă numit ng. Poate fi instalat prin intermediul binecunoscutului NPM.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: versiunea ~ $ ng
Aveți grijă să răspundeți la întrebarea afișată în imaginea de mai jos.
Obținerea informațiilor despre versiune din instrument este destul de dificilă - nu numai că sintaxa este unică, dar și ieșirea este detaliată (vezi imaginea de mai jos).
03. Creați un schelet de proiect
ng generează schele unghiulare pentru noi. În următorii pași, dorim să adăugăm rutare și să folosim Sass pentru transpilarea CSS. În cazul în care implementarea eșuează din anumite motive, goliți directorul de lucru și reporniți ng cu drepturi de superutilizator.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng new workertest
04. Încărcarea diferențială a cablajului
Noua versiune Angular optimizează codul de compatibilitate înapoi pentru un impact redus - un fișier numit lista de browsere vă permite să decideți ce browsere vor fi acceptate. Deschis lista de browsere și eliminați cuvântul nu în fața IE 9 la IE11.
. . . > 0,5% ultimele 2 versiuni Firefox ESR nu este mort IE 9-11 # Pentru suport IE 9-11, eliminați „nu”.
05. ... și vezi rezultatele
Comandați o compilare a proiectului, schimbați în folderul de distribuție și curățați fișierele de hărți inutile.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Invocați arborele pentru a vedea rezultatele - ng creează mai multe versiuni ale diferitelor fișiere de cod (vezi imaginea de mai jos).
06. Apare un lucrător web
Lucrătorii web permit JavaScript să intre în ultima frontieră a aplicațiilor native: procesarea masivă în paralel a sarcinilor. Cu Angular 8, un web worker poate fi creat chiar din confortul ng utilitar linie de comandă.
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 ) ACTUALIZARE angular.json (3640 octeți)
07. Explorează codul
ngEste posibil ca rezultatul să pară intimidant la prima vedere. Deschiderea fișierului src / app / myworker.worker.ts într-un editor de cod la alegere dezvăluie cod pe care ar trebui să-l cunoașteți bine din WebWorker specificație. În principiu, lucrătorul primește mesaje și le procesează după cum este necesar.
/// referință lib = "webworker" /> addEventListener (‘message’, ({data}) => {const response = `răspunsul lucrătorului la $ {data}`; postMessage (răspuns);});
08. Montați schele
Aplicațiile unghiulare constau din componente. Demiterea lucrătorului nostru web se face cel mai bine în interiorul AppComponent, care este extins pentru a include un ascultător pentru OnInit eveniment. Deocamdată, va emite numai informații de stare.
importați {Component, OnInit} din „@ angular / core”; @Component ({...}) Clasa de export AppComponent implementează OnInit {title = ‘workertest’; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Nu vă faceți griji cu privire la lipsa constructorului
Dezvoltatorii TypeScript cu experiență se întreabă de ce codul nostru nu folosește constructorul oferit de limbajul de programare. Motivul este că ngOnInit este un eveniment al ciclului de viață care se declanșează ori de câte ori are loc un eveniment de inițializare - acest lucru nu trebuie corelat cu invocarea clasei.
10. Executați o mică rulare de compilare
În acest moment, programul este gata să ruleze. Îl vom executa de pe serverul din interiorul ng, care poate fi invocat prin comanda serve. Un aspect îngrijit al acestei abordări este că programul detectează modificările și recompilează proiectul din mers.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Aruncați o privire la figură pentru a vedea acest lucru în acțiune în imaginea de mai jos.
11. ... și găsiți ieșirea
servește introduce adresa serverului său web local, care este de obicei http: // localhost: 4200 /. Deschideți pagina web și deschideți instrumentele pentru dezvoltatori pentru a vedea ieșirea de stare. Ține minte că consolă.log trimite date către consola browserului și lasă neatinsă consola instanței NodeJS.
12. Pune-te la lucru
În acest moment, creăm o instanță a lucrătorului și îi oferim un mesaj. Rezultatele sale sunt apoi afișate în consola browserului.
if (typeof Worker! == 'undefined') {// Creați un nou const worker = new Worker ('./ myworker.worker', {type: 'module'}); worker.onmessage = ({data}) => {console.log ('pagina a primit mesajul: $ {data }'); }; worker.postMessage („salut”); } else {console.log ("Fără asistență pentru lucrători"); }
13. Explorează Ivy
Versiunile viitoare ale Angular vor folosi un compilator mai avansat, ceea ce va duce la vizualizări și mai mici. Deși produsul nu este încă terminat, un schelet activat cu iederă poate fi generat prin un nou proiect de iederă - enable-ivy. Alternativ, modificați setările compilatorului așa cum se arată în fragment.
"angularCompilerOptions": {"enableIvy": true}
Un avertisment: Iedera duce la reduceri uimitoare de dimensiuni, dar nu este gratuită. Produsul nu a fost încă stabilizat, deci nu este recomandat utilizarea acestuia în medii productive.
14. Încercați modificarea procesării
Angular’s ng instrumentul pentru linia de comandă a folosit scripturi copil intern de ceva timp. Angular 8 susține că acum puteți, de asemenea, utiliza această facilitate pentru a vă rula propriile sarcini pe măsură ce aplicația dvs. este asamblată și compilată.
"architect": {"build": {"builder": "@ angular-devkit / build-angular: browser",
O aplicație îngrijită a ng scripturile implică încărcarea directă a aplicațiilor în serviciile cloud. Depozitul Git oferă un script util care vă încarcă munca într-un cont Firebase.
15. Bucurați-vă de migrație îmbunătățită
Dezvoltatorii care migrează departe de Angular 1.x, cunoscut și sub numele de AngularJS, au avut o parte echitabilă a problemelor care determină navigatorul să funcționeze corect în aplicațiile „combinate”. Noul serviciu de localizare unificată își propune să facă acest proces mai ușor.
16. Explorează controlul spațiului de lucru
Proiectele mari beneficiază de capacitatea de a schimba dinamic structura spațiului de lucru. Acest lucru se face prin noua API Workspace introdusă în Angular 8.0 - fragmentul care însoțește acest pas oferă o prezentare rapidă a comportamentului.
funcția de sincronizare demonstrează () {const gazdă = spații de lucru. createWorkspaceHost (nou NodeJsSyncHost ()); const workspace = așteaptă spații de lucru. readWorkspace ('cale / către / spațiu de lucru / director /', gazdă); proiectul const = workspace.projects. get („aplicația mea”); const buildTarget = project.targets. get (‘build’); buildTarget.options.optimization = adevărat; așteaptă workspaces.writeWorkspace (spațiu de lucru, gazdă); }
17. Accelerează procesul
Construirea unor baze mari de cod JavaScript devine obositoare. Viitoarele versiuni ale AngularJS vor folosi sistemul de construcție Bazel de la Google pentru a accelera procesul - din păcate, la momentul scrierii nu era pregătit pentru primetime.
18. Evitați morții care umblă
Chiar dacă Google are grijă deosebită să nu rupă codul, unele funcții trebuie pur și simplu eliminate, deoarece nu mai sunt necesare. Verificați această listă de deprecieri pentru a afla mai multe despre caracteristicile care ar trebui evitate.
19. Uită-te la jurnalul de schimbări
Ca întotdeauna, un articol nu poate face niciodată dreptate unei eliberări întregi. Din fericire, acest jurnal de modificări oferă o listă detaliată a tuturor modificărilor - doar în cazul în care v-ați dori vreodată să verificați pulsul unei caracteristici care vă este deosebit de dragă.
Aveți multe fișiere pregătite pentru încărcare pe site-ul dvs.? Faceți o copie de rezervă în cel mai fiabil spațiu de stocare în cloud.
Acest articol a fost publicat inițial în revista de design web creativ Web designer.
