Kako instalirati Angular na Windows: Vodič za Angular CLI, Node.js i alate za izgradnju

U ovom uputstvu naučit ćemo kako instalirati Angular CLI u Windows i koristiti ga za stvaranje Angular projekta.

Što je kutni CLI?

Angular CLI službeni je alat za inicijalizaciju i rad s Angular projektima. Štedi vas od gnjavaže s složenim konfiguracijama i alatima za izradu poput Typescripta, Webpacka itd.

Nakon instalacije Angular CLI-a, morat ćete pokrenuti jednu naredbu za generiranje projekta, a drugu za posluživanje pomoću lokalnog razvojnog poslužitelja za igranje s vašom aplikacijom.

Kao i većina modernih frontend alata u današnje vrijeme, Angular CLI je izgrađen na vrhu Node.js.

Node.js je poslužiteljska tehnologija koja vam omogućuje pokretanje JavaScript-a na poslužitelju i izradu web aplikacija na strani poslužitelja. Međutim, Angular je prednja tehnologija, pa čak i ako trebate instalirati Node.js na svoj razvojni stroj, on je samo za pokretanje CLI-ja.

Jednom kada izradite svoju aplikaciju za proizvodnju, neće vam trebati Node.js, jer su konačni snopovi samo statični HTML, CSS i JavaScript koje može poslužiti bilo koji poslužitelj ili CDN.

To je rečeno, ako gradite web aplikaciju s punim hrpom s Angulom, možda će vam trebati Node.js za izradu stražnjeg dijela ako želite koristiti JavaScript za prednji i stražnji kraj.

Pogledajte MEAN stog - to je arhitektura koja uključuje MongoDB, Express (web poslužitelj i REST API okvir izgrađen na vrhu Node.js) i Angular. Ovaj članak možete pročitati ako želite započeti korak po korak.

U ovom slučaju, Node.js koristi se za izradu pozadinskog dijela vaše aplikacije i može se zamijeniti bilo kojom tehnologijom na strani poslužitelja koju želite, poput PHP, Ruby ili Python. Ali Angular ne ovisi o Node.js-u, osim za CLI alat i za instaliranje paketa iz npm-a.

NPM je kratica od Node Package Manager. To je registar za hosting Node paketa. Posljednjih godina koristi se i za objavljivanje front end paketa i knjižnica poput Angular, React, Vue.js, pa čak i Bootstrapa.

Napomena : možete preuzeti našu knjigu Angular 8: Izradite svoje prve web aplikacije s Angular 8 besplatno.

Instaliranje Angular CLI na Windows

Prvo, na vašem razvojnom stroju trebaju biti instalirani Node i npm. Postoji mnogo načina za to, kao što su:

  • pomoću NVM-a (Node Version Manager) za instaliranje i rad s više verzija čvora u vašem sustavu
  • pomoću službenog upravitelja paketa vašeg operativnog sustava
  • instalirajući ga sa službene web stranice.

Neka bude jednostavno i služimo se službenim web mjestima. Jednostavno posjetite stranicu za preuzimanje i zgrabite binarne datoteke za Windows, a zatim slijedite čarobnjaka za postavljanje.

Možete se pobrinuti da je Node instaliran na vašem sustavu pokretanjem sljedeće naredbe u naredbenom retku koja bi trebala prikazati instaliranu verziju Nodea:

$ node -v 

Zatim pokrenite sljedeću naredbu za instaliranje Angular CLI:

$ npm install @angular/cli 

Nakon što se naredba uspješno završi, trebali biste instalirati Angular CLI.

Kratki vodič za kutni CLI

Nakon instalacije Angular CLI-a možete pokretati mnoge naredbe. Počnimo s provjerom verzije instaliranog CLI-a:

$ ng version 

Druga naredba koju ćete možda trebati pokrenuti je helpnaredba za dobivanje potpune pomoći oko korištenja:

$ ng help 

CLI pruža sljedeće naredbe:

add: Vašem projektu dodaje podršku za vanjsku knjižnicu.

build (b): Kompajlira kutnu aplikaciju u izlazni direktorij imenovan   dist/  na zadanom izlaznom putu. Mora se izvršiti iz direktorija radnog prostora.

config: Dohvaća ili postavlja vrijednosti kutne konfiguracije.

doc (d): Otvara službenu Angularnu dokumentaciju (angular.io) u pregledniku i traži zadanu ključnu riječ.

e2e (e): Izrađuje i služi Angular aplikaciju, a zatim izvodi end-to-end testove pomoću kutomjera.

generate (g): Generira i / ili mijenja datoteke na temelju sheme.

help: Navodi dostupne naredbe i njihove kratke opise.

lint (l): Pokreće alate za povezivanje na kutu aplikacije Angular u datoj mapi projekta.

new (n): Stvara novi radni prostor i početnu Angular aplikaciju.

