Mi a belső szögben 8?

Sep 16, 2025
kézikönyv
Angular 8
(Kép hitel: jövő)

Szögletes 8 a Google Angulular legújabb verziója - az egyik A legjobb JavaScript keretrendszerek körül. Ebben a cikkben futunk keresztül, hogy mi van a szögletes 8, és megmutatjuk, hogyan kell elkezdeni. Először is, egy rövid pillantást vetett vissza, mi történt az eddigi keretgel.

Szög bevezetése vezetett paradigmaváltás webfejlesztés: míg a legtöbb könyvtárak szorítkoztak, hogy támogatást nyújt a fejlesztők viszonylag korlátozott építészeti hatást, Sarki fejlesztő csapat ment a másik irányba. Termékeik arra kényszerítenek, hogy egy konkrét architektúrát használjanak, eltérésektől kezdve a nehéz kereskedelmi szempontból értelmetlen. Valójában a legtöbb szögletes kód egy viszonylag összetett átszállítási eszközön keresztül fut, mielőtt valaha is eléri a böngészőt.

A szögben lévő hatalmas siker miatt, a Google Inc-n belül és kívülről, a fejlesztésnek, a nagy stabilizált. Ez azt jelenti, hogy a törés kódváltozások kevés, míg a féléves frissítések összpontosítanak a keretet a webes böngészési táj változásaira.

Szögletes 8 esetén például egy új JavaScript-fordítót telepítenek (bár még mindig kísérletileg). Optimalizálja a generált kompatibilitási kódot, hogy szignifikánsan kisebb és gyorsabb legyen a régebbi böngészők rovására. Ezenkívül a webes munkavállalói támogatás integrálódik a szögletes feldolgozási képességének növeléséhez. Röviden, sokat kell látni -, így merüljünk jobbra.

Ha inkább egy webhelyet kódolna kód nélkül, próbálkozzon ilyen egyszerűen Website Builders . És hogy a dolgok még simábbak legyenek, kapd meg web hosting szolgáltatás.

01. Futtasson egy verziót

A szögletes eszköztár a Nodejs környezetben él. Ebből az írásban, a NODE.JS 10.9 vagy jobbra van szükség - ha egy régebbi verzióra találja magát, Látogasson el a Node.js weboldalára és kapsz frissítést. Az alábbi kód megjeleníti a készülék verzióállapotát. 

 Tamhan @ Tamhan18: ~ $ csomópont -v
V1.4.0
Tamhan @ Tamhan18: ~ $ NPM -V
6.9.0

02. Telepítse a szögletet

A Ginular's Toolchain egy parancssori segédprogramban lakik ng . A jól ismert NPM-en keresztül telepíthető. 

 Tamhan @ Tamhan18: ~ $ sudo npm telepítés -g @ szögletes / cli
Tamhan @ Tamhan18: ~ $ ng verzió

Legyen óvatos, hogy válaszoljon az alábbi képen látható kérdésre.

Click the icon in the top right to enlarge

Kattintson az ikonra a jobb felső sarokban (Kép hitel: Tam Hanna)

A verzióinformáció megszerzése az eszközből elég nehéz - nem csak a szintaxis egyedi, de a kimenet is verbose (lásd az alábbi képet).

Click the icon in the top right to enlarge

Kattintson az ikonra a jobb felső sarokban (Kép hitel: Tam Hanna)

03. Hozzon létre egy projekt csontvázát

ng generálja a szögletes állványzatot. A következő lépésekben szeretnénk hozzáadni az útvonalválasztást, és a SASS-t a CSS transzpilációra használjuk. Ha a telepítés valamilyen okból kifolyólag üríti ki a munkakönyvtárat, és indítsa újra ng Superuser jogokkal. 

 Tamhan @ Tamhan18: ~ $ Mkdir AngularSpace
Tamhan @ Tamhan18: ~ $ CD szögterület /
Tamhan @ Tamhan18: ~ / AngularSpace $ ng Új munka vertél

04. Harness differenciál terhelés

A szögletes új verziója optimalizálja a visszafelé kompatibilis kódot a csökkentett ütközéshez - egy hívott fájl böngészőlistán Lehetővé teszi, hogy eldöntse, hogy mely böngészőket kell támogatni. Nyisd ki böngészőlistán és távolítsa el a szót nem az IE 9-től az IE11 előtt. 

. . .
& gt; 0,5%
Utolsó 2 változat
Firefox ESR
Nem halt meg
IE 9-11 # az IE 9-11 támogatáshoz, távolítsa el a "nem".

05. ... és nézze meg az eredményeket

Rendelje meg a projekt összeállítását, változtassa meg az elosztó mappába, és tisztítsa meg a szükségtelen térképfájlokat. 

 Tamhan @ Tamhan18: ~ / AngularSpace / Workertest $
sudo ng build
Tamhan @ Tamhan18: ~ / AngularSpace / Workertest / Dist / Workertest $ ls

Hívja meg a fát az eredmények megtekintéséhez - ng A különböző kódfájlok több verzióját hoz létre (lásd az alábbi képet).

