Tartalom
- 01. Futtassa a verzióellenőrzést
- 02. Telepítse a szögletes
- 03. Hozzon létre egy projektvázat
- 04. Heveder differenciál terhelés
- 05. ... és nézze meg az eredményeket
- 06. Születik egy webmunkás
- 07. Fedezze fel a kódot
- 08. Állványok felállítása
- 09. Ne aggódjon a kivitelező hiánya miatt
- 10. Hajtson végre egy kis fordítási futtatást
- 11. ... és keresse meg a kimenetet
- 12. Álljon munkába
- 13. Fedezze fel Ivy-t
- 14. Próbálja ki a módosított feldolgozást
- 15. Élvezze a jobb migrációt
- 16. Fedezze fel a munkaterület-vezérlést
- 17. Gyorsítsa fel a folyamatot
- 18. Kerülje a járkáló halottakat
- 19. Nézze meg a változásnaplót
Az Angular 8 a Google Angular legújabb verziója - az egyik legjobb JavaScript keretrendszer. Ebben a cikkben áttekintjük az Angular 8 különlegességét, és megmutatjuk, hogyan kell elindulni. Először egy rövid visszatekintés az eddigi kerettel történtekre.
Az Angular bevezetése paradigmaváltáshoz vezetett a webfejlesztésben: míg a legtöbb könyvtár arra szorítkozott, hogy viszonylag korlátozott építészeti hatású fejlesztőknek nyújtson támogatást, az Angular fejlesztői csapata a másik irányba ment. Termékük arra kényszerít, hogy egy adott architektúrát használjon, az eltérések a nehézektől az üzletileg értelmetlenig terjedhetnek. Valójában a legtöbb szögletes kód egy viszonylag összetett transzpilációs eszközláncon fut át, mielőtt valaha is elérné a böngészőt.
Az Angular hatalmas sikere miatt, a Google Inc-en belül és kívül egyaránt, a fejlesztés nagyjából stabilizálódott. Ez azt jelenti, hogy a töréskód-változtatások kevés, míg a féléves frissítések arra összpontosítanak, hogy a keretrendszert a webböngészési környezet változásaihoz igazítsák.
Az Angular 8 esetében például egy új JavaScript-fordítót telepítenek (bár kísérletileg még mindig). Optimalizálja a generált kompatibilitási kódot, hogy lényegesen kisebb és gyorsabb legyen a régebbi böngészők rovására. Ezenkívül a Web Worker támogatás integrálva van, hogy növelje az Angular feldolgozási képességét. Röviden, sok mindent látni kell - merüljünk hát be közvetlenül.
Ha inkább egy webhelyet tervezne kód nélkül, próbálkozzon az alábbi egyszerű weboldal-készítők egyikével. És hogy a dolgok még gördülékenyebben működjenek, állítsa helyre webtárhely-szolgáltatását.
01. Futtassa a verzióellenőrzést
Az Angular eszközlánca a NodeJS környezetben él. A cikk írásakor a Node.js 10.9 vagy újabb verzióra van szükség - ha régebbi verzióra talál, látogasson el a Node.js webhelyére, és szerezzen be frissítést. Az alábbi kód mutatja a verzió verzióját ezen a gépen.
tamhan @ TAMHAN18: ~ $ csomópont -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Telepítse a szögletes
Az Angular eszközlánca egy megnevezett parancssori segédprogramban található ng. Telepíthető a jól ismert NPM-en keresztül.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng verzió
Óvatosan válaszoljon az alábbi képen látható kérdésre.
A verzió információinak kijuttatása az eszközből meglehetősen nehéz - nemcsak a szintaxis egyedi, hanem a kimenet is bőbeszédű (lásd az alábbi képet).
03. Hozzon létre egy projektvázat
ng generálja számunkra a szögletes állványt. A következő lépésekben hozzá kívánunk adni útválasztást, és a Sass-t használjuk a CSS-transzlációhoz. Ha a telepítés valamilyen okból meghiúsul, ürítse ki a munkakönyvtárat, és indítsa újra ng szuperfelhasználói jogokkal.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng new workestest
04. Heveder differenciál terhelés
Az Angular új verziója optimalizálja a visszamenőleges kompatibilitási kódot a csökkentett hatás érdekében - egy fájl neve böngészők listája segítségével eldöntheti, mely böngészőket kell támogatni. Nyisd ki böngészők listája és távolítsa el a szót nem az IE 9 és az IE11 előtt.
. . . > 0.5% utolsó 2 verzió Firefox ESR not dead IE 9-11 # IE 9-11 támogatás esetén távolítsa el a 'not' parancsot.
05. ... és nézze meg az eredményeket
Rendeljen egy összeállítást a projektről, váltson át a terjesztési mappába, és törölje a felesleges 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 különféle kódfájlok több változatát hozza létre (lásd az alábbi képet).
06. Születik egy webmunkás
A webmunkások hagyják, hogy a JavaScript belépjen a natív alkalmazások utolsó határába: a feladatok tömegesen párhuzamos feldolgozása. Az Angular 8 segítségével webmunkás hozható létre közvetlenül a ng parancssori segédprogram.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng generál webmunkás myworker CREATE tsconfig.worker.json (212 bájt) CREATE src / app / myworker.worker.ts (157 bájt) UPDATE tsconfig.app.json (236 bájt) ) UPDATE angular.json (3640 bájt)
07. Fedezze fel a kódot
ngKimenete valószínűleg első pillantásra megfélemlítőnek tűnik. A fájl megnyitása src / app / myworker.worker.ts a választott kódszerkesztőben felfed egy kódot, amelyet a Webmunkás leírás. Elvileg a munkavállaló üzeneteket kap és szükség szerint feldolgozza.
/// reference lib = "webworker" /> addEventListener (’message’, ({data}) => {const response = `munkavállalói válasz a $ {data}`; postMessage (válasz);});
08. Állványok felállítása
A szögletes alkalmazások alkatrészekből állnak. Webmunkásunk kirúgása a legjobban a AppComponent, amelyet kibővítettek a OnInit esemény. Egyelőre csak állapotinformációkat bocsát ki.
importálja az {Component, OnInit} elemet a ’@ angular / core’ oldalról; @Component ({...}) Export osztály Az AppComponent megvalósítja az OnInit {title = ’workertest’; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Ne aggódjon a kivitelező hiánya miatt
Tapasztalt TypeScript fejlesztők azt kérdezik maguktól, miért nem használja kódunk a programozó nyelv által biztosított konstruktort. Ennek oka az ngOnInit egy életciklus esemény, amely akkor indul, amikor egy inicializálási esemény történik - ezt nem kell korrelálni az osztályhívással.
10. Hajtson végre egy kis fordítási futtatást
Ekkor a program készen áll a futtatásra. A belső szerverről fogjuk végrehajtani ng, amelyet a serve paranccsal lehet meghívni. Ennek a megközelítésnek az a szempontja, hogy a program menet közben észleli a változásokat és újrafordítja a projektet.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Vessen egy pillantást az ábrára, hogy ezt cselekvésként lássa az alábbi képen.
11. ... és keresse meg a kimenetet
tálalás felteszi a helyi webszerver címét, amely általában http: // localhost: 4200 /. Nyissa meg a weblapot, és nyissa meg a fejlesztői eszközöket az állapotkimenet megtekintéséhez. Tartsd észben, hogy konzol.log adatokat bocsát ki a böngésző konzoljára, és érintetlenül hagyja a NodeJS példány konzolját.
12. Álljon munkába
Ebben az időpontban létrehozunk egy példányt a munkavállalóról, és üzenetet adunk neki. Eredményei ezután megjelennek a böngésző konzolon.
if (Workof type! == ’undefined’) {// Hozzon létre egy új const worker = új Worker (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (’page got message: $ {data }’); }; worker.postMessage (’hello’); } else {console.log ("Nincs munkavállalói támogatás"); }
13. Fedezze fel Ivy-t
Az Angular jövőbeli verziói fejlettebb fordítót fognak használni, ami még kisebb nézetekhez vezet. Míg a termék még nincs kész, a borostyán-képes csontváz keletkezhet new ivy-project - enable-borostyán. Alternatív megoldásként módosíthatja a fordító beállításait a kivonatban bemutatott módon.
"angularCompilerOptions": {"enableIvy": true}
Figyelmeztetés: Az Ivy elképesztő méretcsökkentéshez vezet, de nem ingyenes. A terméknek még stabilizálódnia kell, ezért nem ajánlott produktív környezetben használni.
14. Próbálja ki a módosított feldolgozást
Szögletes ng a parancssori eszköz egy ideig belsőleg használta a gyermek szkripteket. A Angular 8 felemeli az előzményeket, mivel mostantól ezt a lehetőséget is használhatja saját feladatok futtatásához, amikor az alkalmazást összeállítja és összeállítja.
"építész": {"build": {"builder": "@ angular-devkit / build-angular: browser",
Az egyik ügyes alkalmazás ng a szkriptek magukban foglalják az alkalmazások közvetlen feltöltését a felhőszolgáltatásokba. A Git adattár hasznos szkriptet tartalmaz, amely feltölti munkáját egy Firebase-fiókba.
15. Élvezze a jobb migrációt
Az Angular 1.x-ről, más néven AngularJS-ről elköltöző fejlesztőknek meglehetősen nagy része volt azokban a kérdésekben, amelyek a navigátor megfelelő működését eredményezték a „kombinált” alkalmazásokban. Az új Unified Location Service célja, hogy ezt a folyamatot gördülékenyebbé tegye.
16. Fedezze fel a munkaterület-vezérlést
A nagy projektek profitálnak a munkaterület szerkezetének dinamikus megváltoztatásának lehetőségéből. Ez az Angular 8.0-ban bevezetett új Workspace API-n keresztül történik - az ezt a lépést kísérő kódrészlet gyors áttekintést nyújt a viselkedésről.
async függvény demonstrálja () {const host = munkaterületek. createWorkspaceHost (új NodeJsSyncHost ()); const munkaterület = várjon munkaterületeket. readWorkspace (’elérési út / munkaterület / könyvtár /’, gazdagép); const project = munkaterület.projects. get (’my-app’); const buildTarget = project.targets. get (’épít’); buildTarget.options.optimization = true; várja a munkaterületeket.writeWorkspace (munkaterület, gazdagép); }
17. Gyorsítsa fel a folyamatot
A nagy JavaScript kódbázisok kiépítése unalmassá válik. Az AngularJS jövőbeli verziói a Google Bazel build rendszerét használják a folyamat felgyorsítására - sajnos sajnos az írás idején még nem volt kész a kezdetekre.
18. Kerülje a járkáló halottakat
Annak ellenére, hogy a Google rendkívül ügyel arra, hogy ne törje meg a kódot, néhány funkciót egyszerűen el kell távolítani, mivel már nincs rá szükség. Ellenőrizze ezt az értékcsökkenési listát, ha többet szeretne megtudni a kerülendő funkciókról.
19. Nézze meg a változásnaplót
Mint mindig, egy cikk soha nem tud igazat adni egy teljes kiadásnak. Szerencsére ez a változásnapló részletes listát tartalmaz az összes változásról - arra az esetre, ha valaha is kedve támadna ellenőrizni egy különösen kedves funkció pulzusát.
Sok fájl készen áll a feltöltésre a webhelyére? Készítsen biztonsági másolatot a legmegbízhatóbb felhőalapú tárhelyről.
Ez a cikk eredetileg a kreatív webdesign magazinban jelent meg Web designer.
