Nu när alla nödvändiga verktyg, inklusive Node.js, VS Code och Angular CLI, är installerade är det dags att skapa ditt första projekt och se hur Angular CLI förenklar utvecklingsprocessen.

Vad är Angular CLI?

Det möjliggör:

• Snabb skapande av nya projekt med en fördefinierad struktur;

• Generering av komponenter, tjänster och andra projektdelar;

• Start av en utvecklingsserver för testning och felsökning;

• Byggnation av applikationen för produktionsdistribution.

Med Angular CLI behöver du inte manuellt konfigurera filer och beroenden—allt ställs in automatiskt.

Konfigurera din arbetsyta

Innan du skapar ett nytt projekt, välj en lämplig plats på din dator där du vill lagra dina Angular-projekt.

Om du inte har en dedikerad mapp för projekt, skapa en med följande kommando:

Detta kommando skapar en ny mapp med namnet projects på den angivna platsen.

Nästa, navigera till den nyskapade mappen genom att köra:

Detta kommando öppnar mappen projects, vilket gör att du kan arbeta inuti den.

Skapa ett Angular-projekt med CLI

För att skapa ett nytt Angular-projekt, kör följande kommando inuti din projektmapp:

• ng new - kommandot för att skapa ett nytt Angular-projekt;

• angular-app - projektnamnet (du kan använda vilket namn du vill).

Efter att ha kört kommandot kommer Angular CLI att ställa några inställningsfrågor:

• Vill du lägga till Angular routing? - detta kommer att behandlas senare, så välj Yes för tillfället;

• Vilket format för stilmallar vill du använda? - detta avgör vilken typ av stilmallar som används i projektet. Jag rekommenderar att välja CSS, men du kan välja det alternativ som passar dig bäst.

När du har bekräftat dessa alternativ kommer Angular CLI att börja installera beroenden. Denna process kan ta några minuter eftersom alla nödvändiga paket laddas ner och installeras.

När installationen är klar visas ett meddelande om att projektet har skapats.

Nu kan du öppna projektet i VS Code, som vi installerade tidigare.

I nästa kapitel kommer du att titta närmare på mapp- och filstrukturen som genereras av Angular CLI för att förstå hur ett Angular-projekt är organiserat och var de viktigaste delarna av din applikation finns.