Click the icon in the top right to enlarge

Kattintson az ikonra a jobb felső sarokban (Kép hitel: Tam Hanna)

06. Spawn egy webes munkás

Web dolgozók hagyja JavaScript adja meg az utolsó határ a natív alkalmazások: masszívan párhuzamos feldolgozási feladatokat. Szögletes 8-val, egy webes munkás létrehozható közvetlenül a kényelemből ng parancssori segédprogram. 

 Tamhan @ Tamhan18: ~ / AngularSpace / Workertest $
sudo ng Web-Worker Myworker létrehozása
Tsconfig.worker.json (212 byte) létrehozása
SRC / APP / MYWORKER.WORKER.TS (157 bájt) létrehozása
Frissítés tsconfig.app.json (236 byte)
Frissítse agular.json (3640 bájt)

07. Fedezze fel a kódot

ng Az első pillantásra valószínűleg megfélemlít. A fájl megnyitása SRC / APP / MYWORKER.WORKER.TS a kódszerkesztő a választás olyan kódot tár fel, amelyet jól kell tudnia a Webmunkás leírás. Elvileg a munkavállaló üzeneteket kap, és szükség szerint feldolgozza őket. 

 //// lt; hivatkozás lib = "Webmunkás" / & gt;
addeventlistener ('Message', ({DATA}) = & gt; {
 CONST RESPESSE = `Munkavállaló válasz
$ {adat} `;
 Postmessage (válasz);
});

08. Állítsa be az állványzatot

A szögletes alkalmazások alkatrészekből állnak. A webes munkásunkat a legjobban a legjobban végeztük Appcomponens , amely kibővült, hogy felvehesse a hallgatót a Oninit esemény. Most csak az állapotinformációt bocsátja ki. 

 Import {Component, Oninit} a "@ szögletes / mag";
@Összetevő({
. . .
})
Export osztály AppComponent eszközök oninit {
 Cím = "Munkavédelem";
 ngoninit () {
   konzol.log ("AppComponent: oninit ()");
 }
}

09. Ne aggódj a konstruktor hiánya miatt

A tapasztalt típusú fejlesztők megkérdezik magukat, hogy miért nem használja a kódolási nyelv által biztosított konstruktorot. Ennek oka az, hogy ngoninit Olyan életciklus esemény, amely az inicializációs esemény megtörténik, ez nem kell korrelálnia az osztályú meghívással.

10. Végezzen egy kis fordítási futást

Ebben a pillanatban a program készen áll a futtatásra. Mi végrehajtjuk azt a kiszolgáló belsejében ng , amit a szolgálati parancs segítségével lehet felhívni. Ennek a megközelítésnek a tiszta aspektusa az, hogy a program észleli a változásokat, és megoldja a projektet a repülés során. 

 Tamhan @ Tamhan18: ~ / AngularSpace / Workertest $
sudo ng szolgálja

Vessen egy pillantást arra, hogy ezt az alábbi képen látja az alábbiakban.

Hit the icon in the top right to enlarge the image

Nyomja meg az ikont a jobb felső sarokban a kép nagyításához (Kép hitel: Tam Hanna)

11. ... és keresse meg a kimenetet

ng szolgálja a helyi webszerver címét, amely általában http: // localhost: 4200 / . Nyissa meg a weboldalt, és nyissa meg a fejlesztői eszközöket az Állapotkimenet megtekintéséhez. Tartsd észben, hogy konzol.log Adatokat ad a böngésző konzolra, és elhagyja a Nodejs példány konzolját érintetlenül.

12. Munkahelyzet

Ebben a pillanatban megteremtjük a munkavállaló példányát, és üzenetet adunk. Eredményeit ezután a böngésző konzol tartalmazza. 

 Ha (typeof munkás! == 'undefined') {
 // Újat csinálni
 const munkás = new munkás ( './ myworker.worker', {típusa: 'modul'});
 worker.onmessage = ({DATA}) = & gt; {
   console.log ('oldal kapott üzenet: $ \
{adat\}');
 };
 munkavállaló.postmessage ("hello");
} más {
     konzol.log ("nincs munkavállaló támogatás");
}

13. Fedezze fel az Ivy-t

A szögletes jövőbeli verziói egy fejlettebb fordítót használnak, ami még kisebb nézethez vezet. Míg a termék még nem fejeződött be, egy Ivy-kompatibilis csontváz megterhelhető NG Új Ivy-Project - Enable-Ivy . Alternatív megoldásként módosítsa a fordító beállításait a részletek szerint. 

 "AngularCompilerOptions": {
       "Eleyivy": igaz
}

A figyelmeztetés szója: Ivy vezet csodálatos méretcsökkentésre, de ez nem szabad. A termék még stabilizálódnia kell, így a termelékeny környezetben nem ajánlott.

14. Próbálja ki a módosított NG feldolgozást

