TECHNIK PROGRAMISTA INF. 04
Materiały pomocnicze, rozwiązania zadań i arkusze egzaminacyjne – wszystko, czego potrzebujesz, aby zdać egzamin i rozwijać swoje umiejętności programistyczne.

Struktura projektu w Angularze

Struktura projektu w Angular 20 jest zaprojektowana według zasad modularności, skalowalności i łatwości utrzymania. Angular CLI automatycznie generuje optymalną strukturę, która sprawdza się zarówno w małych, jak i enterprise’owych aplikacjach.

Przegląd struktury projektu

Po utworzeniu nowego projektu komendą ng new moja-aplikacja, otrzymujemy następującą strukturę:

moja-aplikacja/
├── .angular/              # [NOWE w Angular 17+] Cache dla szybszej kompilacji
├── .vscode/               # Konfiguracja VS Code (opcjonalne)
├── node_modules/          # Zainstalowane pakiety npm
├── src/                   # Kod źródłowy aplikacji
├── .editorconfig         # Konfiguracja formatowania dla różnych edytorów
├── .gitignore            # Pliki ignorowane przez Git
├── angular.json          # Konfiguracja projektu Angular
├── package.json          # Zależności i skrypty npm
├── package-lock.json     # Zablokowane wersje pakietów
├── README.md             # Dokumentacja projektu
├── tsconfig.app.json     # Konfiguracja TypeScript dla aplikacji
├── tsconfig.json         # Główna konfiguracja TypeScript
└── tsconfig.spec.json    # Konfiguracja TypeScript dla testów

Katalog /src/ – Serce aplikacji

Struktura głównego katalogu źródłowego:

src/
├── app/                  # Komponenty i logika aplikacji
├── assets/               # Zasoby statyczne (obrazy, fonty, JSON)
├── environments/         # Konfiguracja środowisk
├── favicon.ico          # Ikona aplikacji
├── index.html           # Główny plik HTML
├── main.ts              # Punkt wejścia aplikacji
└── styles.scss          # Globalne style aplikacji

Szczegółowy opis plików w /src/:

index.html – Szkielet aplikacji

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>MojaAplikacja</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <!-- Angular wstrzykuje tutaj główny komponent -->
  <app-root></app-root>
</body>
</html>

main.ts – Punkt startowy

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

// Angular 20 - domyślnie używa standalone components
bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

styles.css – Style globalne

/* Możesz importować zmienne, mixiny i reset CSS */
@import 'variables';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  line-height: 1.6;
}

Katalog /src/app/ – Komponenty aplikacji

Struktura w Angular 20 (Standalone Components):

app/
├── components/           # Komponenty UI
│   ├── header/
│   │   ├── header.component.ts
│   │   ├── header.component.html
│   │   ├── header.component.scss
│   │   └── header.component.spec.ts
│   └── footer/
├── pages/               # Komponenty stron/widoków
│   ├── home/
│   └── about/
├── services/            # Serwisy (logika biznesowa)
│   └── api.service.ts
├── models/              # Interfejsy i typy TypeScript
│   └── user.interface.ts
├── guards/              # Route guards
│   └── auth.guard.ts
├── pipes/               # Custom pipes
│   └── currency-pln.pipe.ts
├── directives/          # Custom directives
│   └── highlight.directive.ts
├── app.component.ts     # Główny komponent
├── app.component.html   # Szablon głównego komponentu
├── app.component.scss   # Style głównego komponentu
├── app.component.spec.ts # Testy głównego komponentu
├── app.config.ts        # [NOWE] Konfiguracja aplikacji
└── app.routes.ts        # [NOWE] Definicja tras

2025-09-09