Ce este în interiorul unghiului 8?

Sep 16, 2025

să

(Credit Imagine: Viitor)

Angular 8 este cea mai recentă versiune a unghiului Google - unul dintre Cele mai bune cadre JavaScript. în jurul. În acest articol, vom trece prin ceea ce este special în legătură cu unghiul 8 și vă vom arăta cum să începeți. În primul rând, o scurtă privire înapoi la ceea ce sa întâmplat cu cadrul până acum.

Introducerea unghiulară a condus la o schimbare de paradigmă în dezvoltarea web: în timp ce majoritatea bibliotecilor se limitează la acordarea de sprijin dezvoltatorilor cu un impact arhitectural relativ limitat, echipa de dezvoltatori a unghiulară a intrat în cealaltă direcție. Produsul lor vă forțează să utilizați o arhitectură specifică, cu abateri variind de la dificil la inutilă comercial. De fapt, cele mai multe coduri unghiulare rulează printr-un unelte relativ complex de transpilare înainte de a atinge vreodată browserul.

Datorită succesului imens al unghiului, atât în interiorul, cât și în afara Google Inc, dezvoltarea are - stabilizată și stabilizată. Aceasta înseamnă că modificările codului de rupere sunt puține, în timp ce actualizările semestriale sunt axate pe adaptarea cadrului la schimbările din peisajul navigat pe web.

În cazul unghiului 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. În plus, suportul lucrătorilor web este integrat pentru a crește capacitatea de procesare a unghiularului. Pe scurt, există multe de văzut - deci să ne aruncăm în jos.

Dacă preferați să proiectați un site fără cod, încercați unul dintre acestea ușor Constructori de site-uri web . Și pentru a face lucrurile să funcționeze și mai fină, să-ți faci tu web hosting dreptul de serviciu.

01. Rulați o verificare versiune

Uneltele de unelte ale unghiului trăiește în interiorul mediului NODEJS. De la această scriere, NODE.JS 10.9 sau mai bine este necesar - dacă vă aflați într-o versiune mai veche, Vizitați site-ul NODE.JS și obțineți un upgrade. Codul de mai jos prezintă starea versiunii de pe această mașină.

 Tamhan @ Tamhan18: ~ $ nod -v
v12.4.0.
Tamhan @ Tamhan18: ~ $ npm -v
6.9.0

02. Instalați unghiular

Uneltele unghiulare se află într-o utilitate de linie de comandă numită ng. . Poate fi instalat prin intermediul NPM bine-cunoscut.

 Tamhan @ Tamhan18: ~ $ sudo npm install -G @ angular / CLI
Tamhan @ Tamhan18: ~ $ ng versiune

Aveți grijă să răspundeți la întrebarea afișată în imaginea de mai jos.

Click the icon in the top right to enlarge — Faceți clic pe pictograma din partea dreaptă sus pentru a mări (Credit Imagine: Tam Hanna)

Obținerea informațiilor despre versiune din instrument este destul de dificilă - nu numai este sintaxa unică, dar ieșirea este, de asemenea, verboză (vezi imaginea de mai jos).

03. Creați un schelet de proiect

ng. generează schelele unghiulare pentru noi. În pașii următori, dorim să adăugăm rutare și folosim SASS pentru transpilarea CSS. În cazul în care desfășurarea eșuează din anumite motive, goliți directorul de lucru și reporniți ng. cu drepturi de superuser.

 Tamhan @ Tamhan18: ~ $ Mkdir angularspace
Tamhan @ Tamhan18: ~ $ CD Angularspace /
Tamhan @ Tamhan18: ~ / AngularePace $ ng New Workertest

04. Încărcare diferențială a valorilor

Noua versiune a unghiular optimizează codul de compatibilitate înapoi pentru impact redus - un fișier numit Browserslist. vă permite să decideți ce browsere trebuie să fie acceptate. Deschis Browserslist. și eliminați cuvântul nu în fața a 9 până la IE11.

. . .
& gt; 0,5%
Ultimele 2 versiuni
Firefox Esr.
Nu mort
Adică 9-11 # pentru suportul IE 9-11, eliminați "nu".

05. Și vezi rezultatele

Comandați o compilare a proiectului, schimbarea în dosarul de distribuție și purjarea fișierelor de hartă nereușite.

 Tamhan @ Tamhan18: ~ / AngularePace / Workerst $
sudo ng construi.
Tamhan @ Tamhan18: ~ / angularspace / Muncitor / Dist / Muncitor de $ ls

