Sådan installeres Angular på Windows: En guide til Angular CLI, Node.js og Build Tools

I denne vejledning lærer vi, hvordan du installerer Angular CLI i Windows og bruger det til at oprette et Angular-projekt.

Hvad er Angular CLI?

Angular CLI er det officielle værktøj til initialisering og arbejde med Angular-projekter. Det sparer dig for besværet med komplekse konfigurationer og opbygningsværktøjer som TypeScript, Webpack osv.

Efter installation af Angular CLI skal du køre en kommando for at generere et projekt og en anden for at tjene det ved hjælp af en lokal udviklingsserver til at lege med din applikation.

Som de fleste moderne frontend-værktøjer i disse dage er Angular CLI bygget oven på Node.js.

Node.js er en serverteknologi, der giver dig mulighed for at køre JavaScript på serveren og opbygge webapplikationer på serversiden. Angular er dog en frontendteknologi, så selvom du har brug for at installere Node.js på din udviklingsmaskine, er det kun til at køre CLI.

Når du først har bygget din app til produktion, har du ikke brug for Node.js, fordi de endelige bundter kun er statisk HTML, CSS og JavaScript, der kan betjenes af enhver server eller et CDN.

Når det er sagt, hvis du bygger en full-stack webapplikation med Angular, skal du muligvis have Node.js til at oprette backend-delen, hvis du kan lide at bruge JavaScript til frontend og back-end.

Tjek MEAN-stakken - det er en arkitektur, der inkluderer MongoDB, Express (en webserver og REST API-ramme bygget oven på Node.js) og Angular. Du kan læse denne artikel, hvis du vil have en trinvis vejledning for at komme i gang.

I dette tilfælde bruges Node.js til at oprette den bageste del af din app og kan erstattes med enhver serverside-teknologi, som du ønsker, såsom PHP, Ruby eller Python. Men Angular afhænger ikke af Node.js undtagen dets CLI-værktøj og installation af pakker fra npm.

NPM står for Node Package Manager. Det er et register til hosting af Node-pakker. I de senere år er det også blevet brugt til at udgive frontendpakker og biblioteker som Angular, React, Vue.js og endda Bootstrap.

Bemærk : Du kan downloade vores Angular 8-bog: Byg dine første webapps med Angular 8 gratis.

Installation af kantet CLI på Windows

Først skal du have Node og npm installeret på din udviklingsmaskine. Der er mange måder at gøre det på, såsom:

  • ved hjælp af NVM (Node Version Manager) til installation og arbejde med flere versioner af node i dit system
  • ved hjælp af den officielle pakkehåndtering af dit operativsystem
  • installere det fra det officielle websted.

Lad os holde det enkelt og bruge det officielle websted. Du skal blot besøge download-siden og få fat i binærfilerne til Windows og derefter følge installationsguiden.

Du kan sikre dig, at Node er installeret på dit system ved at køre følgende kommando i en kommandoprompt, der skal vise den installerede version af Node:

$ node -v 

Kør derefter følgende kommando for at installere Angular CLI:

$ npm install @angular/cli 

Når kommandoen er afsluttet, skal du have Angular CLI installeret.

En hurtig guide til kantet CLI

Efter installation af Angular CLI kan du køre mange kommandoer. Lad os starte med at kontrollere versionen af ​​den installerede CLI:

$ ng version 

En anden kommando, som du muligvis har brug for at køre, er helpkommandoen til at få en komplet brugshjælp:

$ ng help 

CLI indeholder følgende kommandoer:

add: Føjer support til et eksternt bibliotek til dit projekt.

build (b): Kompilerer en vinkelapp til et outputkatalog med navnet   dist/  på den givne outputsti. Skal udføres fra et arbejdsområdekatalog.

config: Henter eller indstiller kantede konfigurationsværdier.

doc (d): Åbner den officielle Angular-dokumentation (angular.io) i en browser og søger efter et givet søgeord.

e2e (e): Bygger og serverer en Angular-app og kører derefter end-to-end-tests ved hjælp af Vinkelmåler.

generate (g): Genererer og / eller ændrer filer baseret på en skematisk oversigt.

help: Viser tilgængelige kommandoer og deres korte beskrivelser.

lint (l): Kører fnugværktøjer på Angular app-kode i en given projektmappe.

new (n): Opretter et nyt arbejdsområde og en indledende Angular-app.

run: Kører et brugerdefineret mål defineret i dit projekt.

serve (s): Bygger og betjener din app, genopbygger på filændringer.

test (t): Kører enhedstest i et projekt.

