Angular

Kom i gang

arrow_back Forside

1 Installér Node.js

Angular kræver Node.js (version 18 eller nyere). Download og installér fra:

download Download Node.js

nodejs.org — vælg LTS versionen (anbefalet)

Verificér installation:


node --version
npm --version

Du bør se noget i stil med v22.x.x og 10.x.x

2 Installér Git

Git bruges til at hente projektet og navigere mellem moduler.

download Download Git

git-scm.com/downloads — vælg dit operativsystem

Mac: Git følger ofte med Xcode Command Line Tools. Kør git --version for at tjekke.

Verificér:


git --version

3 Installér Angular CLI

Angular CLI er dit primære værktøj til at oprette, bygge og styre Angular projekter.


npm install -g @angular/cli

Verificér:


ng version

4 Installér en editor

edit_note Visual Studio Code (anbefalet)

code.visualstudio.com

Anbefalede extensions:

5 Klon workshop projektet

Vi bygger en CO₂ Klimaberegner trinvist gennem workshoppen. Klon startprojektet:


git clone https://github.com/heimdal-moltbot/angular-workshop-klimaberegner.git
cd angular-workshop-klimaberegner
npm install

6 Start dev serveren


ng serve

Åbn localhost:4200 i din browser. Du bør se en tom starter-app.

7 Navigér mellem moduler

Projektet bruger Git tags til at markere startpunktet for hvert modul. Sådan skifter du:


# Gå til starten af modul 3
git checkout module-3-start
npm install

# Se alle tilgængelige tags
git tag --list
💡 Tip: Hvert tag bygger videre på det forrige. Hvis du sidder fast i en øvelse, kan du altid skippe videre til næste moduls tag og starte derfra.

warning Hvis du har ændringer der konflikter

Når du skifter modul kan Git klage over dine lokale ændringer. Her er dine muligheder:

Option A: Gem dine ændringer midlertidigt (anbefalet)


# Gem dine ændringer
git stash

# Skift modul
git checkout module-4-start
npm install

# (Valgfrit) Hent dine ændringer tilbage
git stash pop

Option B: Smid dine ændringer væk og start frisk


# Nulstil alt og skift modul
git checkout -- .
git checkout module-4-start
npm install

Option C: Tving checkout (overskriver alt)


git checkout -f module-4-start
npm install
💡 Husk: Kør altid npm install efter et tag-skifte — nogle moduler tilføjer nye dependencies.
TagModulIndhold
module-0-startStartTom scaffold
module-1-startModul 1Globale styles
module-2-startModul 2Component shells
module-3-startModul 3@for loops, hardcoded data
module-4-startModul 4@Input/@Output
module-5-startModul 5EmissionService med signals
module-6-startModul 6Routing + inject()
module-7-startModul 7FormsModule
module-8-startModul 8HttpClient + MSW
module-8-completeFærdigAI suggestions

✓ Tjekliste

Sørg for at alt virker inden workshoppen:

chat Workshop Assistent

Under hele workshoppen har du adgang til en AI-drevet assistent der kender alt indholdet — slides, kodeeksempler og lab-opgaver.

Brug den til at:

💡 Tip: Assistenten giver hints frem for komplette løsninger — så du lærer mest muligt ved at gøre det selv.
chat Workshop Assistent slideshow Åbn slides