Obsah
- 01. Spustit kontrolu verze
- 02. Nainstalujte Angular
- 03. Vytvořte kostru projektu
- 04. Diferenční zatížení kabelového svazku
- 05. ... a podívejte se na výsledky
- 06. Umístit webového pracovníka
- 07. Prozkoumejte kód
- 08. Připravte lešení
- 09. Nedělejte si starosti s nedostatkem konstruktoru
- 10. Proveďte malý kompilační běh
- 11. ... a najděte výstup
- 12. Pusťte se do práce
- 13. Prozkoumejte Ivy
- 14. Zkuste upravit zpracování ng
- 15. Užijte si vylepšenou migraci
- 16. Prozkoumejte ovládání pracovního prostoru
- 17. Urychlete proces
- 18. Vyhýbejte se chůzi mrtvých
- 19. Podívejte se na protokol změn
Angular 8 je nejnovější verze Google's Angular - jednoho z nejlepších rámců JavaScriptu. V tomto článku probereme to, co je na Angular 8 speciální, a ukážeme vám, jak začít. Nejprve krátký pohled zpět na to, co se dosud s rámcem stalo.
Úvod společnosti Angular vedl k posunu paradigmatu ve vývoji webových aplikací: zatímco většina knihoven se omezila na poskytování podpory vývojářům s relativně omezeným architektonickým dopadem, vývojový tým společnosti Angular šel jiným směrem. Jejich produkt vás nutí používat konkrétní architekturu s odchylkami od obtížných po komerčně zbytečné. Ve skutečnosti většina úhlového kódu prochází relativně složitým řetězcem nástrojů pro transpilaci, než se vůbec dotkne prohlížeče.
Vzhledem k obrovskému úspěchu společnosti Angular, uvnitř i vně společnosti Google Inc, se vývoj - obecně - stabilizoval. To znamená, že prolomení změn kódu je málo, zatímco půlroční upgrady jsou zaměřeny na přizpůsobení rámce změnám v prostředí procházení webu.
Například v případě Angular 8 je nasazen nový kompilátor JavaScriptu (i když stále experimentálně). Optimalizuje generovaný kód kompatibility tak, aby byl výrazně menší a rychlejší na úkor starších prohlížečů. Kromě toho je integrována podpora Web Worker, která zvyšuje schopnost zpracování Angular. Stručně řečeno, je toho hodně k vidění - tak se ponořme přímo dovnitř.
Pokud byste raději navrhli web bez kódu, vyzkoušejte některý z těchto jednoduchých nástrojů pro tvorbu webových stránek. A aby vše fungovalo ještě plynuleji, udělejte si webhostingovou službu správně.
01. Spustit kontrolu verze
Řetězec nástrojů Angular žije uvnitř prostředí NodeJS. V době psaní tohoto článku je potřeba Node.js 10.9 nebo lepší - pokud se ocitnete ve starší verzi, navštivte web Node.js a získejte upgrade. Níže uvedený kód zobrazuje stav verze tohoto stroje.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Nainstalujte Angular
Řetězec nástrojů Angular je umístěn v nástroji příkazového řádku s názvem ng. Může být instalován prostřednictvím známého NPM.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng verze
Dejte pozor, abyste odpověděli na otázku zobrazenou na obrázku níže.
Získání informací o verzi z nástroje je poměrně obtížné - nejen jedinečná syntaxe, ale i výstup je podrobný (viz obrázek níže).
03. Vytvořte kostru projektu
ng generuje pro nás Úhlové lešení. V následujících krocích chceme přidat směrování a použít Sass k transpilaci CSS. Pokud nasazení z nějakého důvodu selže, vyprázdněte pracovní adresář a restartujte ng s právy superuživatele.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng nový pracovní test
04. Diferenční zatížení kabelového svazku
Nová verze Angular optimalizuje zpětně kompatibilní kód pro snížení dopadu - soubor s názvem seznam prohlížečů vám umožní rozhodnout, které prohlížeče budou podporovány. Otevřeno seznam prohlížečů a odstranit slovo ne před IE 9 až IE11.
. . . > 0,5% poslední 2 verze Firefox ESR není mrtvý IE 9-11 # Pro podporu IE 9-11 odstraňte „ne“.
05. ... a podívejte se na výsledky
Objednejte kompilaci projektu, přejděte do distribuční složky a vyčistěte nepotřebné soubory map.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Vyvoláním stromu zobrazíte výsledky - ng vytváří více verzí různých kódových souborů (viz obrázek níže).
06. Umístit webového pracovníka
Pracovníci webu nechají JavaScript vstoupit na poslední hranici nativních aplikací: masivně paralelní zpracování úkolů. S Angular 8 lze webového pracovníka vytvořit přímo z pohodlí ng obslužný program příkazového řádku.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng generovat webového pracovníka myworker CREATE tsconfig.worker.json (212 bajtů) CREATE src / app / myworker.worker.ts (157 bajtů) UPDATE tsconfig.app.json (236 bajtů ) UPDATE angular.json (3640 bajtů)
07. Prozkoumejte kód
ngNa první pohled bude pravděpodobně vypadat zastrašující výstup. Otevření souboru src / app / myworker.worker.ts v editoru kódu výběru odhalí kód, který byste měli dobře znát z Webový pracovník Specifikace. Pracovník v zásadě přijímá zprávy a zpracovává je podle potřeby.
/// reference lib = "webworker" /> addEventListener ('message', ({data}) => {const response = `odpověď pracovníka na $ {data}`; postMessage (odpověď);});
08. Připravte lešení
Úhlové aplikace se skládají z komponent. Vystřelení z našeho webového pracovníka se nejlépe provádí uvnitř AppComponent, který je rozšířen o posluchače pro OnInit událost. Prozatím bude vydávat pouze informace o stavu.
importovat {Component, OnInit} z '@ angular / core'; @Component ({...}) Exportní třída AppComponent implementuje OnInit {title = 'workertest'; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Nedělejte si starosti s nedostatkem konstruktoru
Zkušení vývojáři TypeScript si kladou otázku, proč náš kód nepoužívá konstruktor poskytovaný programovacím jazykem. Důvodem je to ngOnInit je událost životního cyklu, která se vyhodí, kdykoli dojde k inicializační události - to nemusí být ve vztahu k vyvolání třídy.
10. Proveďte malý kompilační běh
V tomto okamžiku je program připraven ke spuštění. Provedeme to ze serveru uvnitř ng, které lze vyvolat pomocí příkazu serve. Úhledným aspektem tohoto přístupu je, že program detekuje změny a překládá projekt za běhu.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Podívejte se na obrázek a uvidíte to v akci na obrázku níže.
11. ... a najděte výstup
ng sloužit vloží adresu svého místního webového serveru, což je obvykle http: // localhost: 4200 /. Otevřete webovou stránku a otevřete vývojářské nástroje, abyste viděli stavový výstup. Mějte na paměti, že console.log výstup dat do konzoly prohlížeče a ponechá konzolu instance NodeJS nedotčenou.
12. Pusťte se do práce
V tomto okamžiku vytvoříme instanci pracovníka a poskytneme jí zprávu. Jeho výsledky se poté zobrazí v konzole prohlížeče.
if (typeof Worker! == 'undefined') {// Vytvořit 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 ("Žádná podpora pracovníků"); }
13. Prozkoumejte Ivy
Budoucí verze Angular budou používat pokročilejší kompilátor, což povede k ještě menším pohledům. I když produkt ještě není dokončen, může být vytvořena kostra s břečťanem ng new ivy-project - enable-ivy. Alternativně změňte nastavení kompilátoru, jak je znázorněno ve fragmentu.
"angularCompilerOptions": {"enableIvy": true}
Slovo varování: Ivy vede k úžasnému zmenšení velikosti, ale není to zdarma. Produkt se ještě musí stabilizovat, proto se jeho použití v produktivním prostředí nedoporučuje.
14. Zkuste upravit zpracování ng
Úhlové ng nástroj příkazového řádku po určitou dobu interně používal podřízené 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 elegantní aplikace ng skripty zahrnuje přímé nahrávání aplikací do cloudových služeb. Úložiště Git poskytuje užitečný skript, který nahraje vaši práci na účet Firebase.
15. Užijte si vylepšenou migraci
Vývojáři migrující z Angular 1.x, známého také jako AngularJS, měli spravedlivý podíl na tom, jak navigátor pracovat v „kombinovaných“ aplikacích. Cílem nové služby Unified Location Service je tento proces plynulejší.
16. Prozkoumejte ovládání pracovního prostoru
Velké projekty těží ze schopnosti dynamicky měnit strukturu pracovního prostoru. To se provádí pomocí nového rozhraní Workspace API zavedeného v Angular 8.0 - fragment doprovázející tento krok poskytuje rychlý přehled o chování.
asynchronní funkce demonstrovat () {const host = pracovní prostory. createWorkspaceHost (nový NodeJsSyncHost ()); const pracovní prostor = čekat na pracovní prostory. readWorkspace („cesta / do / pracovního prostoru / adresář /“, hostitel); const project = workspace.projects. get („moje aplikace“); const buildTarget = project.targets. get ('build'); buildTarget.options.optimization = true; čekat workspaces.writeWorkspace (pracovní prostor, hostitel); }
17. Urychlete proces
Vytváření velkých základen kódů JavaScriptu bude únavné. Budoucí verze AngularJS budou k urychlení procesu používat systém sestavení společnosti Bazel od společnosti Google - bohužel v době psaní nebyl připraven na hlavní dobu.
18. Vyhýbejte se chůzi mrtvých
Přestože Google věnuje maximální pozornost tomu, aby kód neporušil, některé funkce je třeba jednoduše odstranit, protože již nejsou potřeba. V tomto seznamu odpisů se dozvíte více o funkcích, kterým byste se měli vyhnout.
19. Podívejte se na protokol změn
Jako vždy, jeden článek nikdy nedokáže spravedlivě celé vydání. Naštěstí tento protokol změn poskytuje podrobný seznam všech změn - pro případ, že byste někdy chtěli zkontrolovat pulz funkce, která je vám obzvláště drahá.
Máte spoustu souborů připravených k nahrání na váš web? Zálohujte je v nejspolehlivějším cloudovém úložišti.
Tento článek byl původně publikován v časopise Creative Web Design Webový designér.