update: Opdaterer din applikation og dens afhængigheder. Se //update.angular.io/

version (v): Udgange kantet CLI-version.

xi18n: Uddrag i18n-meddelelser fra kildekoden.

Generering af et projekt

Du kan bruge Angular CLI til hurtigt at generere dit Angular-projekt ved at køre følgende kommando i din kommandolinjegrænseflade:

$ ng new frontend 

Bemærk: frontend er projektets navn. Du kan selvfølgelig vælge et hvilket som helst gyldigt navn til dit projekt. Da vi opretter en full-stack-applikation, bruger jeg  frontend som et navn til front-end-applikationen.

Som tidligere nævnt vil CLI spørge dig Vil du tilføje Angular routing? , og du kan svare ved at indtaste y(Ja) eller n(Nej), som er standardindstillingen. Det vil også spørge dig om det stilarkformat, du vil bruge (såsom CSS). Vælg dine muligheder og tryk for   Enter  at fortsætte.

Vinkel 8 projektstruktur

Derefter får du dit projekt oprettet med en biblioteksstruktur og en masse konfigurationer og kodefiler. Det vil for det meste være i TypeScript- og JSON-formater. Lad os se rollen for hver fil:

  • /e2e/: indeholder end-to-end (simulering af brugeradfærd) test af hjemmesiden
  • /node_modules/: Alle tredjepartsbiblioteker installeres i denne mappe vha  npm install
  • /src/: indeholder applikationens kildekode. Her arbejdes mest
  • /app/: indeholder moduler og komponenter
  • /assets/: indeholder statiske aktiver som billeder, ikoner og stilarter
  • /environments/: indeholder miljø (specifikke produktions- og udviklingsfiler) konfigurationsfiler
  • browserslist: nødvendigt af autoprefixer til CSS-support
  • favicon.ico: Favicon
  • index.html: den vigtigste HTML-fil
  • karma.conf.js: konfigurationsfilen til Karma (et testværktøj)
  • main.ts: den primære startfil, hvorfra AppModule bootstrappes
  • polyfills.ts: polyfills behov for Angular
  • styles.css: den globale stilarkfil til projektet
  • test.ts: dette er en konfigurationsfil til Karma
  • tsconfig.*.json: konfigurationsfilerne til TypeScript
  • angular.json: indeholder konfigurationerne til CLI
  • package.json: indeholder de grundlæggende oplysninger om projektet (navn, beskrivelse og afhængigheder)
  • README.md: en markdown-fil, der indeholder en beskrivelse af projektet
  • tsconfig.json: konfigurationsfilen til TypeScript
  • tslint.json: konfigurationsfilen til TSlint (et statisk analyseværktøj)

Betjener dit projekt

Angular CLI giver en komplet værktøjskæde til udvikling af frontend-apps på din lokale maskine. Som sådan behøver du ikke installere en lokal server til at betjene dit projekt - du kan simpelthen bruge   ng servekommandoen fra din terminal til at betjene dit projekt lokalt.

Naviger først inde i projektets mappe, og kør følgende kommandoer:

$ cd frontend $ ng serve 

Du kan nu navigere til // localhost: 4200 / adresse for at begynde at spille med din frontend-applikation. Siden genindlæses automatisk, hvis du ændrer en kildefil.

Generering af kantede artefakter

Angular CLI giver en ng generatekommando, der hjælper udviklere med at generere grundlæggende vinklede artefakter såsom moduler, komponenter, direktiver, rør og tjenester:

$ ng generate component my-component 

my-componenter navnet på komponenten. Den Kantet CLI vil automatisk tilføje en henvisning til components, directivesog pipesi src/app.module.tsfilen.

Hvis du vil tilføje din komponent, dit direktiv eller et rør til et andet modul (bortset fra hovedapplikationsmodulet, app.module.ts), kan du ganske enkelt prefikse navnet på komponenten med modulnavnet og en skråstreg:

$ ng g component my-module/my-component 

my-module er navnet på et eksisterende modul.

Konklusion

I denne vejledning har vi set, hvordan vi installerer Angular CLI på vores Windows-maskine, og vi brugte den til at initialisere et nyt Angular-projekt fra bunden.

Vi har også set forskellige kommandoer, som du kan bruge gennem hele udviklingen af ​​dit projekt til at generere kantede artefakter såsom moduler, komponenter og tjenester.

Tjek vores andre Angular tutorials.

Du kan nå ud til eller følge forfatteren via hans personlige websted, Twitter, LinkedIn og Github.