Predstavujeme uhlové CLI

V tomto príspevku sa dozvieme o Angular CLI a uvidíme, ako ho použiť na inicializáciu nového projektu Angular.

Čo je to uhlové CLI?

Úhlové CLI je oficiálnym nástrojom na inicializáciu a prácu s angulárnymi projektmi. Šetrí vás to pred komplikáciami zložitých konfigurácií a nástrojov na zostavenie, ako je TypeScript, Webpack atď.

Po inštalácii Angular CLI budete musieť spustiť jeden príkaz na vygenerovanie projektu a druhý, aby ste ho mohli obsluhovať pomocou lokálneho vývojového servera, ktorý bude hrať s vašou aplikáciou.

Rovnako ako najmodernejšie frontendové nástroje v súčasnosti je Angular CLI postavený na vrchole Node.js.

Node.js je serverová technológia, ktorá vám umožňuje spúšťať JavaScript na serveri a vytvárať webové aplikácie na strane servera. Avšak, Angular je front-end technológia, takže aj keď potrebujete nainštalovať Node.js na vývojový stroj, je to len pre spustenie CLI.

Po vytvorení aplikácie na produkciu už nebudete potrebovať server Node.js, pretože výsledné balíčky sú iba statické HTML, CSS a JavaScript, ktoré môže obsluhovať akýkoľvek server alebo CDN.

Ako už bolo povedané, ak vytvárate webovú aplikáciu s úplným zásobníkom s Angular, možno budete potrebovať Node.js na vytvorenie zadnej časti, ak chcete používať JavaScript pre prednú a zadnú časť.

Vyskúšajte zásobník MEAN - jedná sa o architektúru, ktorá obsahuje MongoDB, Express (webový server a REST API framework postavený na Node.js) a Angular. Tento článok si môžete prečítať, ak chcete začať príručku krok za krokom.

V tomto prípade sa Node.js používa na vytváranie zadnej časti vašej aplikácie a môže sa nahradiť ľubovoľnou technológiou na strane servera, ako napríklad PHP, Ruby alebo Python. Avšak Angular nezávisí od Node.js okrem nástroja CLI a inštalácie balíkov od npm.

NPM je skratka pre Node Package Manager. Je to register na hosťovanie balíkov uzlov. V posledných rokoch sa tiež používa na publikovanie front-end balíkov a knižníc ako Angular, React, Vue.js a dokonca Bootstrap.

Poznámka: Môžete si stiahnuť našu knihu Angular Book: Zostavte si svoje prvé webové aplikácie pomocou aplikácie Angular zadarmo.

Inštalácia uhlového CLI

Najprv musíte mať vo svojom vývojovom počítači nainštalovaný uzol a npm. Existuje mnoho spôsobov, ako to urobiť, napríklad:

  • pomocou programu NVM (Node Version Manager) na inštaláciu a prácu s viacerými verziami uzlov vo vašom systéme
  • pomocou oficiálneho správcu balíkov vášho operačného systému
  • inštalácia z oficiálnej webovej stránky.

Nechajte to jednoduché a používajte oficiálne webové stránky. Jednoducho navštívte stránku sťahovania a uchopte binárne súbory pre systém Windows a potom postupujte podľa sprievodcu nastavením.

Uistite sa, že je Uzol nainštalovaný vo vašom systéme spustením nasledujúceho príkazu v príkazovom riadku, ktorý by mal zobraziť nainštalovanú verziu Uzla:

$ uzol -v

Potom spustite nasledujúci príkaz na inštaláciu Angular CLI:

$ npm install @ angular / cli

V čase písania tohto dokumentu bude nainštalovaný Angular 8.3.

Ak chcete nainštalovať Angular 9, jednoducho pridajte nasledujúcu značku takto:

$ npm install @ angular / cli @ next

Po úspešnom dokončení príkazu by ste mali mať nainštalovaný Angular CLI.

Stručný sprievodca pre uhlové CLI

Po inštalácii Angular CLI môžete spustiť veľa príkazov. Začnime kontrolou verzie nainštalovaného CLI:

$ ng verzia

Druhý príkaz, ktorý možno budete musieť spustiť, je príkaz help na získanie úplnej pomoci pri používaní:

$ ng pomoc

CLI poskytuje nasledujúce príkazy:

add: Pridá podporu pre externú knižnicu do vášho projektu.

build (b): Zostaví Angular aplikáciu do výstupného adresára s názvom dist / na danej výstupnej ceste. Musí sa vykonať z adresára pracovného priestoru.

config: Načíta alebo nastaví hodnoty uhlovej konfigurácie.

doc (d): Otvorí v prehliadači oficiálnu dokumentáciu Angular (angular.io) a vyhľadá dané kľúčové slovo.

e2e (e): Vytvára a podáva Angular aplikáciu, potom vykonáva testy End-to-End pomocou Protractor.

vygenerovať (g): Generuje a / alebo upravuje súbory na základe schémy.

help: Uvádza zoznam dostupných príkazov a ich krátky popis.

lint (l): Spustí nástroje vkladania do kódu uhlovej aplikácie v danom priečinku projektu.