run: Pokreće prilagođeni cilj definiran u vašem projektu.

serve (s): Gradi i poslužuje vašu aplikaciju, obnavljajući promjene datoteka.

test (t): Pokreće jedinične testove u projektu.

update: Ažurira vašu aplikaciju i njezine ovisnosti. Pogledajte //update.angular.io/

version (v): Izlazi Angularna CLI verzija.

xi18n: Izvlači i18n poruke iz izvornog koda.

Generiranje projekta

Pomoću Angular CLI možete brzo generirati svoj Angular projekt izvođenjem sljedeće naredbe u sučelju naredbenog retka:

$ ng new frontend 

Napomena: frontend je naziv projekta. Možete, naravno, odabrati bilo koje valjano ime za svoj projekt. Budući da ćemo stvoriti full-stack aplikaciju, koristim  frontend kao naziv za front-end aplikaciju.

Kao što je ranije spomenuto, CLI će vas pitati Želite li dodati Angular usmjeravanje? , a možete odgovoriti unosom y(Da) ili n(Ne), što je zadana opcija. Također će vas pitati o formatu tabele stilova koji želite koristiti (kao što je CSS). Odaberite svoje mogućnosti i pritisnite   Enter  za nastavak.

Kutna 8 struktura projekta

Nakon toga imat ćete svoj projekt stvoren sa strukturom direktorija i hrpom konfiguracija i kodnih datoteka. Bit će uglavnom u formatima TypeScript i JSON. Pogledajmo ulogu svake datoteke:

  • /e2e/: sadrži end-to-end (simuliranje ponašanja korisnika) web stranice
  • /node_modules/: Sve biblioteke trećih strana instalirane su u ovu mapu pomoću  npm install
  • /src/: sadrži izvorni kod aplikacije. Ovdje će se najviše raditi
  • /app/: sadrži module i komponente
  • /assets/: sadrži statičke elemente poput slika, ikona i stilova
  • /environments/: sadrži konfiguracijske datoteke specifične za okruženje (proizvodnja i razvoj)
  • browserslist: potreban autoprefixeru za CSS podršku
  • favicon.ico: favicon
  • index.html: glavna HTML datoteka
  • karma.conf.js: konfiguracijska datoteka za Karmu (alat za testiranje)
  • main.ts: Glavni startnim odakle AppModule se bootstrapped
  • polyfills.ts: polifili potrebni za Angular
  • styles.css: datoteka globalne tablice stilova za projekt
  • test.ts: ovo je konfiguracijska datoteka za Karmu
  • tsconfig.*.json: konfiguracijske datoteke za TypeScript
  • angular.json: sadrži konfiguracije za CLI
  • package.json: sadrži osnovne podatke o projektu (naziv, opis i ovisnosti)
  • README.md: datoteka s oznakom koja sadrži opis projekta
  • tsconfig.json: konfiguracijska datoteka za TypeScript
  • tslint.json: konfiguracijska datoteka za TSlint (alat za statičku analizu)

Posluživanje vašeg projekta

Angular CLI nudi cjelovit lanac alata za razvoj front-end aplikacija na vašem lokalnom računalu. Kao takav, ne trebate instalirati lokalni poslužitelj da biste poslužili vašem projektu - jednostavno možete upotrijebiti   ng servenaredbu s vašeg terminala da lokalno poslužite svoj projekt.

Prvo se pomaknite unutar mape vašeg projekta i pokrenite sljedeće naredbe:

$ cd frontend $ ng serve 

Sada možete prijeći na // localhost: 4200 / adresu da biste se počeli igrati s vašom prednjom aplikacijom. Stranica će se automatski ponovno učitati ako promijenite bilo koju izvornu datoteku.

Stvaranje kutnih artefakata

Angular CLI pruža ng generatenaredbu koja pomaže programerima da generiraju osnovne kutne artefakte kao što su moduli, komponente, direktive, cijevi i usluge:

$ ng generate component my-component 

my-componentje naziv komponente. Kutna CLI će automatski dodati referencu na components, directiveste pipesu src/app.module.tsdatoteci.

Ako želite dodati svoju komponentu, direktivu ili cijev drugom modulu (osim glavnom aplikacijskom modulu, app.module.ts), možete jednostavno dodati komponentu imenu imena modula i koso crtu:

$ ng g component my-module/my-component 

my-module naziv je postojećeg modula.

Zaključak

U ovom uputstvu vidjeli smo kako instalirati Angular CLI na naš Windows sustav i koristili smo ga za inicijalizaciju novog projekta Angular od nule.

Također smo vidjeli razne naredbe koje možete koristiti tijekom razvoja vašeg projekta za generiranje kutnih artefakata kao što su moduli, komponente i usluge.

Pogledajte naše ostale kutne vodiče.

S autorom možete kontaktirati ili ga pratiti putem njegove osobne web stranice, Twittera, LinkedIna i Githuba.