Nå som alle nødvendige verktøy, inkludert Node.js, VS Code og Angular CLI, er installert, er det på tide å opprette ditt første prosjekt og se hvordan Angular CLI forenkler utviklingsprosessen.

Hva er Angular CLI?

Det gir mulighet til å:

• Raskt opprette nye prosjekter med en forhåndsdefinert struktur;

• Generere komponenter, tjenester og andre elementer i prosjektet;

• Starte en utviklingsserver for testing og feilsøking;

• Bygge applikasjonen for produksjonsdistribusjon.

Med Angular CLI trenger du ikke å konfigurere filer og avhengigheter manuelt—alt settes opp automatisk.

Oppsett av arbeidsområde

Før du oppretter et nytt prosjekt, velg en passende plassering på datamaskinen der du ønsker å lagre dine Angular-prosjekter.

Hvis du ikke har en dedikert mappe for prosjekter, opprett en ved å bruke følgende kommando:

Denne kommandoen oppretter en ny mappe med navnet projects på den angitte plasseringen.

Deretter naviger til den nylig opprettede mappen ved å kjøre:

Denne kommandoen åpner projects-mappen, slik at du kan arbeide inni den.

Opprette et Angular-prosjekt med CLI

For å opprette et nytt Angular-prosjekt, kjør følgende kommando inne i prosjektmappen din:

• ng new - kommandoen for å opprette et nytt Angular-prosjekt;

• angular-app - prosjektnavnet (du kan bruke et hvilket som helst navn du ønsker).

Etter at du har kjørt kommandoen, vil Angular CLI stille deg noen oppsettspørsmål:

• Vil du legge til Angular routing? - dette kommer du tilbake til senere, så velg Yes for nå;

• Hvilket stilarkformat vil du bruke? - dette bestemmer hvilken type stilark prosjektet ditt vil bruke. Det anbefales å velge CSS, men du kan velge det alternativet som passer best for deg.

Når du har bekreftet disse valgene, vil Angular CLI begynne å installere avhengigheter. Denne prosessen kan ta noen minutter ettersom alle nødvendige pakker lastes ned og installeres.

Når oppsettet er fullført, vil en suksessmelding vises som indikerer at prosjektet er opprettet.

Nå kan du åpne prosjektet i VS Code, som vi installerte tidligere.

I neste kapittel får du en detaljert gjennomgang av mappestrukturen og filene som genereres av Angular CLI, for å forstå hvordan et Angular-prosjekt er organisert og hvor de viktigste delene av applikasjonen din befinner seg.