Představujeme úhlové CLI

V tomto příspěvku se dozvíme o Angular CLI a uvidíme, jak jej použít k inicializaci nového projektu Angular.

Co je to úhlové CLI?

Úhlové CLI je oficiálním nástrojem pro inicializaci a práci s úhlovými projekty. To vám ušetří z potíží složitých konfigurací a sestavení nástrojů, jako je TypeScript, Webpack, atd.

Po instalaci Angular CLI budete muset spustit jeden příkaz pro vygenerování projektu a další, abyste jej mohli obsluhovat pomocí místního vývojového serveru pro hraní s vaší aplikací.

Stejně jako většina moderních nástrojů frontendu je Angular CLI postaveno na Node.js.

Node.js je serverová technologie, která vám umožní spustit na serveru JavaScript a vytvářet webové aplikace na straně serveru. Angular je však front-end technologie, takže i když potřebujete nainstalovat Node.js na vývojový stroj, je to pouze pro spuštění CLI.

Jakmile sestavíte aplikaci pro produkci, nebudete potřebovat Node.js, protože konečné balíčky jsou pouze statické HTML, CSS a JavaScript, které mohou být obsluhovány jakýmkoli serverem nebo CDN.

Jak již bylo řečeno, pokud vytváříte webovou aplikaci s plným zásobníkem s Angular, možná budete potřebovat Node.js pro vytvoření zadní části, pokud chcete použít JavaScript pro přední a zadní konec.

Podívejte se na zásobník MEAN - jedná se o architekturu, která zahrnuje MongoDB, Express (webový server a REST API framework postavený na Node.js) a Angular. Tento článek si můžete přečíst, pokud chcete začít krok za krokem.

V tomto případě se Node.js používá k vytváření zadní části aplikace a lze ji nahradit libovolnou technologií na straně serveru, jako je PHP, Ruby nebo Python. Ale Angular nezávisí na Node.js, kromě nástroje CLI a instalace balíčků od npm.

NPM je zkratka pro Node Package Manager. Je to registr pro hostování balíčků uzlů. V posledních letech se také používá k publikování front-end balíčků a knihoven jako Angular, React, Vue.js a dokonce Bootstrap.

Poznámka: Můžete si stáhnout naši knihu Angular Book: Vytvořte si své první webové aplikace s aplikací Angular zdarma.

Instalace úhlového CLI

Nejprve musíte mít na svém vývojovém počítači nainstalován uzel a npm. Existuje mnoho způsobů, jak to udělat, například:

  • pomocí NVM (Node Version Manager) pro instalaci a práci s více verzemi uzlu ve vašem systému
  • pomocí oficiálního správce balíků vašeho operačního systému
  • instalace z oficiálního webu.

Udržujme to jednoduché a používejte oficiální web. Jednoduše navštivte stránku ke stažení, uchopte binární soubory pro Windows a postupujte podle průvodce nastavením.

Ujistěte se, že je ve vašem systému nainstalován uzel spuštěním následujícího příkazu v příkazovém řádku, který by měl zobrazit nainstalovanou verzi uzlu:

$ uzel -v

Poté spusťte následující příkaz a nainstalujte Angular CLI:

$ npm install @ angular / cli

V době psaní tohoto dokumentu bude nainstalován Angular 8.3.

Pokud chcete nainstalovat Angular 9, jednoduše přidejte následující značku takto:

$ npm install @ angular / cli @ next

Po úspěšném dokončení příkazu byste měli mít nainstalované Angular CLI.

Stručný průvodce pro úhlové CLI

Po instalaci Angular CLI můžete spustit mnoho příkazů. Začněme kontrolou verze nainstalovaného CLI:

$ ng verze

Druhý příkaz, který budete možná muset spustit, je příkaz help pro získání úplné nápovědy k použití:

$ ng help

CLI poskytuje následující příkazy:

add: Přidá do projektu podporu externí knihovny.

build (b): Zkompiluje úhlovou aplikaci do výstupního adresáře s názvem dist / na dané výstupní cestě. Musí být provedeno z adresáře pracovního prostoru.

config: Načte nebo nastaví hodnoty úhlové konfigurace.

doc (d): Otevře v prohlížeči úřední dokumentaci Angular (angular.io) a vyhledá dané klíčové slovo.

e2e (e): Sestavuje a obsluhuje aplikaci Úhlová, poté provádí testy End-to-End pomocí úhloměru.

vygenerovat (g): Generuje a / nebo upravuje soubory na základě schématu.

help: Zobrazí seznam dostupných příkazů a jejich krátkých popisů.

lint (l): Spouští linkovací nástroje na kódu úhlové aplikace v dané složce projektu.

new (n): Vytvoří nový pracovní prostor a počáteční Angular aplikaci.