Szögletes ng A parancssor eszköz használta a gyermekszkripteket egy ideig. Szögletes 8 UPS Az ante, hogy most már használhatja ezt a lehetőséget, hogy futtassa a saját feladatokat, mivel az alkalmazás összeáll és összeáll. 

 "Építész": {
       "épít": {
         "Builder": "@ szögletes-devkit /
Építsen szögletes: böngésző ",

Egy szép alkalmazás ng A szkriptek közvetlenül feltöltődik az alkalmazások feltöltésére a felhőszolgáltatásokra. A Git tároló Hasznos szkriptet biztosít, amely feltölti a munkáját egy Firebase számlára.

15. Élvezze a jobb migrációt

A 4-es szögletes 1.x-től vándorló fejlesztők is néven ismertek, méltányos részesedéssel rendelkeztek a navigátorral, hogy a "kombinált" alkalmazásokban dolgozzanak. Az új egységes helyszíni szolgáltatás célja, hogy ezt a folyamatot simábbá tegye.

16. Fedezze fel a munkaterület ellenőrzését

A nagy projektek előnyben részesítik a munkaterület struktúráját dinamikusan megváltoztatni. Ez az új munkaterület API-n keresztül történik, amely a szögletes 8.0-ben bevezetett - a fenti lépést kísérő törzsek gyors áttekintést nyújt a viselkedésről. 

 Az async funkció bemutatja () {
   CONST HOST = munkaterületek.
CreateworkspaceHost (új Nodejssynchost ());
   CONST Workspace = várja a munkaterületeket.
ReadworkSpace ('Path / To / Workspace / Directory / ",
házigazda);
   CONSTRE projekt = munkaterület.projects.
Get ('My-app');
   CONSTROUDTARGET = projekt.targets.
Get ("build");
   buildtarget.options.Optimization = TRUE;
   várja a munkaterületeket.Writeworkspace (munkaterület,
házigazda);
}

17. Gyorsítsa fel a folyamatot

A nagy JavaScript kódbázisok építése unalmas. A Ginularjs jövőbeli verziói a Google bazel építési rendszerét használják fel a folyamat felgyorsítására - sajnos, az írás idején nem volt kész a primetime számára.

18. Kerülje el a halott sétákat

Annak ellenére, hogy a Google rendkívüli ellátást igényel, hogy ne szakítsa meg a kódot, néhány funkciót egyszerűen el kell távolítani, mivel már nem szükségesek. Jelölje be Ez az értékcsökkenés lista További információt a funkciókról, amelyeket el kell kerülni.

19. Nézd meg a naplót

Mint mindig, egy cikk soha nem tehet igazságot egy teljes kiadásra. Szerencsére, Ez a változás napló Részletes listát ad az összes változtatásról - csak abban az esetben, ha valaha úgy érzed, hogy ellenőrizze a funkció impulzusa, különösen kedves neked.

Van egy csomó fájl, amely készen áll a webhelyére? Vissza a legmegbízhatóbbak felhő tároló .

Ezt a cikket eredetileg a Creative Web Design magazinban tették közzé Web designer .

Olvass tovább:

  • Adjon hozzá többnyelvű támogatást a szögben
  • A legjobb JavaScript API-k
  • Hogyan kódolható gyorsabb, könnyebb JavaScript

kézikönyv - Most Popular Articles

Hogyan készítsünk folyékony hatásokat WebGL-vel

kézikönyv Sep 16, 2025

Számos webes tervező keres, hogyan adhat nagy hatással a webhelyük tervét, hogy megragadják a felhasználók figyelmét. A ..

Az Affinity Designer eszközökkel kezdődik

kézikönyv Sep 16, 2025

Ha olyan projekteken dolgozik, mint az App Design vagy a Branding biztosíték, fontos, hogy a különböző elemek között konz..

A hibás kompozíció javítása

kézikönyv Sep 16, 2025

A tavalyi évben létrehoztam az eredeti festményemet, miután a hatalmas fantasy tájakat ihlette művészek, mint Dongbiao Lu és Ruxing Gao. Ez volt az első stilizált környezetem. ..

Kezdje el a diffúzt

kézikönyv Sep 16, 2025

Az egyik legegyszerűbb módja annak, hogy néhány extra életet hozzon semmilyen darabra 3D Art Szín és textúra hozzáadása. A folyamatnak számos neve van, árnyékolók..

Építsen egy animált osztott képernyő céloldalt

kézikönyv Sep 16, 2025

A céloldala kulcsfontosságú elem az Ön számára honlap elrendezés . Ez az első igazi lehetőség, hogy be k..

Ismerje meg az x-részecskékkel való lombozat növekedését

kézikönyv Sep 16, 2025

Olyan statikus növény modellezése, amely az in situ termesztésének megjelenése nem túl kemény, de olyan rúgot hoz létre..

A késtartó eszköz

kézikönyv Sep 16, 2025

Néha az alapokhoz való visszatérés létfontosságú ahhoz, hogy a játék tetejére maradjon, mivel a készségek megújítá..

Hogyan festeni egy hagyományos Brit falu jelenetet

kézikönyv Sep 16, 2025

A középkori templomok, a zöld legelők és a palafa-tollas házak szinonimák a brit vidéki falvakkal. Itt fogom használni a..

Kategóriák