Invoca copac pentru a vedea rezultatele - ng. Creează mai multe versiuni ale diferitelor fișiere de cod (a se vedea imaginea de mai jos).

06. Îndepărtați un lucrător web

Lucrătorii web Lăsați JavaScript să intre în ultima frontieră a aplicațiilor native: procesarea masiv paralelă a sarcinilor. Cu unghiul 8, un lucrător web poate fi creat chiar de la confortul ng. Comandă utilitate linie.

 Tamhan @ Tamhan18: ~ / AngularePace / Workerst $
sudo ng generează Web-Worker Myworker
Creați tsconfig.worker.json (212 octeți)
Creați SRC / App / Myworker.Worker.ts (157 octeți)
Actualizați tsconfig.app.json (236 octeți)
Update Angular.json (3640 octeți)

07. Explorați codul

ng. Ieșirea este probabil să privească intimidarea la prima vedere. Deschiderea fișierului src / app / myworker.worker.ts în A. Editor de cod. de alegere dezvăluie codul pe care ar trebui să-l cunoașteți bine de la Lucrător web specificație. În principiu, lucrătorul primește mesaje și le procesează după cum este necesar.

 /// lt; referință lib = "webworker" / & gt;
addeventListener ("mesaj" ({date}) = & gt; {
 const răspuns = răspunsul lucrătorului la
$ {date} `;
 postmesaj (răspuns);
});

08. Configurați schele

Aplicațiile unghiulare constau din componente. Aruncarea de pe lucrătorul nostru web este cel mai bine făcut în interiorul AppComponent. , care este extins pentru a include un ascultător pentru Oninit. eveniment. Deocamdată, va emite numai informații despre stare.

 Importul {component, oninit} de la "@ unghiular / core";
@Component ({{
. . .
})
Clasa de export Appcomponent implementează Oninit {
 Titlu = "Coraberst";
 ngoninit () {
   consola.log ("AppComponent: Oninit ()");
 }
}

09. Nu vă faceți griji cu privire la lipsa constructorului

Dezvoltatorii cu experiență experimentată se întreabă de ce codul nostru nu utilizează constructorul furnizat de limba de programare. Motivul pentru asta este asta ngoninit. Este un eveniment de viață care este concediat ori de câte ori are loc un eveniment de inițializare - acest lucru nu trebuie să fie corelat cu invocarea clasei.

10. Executați o rulare mică de compilare

În acest moment, programul este gata să ruleze. O vom executa de la serverul din interiorul lui ng. , care poate fi invocată prin comanda servi. Un aspect îngrijit al acestei abordări este că programul detectează schimbări și recomandă proiectul în zbor.

 Tamhan @ Tamhan18: ~ / AngularePace / Workerst $
sudo ng servi

Aruncați o privire la figura pentru a vedea acest lucru în acțiune în imaginea de mai jos.

Hit the icon in the top right to enlarge the image — Apăsați pictograma în partea dreaptă sus pentru a mări imaginea (Credit Imagine: Tam Hanna)

11. ... și găsiți ieșirea

ng servi Punerea adresei serverului web local, care este de obicei http: // localhost: 4200 / . Deschideți pagina Web și deschideți instrumentele de dezvoltator pentru a vedea ieșirea de stare. Ține minte că consola.log. Ieșiți date la consola browserului și lasă consola instanței NODJS neatinsă.

12. Du-te la muncă

În acest moment, creăm o instanță a lucrătorului și o oferim un mesaj. Rezultatele sale sunt apoi prezentate în consola browserului.

 Dacă (Tipul Worker! == "Undefined ') {
 // Creaza un nou
 Const Worker = New Worker ('./ Myworker.Worker', {Tip: "Modulul"});
 worker.onmessage = ({date}) = & gt; {
   consola.log ("Pagina a primit mesajul: $ \
{date\}');
 };
 lucrător.postMessage ("salut");
} altfel {
     consola.log ("fără suport pentru lucrători");
}

13. Explorați iedera

Versiunile viitoare ale unghiulare vor folosi un compilator mai avansat, ceea ce duce la vederi și mai mici. În timp ce produsul nu este terminat, un schelet activat de Ivy poate fi dat naștere prin NG New Ivy-Project - Enable-Ivy . Alternativ, schimbați setările compilatorului așa cum se arată în fragment.

 "AngarCompileropons": {
       "Enableivy": Adevărat
}

Un cuvânt de avertizare: Ivy conduce la reduceri de dimensiuni uimitoare, dar nu este gratuit. Produsul nu a stabilizat încă, astfel încât utilizarea acestuia în medii productive nu este recomandată.

14. Încercați procesarea ng modificată

Unghiular ng. Instrumentul de linie de comandă a folosit scripturile copilului intern de ceva timp. Unghiul 8 UPS Ante În cazul în care puteți acum, de asemenea, utilizați această facilitate pentru a vă rula propriile sarcini, deoarece aplicația dvs. este asamblată și compilată.

 "arhitect": {
       "construi": {
         "Builder": "@ Angular-Devkit /
Build-unghiular: browser ",

O aplicație îngrijită ng. Scripturile implică încărcarea directă a aplicațiilor la serviciile cloud. Git repository Oferă un script util care încarcă munca dvs. într-un cont de pompieri.

15. Bucurați-vă de migrația îmbunătățită

Dezvoltatorii care migrează departe de unghiul 1.x, cunoscuți și sub numele de Angularjs, au avut o parte echitabilă de probleme care să obțină navigatorul de a lucra chiar în aplicațiile "combinate". Noul serviciu de locație unificat își propune să facă acest proces mai bun.

16. Explorați controlul spațiului de lucru

Proiectele mari beneficiază de capacitatea de a schimba dinamic structura spațiului de lucru. Acest lucru se face prin intermediul noului spațiu de lucru API introdus în unghiul 8.0 - Fragmentul care însoțește acest pas oferă o imagine de ansamblu rapidă a comportamentului.

 Funcția Async demonstrează () {
   const gazdă = spații de lucru.
CreateWorkSpaceHost (New NoDojsynchost ());
   const workspace = așteaptă spații de lucru.
ReadWorkSpace ("Path / to / Space / Directory / ',
gazdă);
   Const Project = Space de lucru .Proiecte.
obțineți ("aplicația mea");
   const buildtarget = proiect.targets.
obțineți ("construi");
   buildtarget.options.optimizare = adevărat;
   așteaptă spațiu de lucru.Writeworkspace (spațiu de lucru,
gazdă);
}

17. Accelerați procesul

Construirea de baze de cod JavaScript mare devine plictisitoare. Versiunile viitoare ale angularjilor vor folosi sistemul Google Bazel Build pentru a accelera procesul - din păcate, la momentul scrisului nu a fost pregătit pentru prima dată.

18. Evitați morții morți

Chiar dacă Google ia o grijă deosebită să nu spargă codul, unele caracteristici trebuie pur și simplu să fie îndepărtate deoarece nu mai sunt necesare. Verifica Această listă de depreciere pentru a afla mai multe despre caracteristicile care ar trebui evitate.

19. Uită-te la jurnalul de schimbare

Ca întotdeauna, un articol nu poate face niciodată dreptate unei versiuni întregi. Din fericire, Această modificare a jurnalului. Oferă o listă detaliată a tuturor modificărilor - doar în cazul în care vă simțiți vreodată că ați verificat pulsul unei caracteristici deosebit de dragi pentru dvs.

Aveți multe fișiere gata pentru încărcarea pe site-ul dvs.? Înapoi în cele mai fiabile Stocare in cloud .

Acest articol a fost publicat inițial în revista Creative Web Design Web designer .

Citeste mai mult:

Adăugați suport multi-lingvistic pentru unghiulară
Cel mai bun apis JavaScript
Cum se cod mai repede, mai ușor JavaScript

Ce este în interiorul unghiului 8?

01. Rulați o verificare versiune

02. Instalați unghiular

03. Creați un schelet de proiect

04. Încărcare diferențială a valorilor

05. Și vezi rezultatele

06. Îndepărtați un lucrător web

07. Explorați codul

08. Configurați schele

09. Nu vă faceți griji cu privire la lipsa constructorului

10. Executați o rulare mică de compilare

11. ... și găsiți ieșirea

12. Du-te la muncă

13. Explorați iedera

14. Încercați procesarea ng modificată

15. Bucurați-vă de migrația îmbunătățită

16. Explorați controlul spațiului de lucru

17. Accelerați procesul

18. Evitați morții morți

19. Uită-te la jurnalul de schimbare

să - Cele mai populare articole

Cum se face o aplicație de ceas Apple

Photoshop Color Schimbare: 2 Instrumente Trebuie să știți

Cum să schimbați fontul în Twitter Bio

Cum să schițezi rapid mâinile

Master Instrumentul cuțitului

Cum să pictezi runele magice strălucitoare

Creați un mediu de joc în motorul ireal 4

Cum se creează o regină viu de zână

Categorii