run: Spustí vlastní cíl definovaný v projektu.

serve (s): Sestavuje a obsluhuje vaši aplikaci, obnovuje změny souborů.

test (t): Spustí testy jednotky v projektu.

update: Aktualizuje vaši aplikaci a její závislosti. Viz https://update.angular.io/

version (v): Výstupy úhlové verze CLI.

xi18n: Extrahuje zprávy i18n ze zdrojového kódu.

Generování projektu

Pomocí Angular CLI můžete rychle vygenerovat svůj projekt Angular spuštěním následujícího příkazu v rozhraní příkazového řádku:

$ ng nové rozhraní

Poznámka: frontend je název projektu. Můžete si samozřejmě vybrat libovolný platný název pro svůj projekt. Protože vytvoříme úplnou aplikaci, používám frontend jako název pro front-end aplikaci.

Jak již bylo zmíněno, CLI se vás zeptá Chcete přidat úhlové směrování? a můžete odpovědět zadáním y (Ano) nebo n (Ne), což je výchozí možnost. Zeptá se vás také na formát šablony stylů, který chcete použít (například CSS). Vyberte své možnosti a pokračujte stisknutím klávesy Enter.

Poté bude váš projekt vytvořen se strukturou adresářů a spoustou konfigurací a kódových souborů. Bude to většinou ve formátech TypeScript a JSON. Podívejme se na roli každého souboru:

  • / e2e /: obsahuje end-to-end (simulace chování uživatelů) testů na webu
  • / node_modules /: Všechny knihovny třetích stran jsou nainstalovány do této složky pomocí instalace npm
  • / src /: obsahuje zdrojový kód aplikace. Většina práce se zde bude dělat
  • / app /: obsahuje moduly a komponenty
  • / asset /: obsahuje statické prvky, jako jsou obrázky, ikony a styly
  • / environment /: obsahuje konfigurační soubory specifické pro prostředí (produkci a vývoj)
  • seznam prohlížečů: potřebuje autoprefixer pro podporu CSS
  • favicon.ico: favicon
  • index.html: hlavní soubor HTML
  • karma.conf.js: konfigurační soubor pro Karma (testovací nástroj)
  • main.ts: hlavní spouštěcí soubor, ze kterého je zaváděn AppModule
  • polyfills.ts: polyfills potřeba Angular
  • styles.css: soubor globálních stylů pro projekt
  • test.ts: Toto je konfigurační soubor pro Karma
  • tsconfig. *. json: konfigurační soubory pro TypeScript
  • angular.json: obsahuje konfigurace pro CLI
  • package.json: obsahuje základní informace o projektu (název, popis a závislosti)
  • README.md: soubor s popisem, který obsahuje popis projektu
  • tsconfig.json: konfigurační soubor pro TypeScript
  • tslint.json: konfigurační soubor pro TSlint (nástroj pro statickou analýzu)

Slouží vašemu projektu

Úhlové CLI poskytuje kompletní řetěz nástrojů pro vývoj front-end aplikací na místním počítači. Jako takový nemusíte instalovat lokální server, aby sloužil vašemu projektu - jednoduše můžete použít příkaz ng serve z vašeho terminálu a sloužit vašemu projektu lokálně.

Nejprve projděte složku projektu a spusťte následující příkazy:

$ cd frontend $ ng sloužit

Nyní můžete přejít na http: // localhost: 4200 / adresa a začít hrát s aplikací front-end. Stránka se automaticky znovu načte, pokud změníte jakýkoli zdrojový soubor.

Generování úhlových artefaktů

Úhlové CLI poskytuje příkaz pro generování ng, který vývojářům pomáhá generovat základní úhlové artefakty, jako jsou moduly, součásti, směrnice, potrubí a služby:

$ ng generovat komponentu my-komponent

my-component je název komponenty. Úhlové CLI automaticky přidá odkaz na komponenty, směrnice a potrubí v souboru src / app.module.ts.

Pokud chcete přidat komponentu, direktivu nebo potrubí do jiného modulu (jiného než hlavní aplikační modul, app.module.ts), můžete jednoduše předponu nazvat názvem komponenty názvem modulu a lomítkem:

$ ng g komponenta my-module / my-component

my-module je název existujícího modulu.

Závěr

V tomto příspěvku jsme viděli, jak nainstalovat Angular CLI na náš vývojový stroj a použili jsme jej k inicializaci nového projektu Angular od nuly.

Viděli jsme také různé příkazy, které můžete použít při vývoji vašeho projektu pro generování úhlových artefaktů, jako jsou moduly, komponenty a služby.

Autora můžete oslovit nebo sledovat prostřednictvím jeho osobních webových stránek, Twitteru, LinkedIn a Githubu.