Obsah
- 01. Spustiť kontrolu verzie
- 02. Nainštalujte Angular
- 03. Vytvorte kostru projektu
- 04. Diferenčné zaťaženie káblového zväzku
- 05. ... a pozrite si výsledky
- 06. Vytvoriť webového pracovníka
- 07. Preskúmajte kód
- 08. Postavte lešenie
- 09. Nerobte si starosti s nedostatkom konštruktéra
- 10. Vykonajte malý beh kompilácie
- 11. ... a nájdite výstup
- 12. Pustite sa do práce
- 13. Preskúmaj Ivy
- 14. Vyskúšajte upravené spracovanie ng
- 15. Užite si vylepšenú migráciu
- 16. Preskúmajte riadenie pracovného priestoru
- 17. Urýchlite proces
- 18. Vyhýbajte sa chodiacim mŕtvym
- 19. Prezrite si protokol zmien
Angular 8 je najnovšia verzia nástroja Angular od spoločnosti Google - jedného z najlepších rámcov JavaScriptu v okolí. V tomto článku si ukážeme, čo je na Angular 8 špeciálne, a ukážeme vám, ako začať. Najprv krátke ohliadnutie nad tým, čo sa doteraz stalo s rámcom.
Úvod spoločnosti Angular viedol k zmene paradigmy vo vývoji webových aplikácií: zatiaľ čo sa väčšina knižníc obmedzila na poskytovanie podpory vývojárom s relatívne obmedzeným architektonickým dopadom, vývojársky tím spoločnosti Angular sa vydal iným smerom. Ich produkt vás núti používať konkrétnu architektúru s odchýlkami od zložitých po komerčne zbytočné. Väčšina uhlových kódov v skutočnosti prechádza pomerne zložitým reťazcom nástrojov na prekladanie skôr, ako sa dostane do prehliadača.
Vďaka obrovskému úspechu spoločnosti Angular, vo vnútri aj mimo spoločnosti Google Inc, sa vývoj - vo všeobecnosti - stabilizoval. To znamená, že zlomových zmien kódu je málo, zatiaľ čo polročné upgrady sú zamerané na prispôsobenie rámca zmenám v prostredí prehliadania webu.
Napríklad v prípade Angular 8 je nasadený nový kompilátor JavaScriptu (aj keď stále experimentálne). Optimalizuje vygenerovaný kód kompatibility tak, aby bol výrazne menší a rýchlejší na úkor starších prehliadačov. Ďalej je integrovaná podpora Web Worker, aby sa zvýšila kapacita spracovania Angular. Stručne povedané, je tu veľa čo vidieť - takže sa ponoríme priamo do toho.
Ak radšej navrhujete web bez kódu, vyskúšajte jeden z týchto jednoduchých nástrojov na tvorbu webových stránok. A aby bol priebeh ešte plynulejší, urobte si správne webhostingovú službu.
01. Spustiť kontrolu verzie
Sada nástrojov Angular žije v prostredí NodeJS. Od tohto písania je potrebný kód Node.js 10.9 alebo lepší. Ak sa nachádzate v staršej verzii, navštívte webovú stránku Node.js a vykonajte upgrade. Nasledujúci kód zobrazuje stav verzie tohto zariadenia.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Nainštalujte Angular
Sieť nástrojov Angular sa nachádza v pomôcke príkazového riadku s názvom ng. Môže byť inštalovaný cez známy NPM.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng verzia
Pri odpovedi na otázku uvedenú na obrázku nižšie buďte opatrní.
Získanie informácií o verzii z nástroja je dosť ťažké - nielen jedinečná syntax, ale aj verbálny výstup (pozri obrázok nižšie).
03. Vytvorte kostru projektu
ng generuje pre nás uhlové lešenie. V nasledujúcich krokoch chceme pridať smerovanie a použiť Sass na transpiláciu CSS. Ak by nasadenie z nejakého dôvodu zlyhalo, vyprázdnite pracovný adresár a reštartujte ng s právami superužívateľa.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng nový pracovný test
04. Diferenčné zaťaženie káblového zväzku
Nová verzia Angular optimalizuje spätne kompatibilný kód na zníženie dopadu - súbor s názvom zoznam prehliadačov vám umožní rozhodnúť sa, ktoré prehľadávače majú byť podporované. Otvorené zoznam prehliadačov a odstráňte slovo nie pred IE 9 až IE11.
. . . > 0,5% posledné 2 verzie Firefox ESR nie je mŕtvy IE 9-11 # Pre podporu IE 9-11 odstráňte „nie“.
05. ... a pozrite si výsledky
Objednajte si kompilát projektu, zmeňte sa na distribučný priečinok a vyčistite nepotrebné súbory máp.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Vyvolať strom na zobrazenie výsledkov - ng vytvára viac verzií rôznych kódových súborov (viď obrázok nižšie).
06. Vytvoriť webového pracovníka
Weboví pracovníci nechajú JavaScript vstúpiť na poslednú hranicu natívnych aplikácií: masívne paralelné spracovanie úloh. So serverom Angular 8 je možné vytvoriť webového pracovníka priamo z pohodlia servera ng nástroj príkazového riadku.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng generovať webový pracovník myworker CREATE tsconfig.worker.json (212 bajtov) CREATE src / app / myworker.worker.ts (157 bajtov) UPDATE tsconfig.app.json (236 bajtov ) UPDATE angular.json (3640 bajtov)
07. Preskúmajte kód
ngNa prvý pohľad bude výstup vyzerať pravdepodobne zastrašujúci. Otvorenie súboru src / app / myworker.worker.ts v editore kódu podľa voľby odhalí kód, ktorý by ste mali dobre poznať z Webový pracovník špecifikácia. Pracovník v zásade prijíma správy a podľa potreby ich spracúva.
/// referencia lib = "webworker" /> addEventListener ('message', ({data}) => {const response = `pracovná odpoveď na $ {data}`; postMessage (response);});
08. Postavte lešenie
Uhlové aplikácie pozostávajú z komponentov. Vypustenie nášho webového pracovníka sa najlepšie deje vo vnútri AppComponent, ktorý je rozšírený o poslucháča súboru OnInit udalosť. Zatiaľ bude vydávať iba informácie o stave.
importovať {Component, OnInit} z '@ angular / core'; @Component ({...}) Exportná trieda AppComponent implementuje OnInit {title = 'workertest'; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Nerobte si starosti s nedostatkom konštruktéra
Skúsení vývojári strojopisu sa pýtajú, prečo náš kód nepoužíva konštruktor poskytnutý programovacím jazykom. Dôvod je ten ngOnInit je udalosť životného cyklu, ktorá sa vyhodí vždy, keď dôjde k inicializačnej udalosti - nemusí sa to vzťahovať na vyvolanie triedy.
10. Vykonajte malý beh kompilácie
V tomto okamihu je program pripravený na spustenie. Vykonáme to zo servera vo vnútri servera ng, ktorú je možné vyvolať pomocou príkazu serve. Úhľadným aspektom tohto prístupu je, že program detekuje zmeny a prekompiluje projekt za behu.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Pozrite sa na obrázok, aby ste to videli v akcii na obrázku nižšie.
11. ... a nájdite výstup
ng slúžiť zadá adresu miestneho webového servera, ktorá je zvyčajne http: // localhost: 4200 /. Otvorte webovú stránku a nástroje pre vývojárov, aby ste videli výstup stavu. Pamätajte na to konzola.log výstupné dáta do konzoly prehliadača a konzola inštancie NodeJS zostane nedotknutá.
12. Pustite sa do práce
V tomto okamihu vytvoríme inštanciu pracovníka a poskytneme jej správu. Jeho výsledky sa potom zobrazia v konzole prehliadača.
if (typeof Worker! == ‘undefined‘) {// Vytvoriť nového pracovníka const = new Worker (‘./ myworker.worker’, {type: ‘module’}); worker.onmessage = ({data}) => {console.log ('page got message: $ {data }'); }; worker.postMessage („ahoj“); } else {console.log ("Žiadna podpora pracovníkov"); }
13. Preskúmaj Ivy
Budúce verzie Angular budú používať pokročilejší kompilátor, čo povedie k ešte menším zobrazeniam. Aj keď produkt ešte nie je dokončený, je možné vytvoriť kostru s povoleným brečtanom ng new ivy-project - enable-ivy. Prípadne zmeňte nastavenia kompilátora, ako je to zobrazené v úryvku.
"angularCompilerOptions": {"enableIvy": true}
Slovo varovania: Ivy vedie k úžasnému zmenšeniu veľkosti, ale nie je to zadarmo. Produkt sa ešte musí stabilizovať, preto sa jeho použitie v produktívnom prostredí neodporúča.
14. Vyskúšajte upravené spracovanie ng
Angular’s ng nástroj príkazového riadku istý čas interne používal podradené skripty. Angular 8 ups ante in that you can now, also, use this facility to run your own tasks as your application is assembled and compiled.
"architect": {"build": {"builder": "@ angular-devkit / build-angular: browser",
Jedna prehľadná aplikácia ng skripty zahŕňa priame nahrávanie aplikácií do cloudových služieb. Úložisko Git poskytuje užitočný skript, ktorý nahráva vašu prácu na účet Firebase.
15. Užite si vylepšenú migráciu
Vývojári migrujúci z Angular 1.x, známeho tiež ako AngularJS, mali značný podiel na problémoch, vďaka ktorým mohol navigátor pracovať správne v „kombinovaných“ aplikáciách. Cieľom novej služby Unified Location Service je tento proces plynulejší.
16. Preskúmajte riadenie pracovného priestoru
Veľké projekty profitujú zo schopnosti dynamicky meniť štruktúru pracovného priestoru. To sa deje prostredníctvom nového rozhrania Workspace API zavedeného v Angular 8.0 - úryvok sprevádzajúci tento krok poskytuje rýchly prehľad o správaní.
async funkcia demonštrovať () {const hostiteľ = pracovné priestory. createWorkspaceHost (nový NodeJsSyncHost ()); const workspace = čakať na pracovné priestory. readWorkspace (‘cesta / do / pracovného priestoru / adresár /’, hostiteľ); const projekt = workspace.projects. get („moja-aplikácia“); const buildTarget = project.targets. získať („zostaviť“); buildTarget.options.optimization = true; čakať workspaces.writeWorkspace (pracovný priestor, hostiteľ); }
17. Urýchlite proces
Vytváranie rozsiahlych báz kódov v jazyku JavaScript je únavné. Budúce verzie AngularJS budú na urýchlenie procesu používať systém zostavovania spoločnosti Bazel od spoločnosti Google - bohužiaľ, v čase písania článku nebol pripravený na hlavný čas.
18. Vyhýbajte sa chodiacim mŕtvym
Aj keď Google venuje mimoriadnu pozornosť tomu, aby kód neporušil, niektoré funkcie je jednoducho potrebné odstrániť, pretože už nie sú potrebné. V tomto zozname odpisov nájdete ďalšie informácie o funkciách, ktorým by ste sa mali vyhnúť.
19. Prezrite si protokol zmien
Ako vždy, jeden článok nemôže nikdy dosiahnuť spravodlivosť voči celému uvedeniu. Tento protokol zmien našťastie poskytuje podrobný zoznam všetkých zmien - pre prípad, že by ste niekedy mali chuť skontrolovať pulz funkcie, ktorá je vám obzvlášť drahá.
Máte veľa súborov pripravených na nahranie na vaše stránky? Zálohujte ich v najspoľahlivejšom cloudovom úložisku.
Tento článok bol pôvodne publikovaný v časopise Creative Web Design Webový dizajnér.
