Nu hvor alle nødvendige værktøjer, herunder Node.js, VS Code og Angular CLI, er installeret, er det tid til at oprette dit første projekt og se, hvordan Angular CLI forenkler udviklingsprocessen.

Hvad er Angular CLI?

Det giver mulighed for:

• Hurtigt at oprette nye projekter med en foruddefineret struktur;

• Generere komponenter, services og andre elementer i projektet;

• Starte en udviklingsserver til test og fejlfinding;

• Bygge applikationen til produktion.

Med Angular CLI behøver du ikke manuelt at konfigurere filer og afhængigheder—alt bliver sat op automatisk.

Opsætning af dit arbejdsområde

Før du opretter et nyt projekt, skal du vælge en passende placering på din computer, hvor du vil gemme dine Angular-projekter.

Hvis du ikke har en dedikeret mappe til projekter, kan du oprette en ved hjælp af følgende kommando:

Denne kommando opretter en ny mappe med navnet projects på den angivne placering.

Dernæst skal du navigere til den nyoprettede mappe ved at køre:

Denne kommando åbner projects-mappen, så du kan arbejde i den.

Oprettelse af et Angular-projekt med CLI

For at oprette et nyt Angular-projekt, skal du køre følgende kommando inde i din projektmappe:

• ng new - kommandoen til at oprette et nyt Angular-projekt;

• angular-app - projektnavnet (du kan bruge et hvilket som helst navn, du foretrækker).

Efter at have kørt kommandoen, vil Angular CLI stille dig et par opsætningsspørgsmål:

• Vil du tilføje Angular routing? - dette gennemgås senere, så vælg Yes for nu;

• Hvilket stylesheet-format vil du bruge? - dette bestemmer typen af stylesheets til dit projekt. Det anbefales at vælge CSS, men du kan vælge den mulighed, der passer dig bedst.

Når du har bekræftet disse indstillinger, vil Angular CLI begynde at installere afhængigheder. Denne proces kan tage et par minutter, da alle nødvendige pakker downloades og installeres.

Når opsætningen er færdig, vises en succesmeddelelse, der angiver, at projektet er blevet oprettet korrekt.

Nu kan du åbne projektet i VS Code, som vi installerede tidligere.

I det næste kapitel får du et detaljeret overblik over den mappe- og filstruktur, som Angular CLI genererer, for at forstå hvordan et Angular-projekt er organiseret, og hvor de centrale dele af din applikation er placeret.