Summary  
This chapter explains the structure of an Angular project by outlining its key folders and configuration files, and shows how the application is bootstrapped and served using Angular CLI.  

General domain of usage  
Frontend web application development


Når du opretter et projekt ved hjælp af **Angular CLI**, genereres der en velorganiseret **mappe-** og **filstruktur**. Denne struktur spiller en afgørende rolle i organiseringen af **kode** og gør udviklingen mere **effektiv** og **skalerbar**.

Du vil udforske de **centrale mapper** og **filer**, der automatisk oprettes, når du opsætter et nyt **Angular-projekt**.

# Projektstruktur

Når du kører kommandoen `ng new angular-app`, genererer **Angular CLI** følgende **struktur**:

📂 `src/` – **Applikationens kildekode**.

Denne mappe indeholder de **centrale filer** og **konfigurationer**, der kræves til din **Angular-applikation**.

# Kørsel af en Angular-applikation

For at starte din **Angular-app** skal du først åbne **terminalen**. I **VS Code** kan du bruge disse genvejstaster:

- **macOS**: `Cmd + J` eller `` Cmd + ` ``;

- **Windows**: `Ctrl + J` eller `` Cmd + ` ``.

Alternativt kan du gå til **Vis** → **Terminal** fra topmenuen.

Kør nu følgende **kommando**:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css">
    <link rel="stylesheet" href="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css">
  </head>
  <body>
    <div class="text-widget">
      
      <input type="text" class="text-field" id="widget1-text" value="ng serve
">
      
      <button class="copy-button" onclick="handleClick('widget1-text', 'widget1-notify')">
        <svg width="20" height="20" viewBox="0 0 32 32" xml:space="preserve">
          <g>
            <path d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z" fill="#a6b8e6"></path>
          </g>
        </svg>
      </button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

Denne **kommando** kompilerer **projektet** og starter en lokal **udviklingsserver**. Når processen er færdig, vil **terminalen** vise en besked med en **URL**:

Åbn **URL'en** (`http://localhost:4200/`) i din **browser**, og du vil se **Angular velkomstsiden**.

Hvad er hovedformålet med mappen `src` i et Angular-projekt?

Hvad er rollen for `package.json` i et Angular-projekt?


Opdag, hvordan du bygger moderne webapplikationer med Angular, et af de mest kraftfulde frontend-rammeværk. Du starter med kernekoncepterne, opsætter dit udviklingsmiljø og bevæger dig gradvist videre til at bygge dynamiske, interaktive komponenter. Undervejs arbejder du med direktiver, services, routing og den nyeste tilgang med Standalone Components. For hvert trin opnår du praktiske færdigheder til sikkert at udvikle og organisere Angular-applikationer efter branchens bedste praksis.

Opdag de centrale koncepter i Angular, og hvordan det forenkler webudvikling. Få viden om dets nøgleprincipper, udvikling og hvordan de nødvendige værktøjer opsættes for at begynde at udvikle applikationer.

Opdag grundlæggende principper for komponenter og skabeloner i Angular, herunder hvordan de oprettes, struktureres og interagerer med hinanden for at opbygge dynamiske, datadrevne applikationer.

Dyk ned i Angulars direktiver og pipes for at lære, hvordan de gør dine skabeloner mere intelligente og dine data mere rene. Opdag, hvordan du kan kontrollere DOM-adfærd med direktiver og transformere viste data med kraftfulde, indbyggede eller brugerdefinerede pipes.

Lær at organisere og genbruge logik i dine Angular-applikationer ved hjælp af tjenester. Du vil opdage, hvordan du opretter tjenester og injicerer dem i komponenter med Angulars indbyggede afhængighedsinjektionssystem. Dette holder din kode ren, modulær og lettere at vedligeholde.

Lær, hvordan Angular-applikationer tidligere var afhængige af moduler, og opdag, hvorfor frameworket nu anvender en mere fleksibel tilgang med selvstændige komponenter. Dyk ned i strukturen af NgModules, forstå deres centrale elementer, og udforsk, hvornår og hvordan man bruger selvstændige komponenter i moderne Angular-udvikling.

Lær, hvordan Angular håndterer routing og navigation for at opbygge dynamiske single-page-applikationer. I dette afsnit vil du opdage, hvordan man definerer ruter og navigerer mellem visninger ved hjælp af Angulars indbyggede værktøjer.

Angular Projektstruktur

Projektstruktur

Applikationskode

Konfigurationsfiler

Yderligere filer

Kørsel af en Angular-applikation

1. Hvad er hovedformålet med mappen `src` i et Angular-projekt?

2. Hvad er rollen for `package.json` i et Angular-projekt?