new (n): Vytvorí nový pracovný priestor a počiatočnú Angular aplikáciu.

run: Spustí vlastný cieľ definovaný vo vašom projekte.

serve (s): Vytvára a zobrazuje vašu aplikáciu, obnovuje zmeny súborov.

test (t): Vykonáva jednotkové testy v projekte.

aktualizácia: Aktualizuje vašu aplikáciu a jej závislosti. Pozri https://update.angular.io/

version (v): Výstupná verzia uhlového CLI.

xi18n: Extrahuje správy i18n zo zdrojového kódu.

Generovanie projektu

Pomocou Angular CLI môžete rýchlo vygenerovať svoj projekt Angular spustením nasledujúceho príkazu v rozhraní príkazového riadka:

$ ng nový frontend

Poznámka: frontend je názov projektu. Môžete si samozrejme zvoliť ľubovoľný platný názov pre svoj projekt. Pretože vytvoríme úplnú aplikáciu, používam frontend ako názov pre front-end aplikáciu.

Ako už bolo spomenuté, CLI sa vás spýta Chcete pridať uhlové smerovanie? a môžete odpovedať zadaním y (Áno) alebo n (Nie), čo je predvolená možnosť. Spýta sa tiež na formát šablón so štýlmi, ktorý chcete použiť (napríklad CSS). Vyberte svoje možnosti a pokračujte stlačením klávesu Enter.

Potom bude váš projekt vytvorený so štruktúrou adresárov a množstvom konfigurácií a kódových súborov. Bude to väčšinou vo formátoch TypeScript a JSON. Pozrime sa na úlohu každého súboru:

  • / e2e /: obsahuje komplexné testy webovej stránky (simulujúce správanie používateľa)
  • / node_modules /: Všetky knižnice tretích strán sú nainštalované do tohto priečinka pomocou inštalácie npm
  • / src /: obsahuje zdrojový kód aplikácie. Väčšina práce sa tu urobí
  • / app /: obsahuje moduly a komponenty
  • / asset /: obsahuje statické prvky, ako sú obrázky, ikony a štýly
  • / environment /: obsahuje konfiguračné súbory špecifické pre dané prostredie (produkcia a vývoj)
  • Browserslist: vyžaduje autoprefixer pre podporu CSS
  • favicon.ico: favicon
  • index.html: hlavný súbor HTML
  • karma.conf.js: konfiguračný súbor pre Karma (testovací nástroj)
  • main.ts: hlavný počiatočný súbor, z ktorého sa zavádza AppModule
  • polyfills.ts: polyfills, ktoré potrebuje Angular
  • styles.css: globálny súbor so štýlmi pre projekt
  • test.ts: Toto je konfiguračný súbor pre Karma
  • tsconfig. *. json: konfiguračné súbory pre TypeScript
  • angular.json: obsahuje konfigurácie pre CLI
  • package.json: obsahuje základné informácie o projekte (názov, popis a závislosti)
  • README.md: súbor so značkami, ktorý obsahuje popis projektu
  • tsconfig.json: konfiguračný súbor pre TypeScript
  • tslint.json: konfiguračný súbor pre TSlint (nástroj statickej analýzy)

Poskytovanie vášho projektu

Úhlové CLI poskytuje kompletný reťazec nástrojov na vývoj aplikácií front-end na lokálnom počítači. Ako taký nemusíte inštalovať lokálny server, ktorý by slúžil vášmu projektu - jednoducho môžete použiť príkaz ng serve z vášho terminálu na doručenie vášho projektu lokálne.

Najprv prejdite do priečinka projektu a spustite nasledujúce príkazy:

$ cd frontend $ ng slúžiť

Teraz môžete prejsť na adresu http: // localhost: 4200 / adresa a začať hrať s aplikáciou front-end. Ak zmeníte zdrojový súbor, stránka sa automaticky znovu načíta.

Vytvára uhlové artefakty

Angular CLI poskytuje príkaz nggener, ktorý pomáha vývojárom generovať základné uhlové artefakty, ako sú moduly, komponenty, smernice, rúry a služby:

$ ng generovať komponent my-komponent

my-component je názov zložky. Angular CLI automaticky pridá odkaz na komponenty, smernice a rúry v súbore src / app.module.ts.

Ak chcete svoj komponent, direktívu alebo potrubie pridať do iného modulu (iného ako hlavný aplikačný modul, app.module.ts), môžete jednoducho predponu názvu komponentu pomenovať modulom a lomítkom:

$ ng g komponent my-module / my-component

my-module je názov existujúceho modulu.

záver

V tomto príspevku sme videli, ako nainštalovať Angular CLI na náš vývojový stroj a použili sme ho na inicializáciu nového projektu Angular od nuly.

Videli sme tiež rôzne príkazy, ktoré môžete použiť počas vývoja vášho projektu na generovanie uhlových artefaktov, ako sú moduly, komponenty a služby.

Autora môžete osloviť alebo sledovať prostredníctvom jeho osobnej webovej stránky, Twitteru, LinkedIn a Githubu.