Kom i gang

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:

Angular Language Service — Autocomplete, fejl-tjek, navigation
Angular Snippets — Hurtige code snippets
Prettier — Automatisk kode-formatering

5 Installér Angular DevTools

En Chrome extension der giver dig superkræfter til at debugge Angular apps.

extension Angular DevTools (Chrome Extension)

Installér fra Chrome Web Store

Giver dig et Angular panel i Chrome DevTools hvor du kan inspicere component træet, se signal værdier og analysere performance. Virker også i Edge.

6 Klon workshop projektet

Vi bygger en CO₂ Klimaberegner trinvist gennem workshoppen. Du kan se den færdige version her. Klon startprojektet:


git clone https://github.com/frontend-specialisten/angular-workshop-sgav.git
cd angular-workshop-sgav
npm install

7 Installér anbefalede extensions

Når du åbner projektet i VS Code, vil du få en popup der spørger om du vil installere anbefalede extensions. Tryk "Install All".

recommend Hvorfor?

Projektet indeholder en .vscode/extensions.json fil der definerer hvilke extensions der giver den bedste oplevelse. Det sikrer at alle har de samme værktøjer under workshoppen.

Ser du ikke popuppen? Åbn Command Palette (Ctrl+Shift+P / Cmd+Shift+P) og søg efter "Extensions: Show Recommended Extensions".

8 Start dev serveren


ng serve

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

9 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.

Tag	Modul	Indhold
`module-0-start`	Start	Tom scaffold
`module-1-start`	Modul 1	Statisk side (alt i app.ts)
`module-2-start`	Modul 2	Components (header, footer, calculator, herd-input, result-panel)
`module-3-start`	Modul 3	Control Flow (@for, @empty, herd-card)
`module-4-start`	Modul 4	Property Binding & Templates
`module-5-start`	Modul 5	Component Communication (@Input/@Output)
`module-6-start`	Modul 6	Signals (input(), output(), signal(), computed(), effect())
`module-7-start`	Modul 7	Services & DI (Emission service, afgiftsberegning)
`module-8-start`	Modul 8	HTTP & Observables
`module-8-complete`	Færdig	Alt komplet

✓ Tjekliste

check_circle Node.js 18+ installeret
check_circle Angular CLI installeret (ng version virker)
check_circle VS Code med Angular Language Service
check_circle Angular DevTools Chrome extension installeret
check_circle Projekt klonet og npm install kørt
check_circle ng serve virker på localhost:4200
check_circle Git tags tilgængelige (git tag --list)

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:

help Få forklaret et koncept med andre ord
lightbulb Få hints til lab-opgaverne (uden at få svaret)
code Spørge om kodeeksempler fra slides
bug_report Få hjælp til fejlbeskeder

💡 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 eco Se den færdige app