Pierwszy projekt w Visual Studio — struktura Angular + ASP.NET Core

Czas utworzyć pierwszy prawdziwy projekt łączący Angular i ASP.NET Core i zrozumieć, z jakich plików i folderów się składa. To trochę jak rozpakowanie nowej walizki narzędzi — zanim zaczniesz cokolwiek budować, warto wiedzieć, co gdzie leży i do czego służy. Ta lekcja pokazuje strukturę projektu oraz mapę wszystkich technologii, które poznasz krok po kroku w kolejnych lekcjach.

Zanim zaczniesz — wymagane komponenty. Szablon "ASP.NET Core with Angular" pojawia się na liście TYLKO, jeśli w Visual Studio Installer zaznaczony jest komponent "ASP.NET and web development". Dodatkowo potrzebujesz zainstalowanego Node.js (sprawdzisz to, wpisując w terminalu node --version — jeśli polecenie nie istnieje, pobierz Node.js LTS ze strony nodejs.org PRZED utworzeniem projektu, inaczej frontend Angular się nie zbuduje).

Tworzenie projektu. W Visual Studio 2026: Plik → Nowy → Projekt → wyszukaj szablon "Angular" i wybierz "ASP.NET Core with Angular" (czasem oznaczony jako "Standalone Angular i ASP.NET Core"). Ten JEDEN szablon tworzy od razu DWA współpracujące projekty w jednym rozwiązaniu (solution) — backend C# i frontend Angular — zamiast każdy budować osobno i ręcznie je łączyć.

Struktura wygenerowanego rozwiązania:

NazwaProjektu/                          (rozwiązanie, "solution")
├── NazwaProjektu.Server/                ← backend ASP.NET Core (C#)
│   ├── Controllers/                     ← kontrolery Web API (zwracają dane)
│   ├── Program.cs                       ← punkt startowy backendu
│   ├── appsettings.json                 ← konfiguracja (connection string itd.)
│   └── NazwaProjektu.Server.csproj
│
└── nazwaprojektu.client/                ← frontend Angular (TypeScript)
    ├── src/
    │   ├── app/
    │   │   ├── app.component.ts         ← główny komponent aplikacji
    │   │   ├── app.component.html       ← jego szablon (widok)
    │   │   ├── app.config.ts            ← konfiguracja aplikacji Angular
    │   │   └── app.routes.ts            ← trasy (routing) aplikacji
    │   ├── index.html                   ← jedyny plik HTML całej aplikacji
    │   └── main.ts                      ← punkt startowy frontendu
    ├── angular.json                     ← konfiguracja narzędzi Angular
    ├── package.json                     ← lista zależności (bibliotek) npm
    └── tsconfig.json                    ← konfiguracja kompilatora TypeScript

Za co odpowiada który element:

Plik/folder	Rola
Server/Controllers/	klasy C# zwracające dane (JSON) do frontendu — pełne omówienie w lekcji 12
Server/Program.cs	konfiguracja backendu — usługi, routing, CORS (żeby Angular mógł się połączyć)
client/src/app/app.component.ts	klasa TypeScript głównego komponentu — jego logika (dane, metody)
client/src/app/app.component.html	szablon (widok) głównego komponentu — HTML z rozszerzeniami Angulara
client/package.json	lista wszystkich bibliotek JavaScript/TypeScript, których projekt używa (odpowiednik .csproj po stronie C#)
client/angular.json	ustawienia narzędzi budujących projekt (jak go skompilować, uruchomić, przetestować)

Mapa technologii, których nauczysz się w kolejnych lekcjach (żebyś wiedział, "co to jest i po co", gdy zobaczysz to pierwszy raz w kodzie):

• Node.js — silnik uruchomieniowy JavaScript poza przeglądarką, na którym działają narzędzia Angulara (lekcja 5);
• TypeScript — język, w którym pisany jest kod Angulara (rozszerzenie JavaScriptu o typy, lekcja 6);
• Bootstrap — biblioteka gotowych stylów CSS do szybkiego, ładnego wyglądu interfejsu (lekcja 7);
• Angular (komponenty, data binding, formularze, routing) — główny framework front-endowy tego działu (lekcje 9-11);
• ASP.NET Core Web API — sposób, w jaki backend C# dostarcza dane do Angulara (lekcja 12 i dalej).

Uruchomienie projektu. Kliknięcie zielonego przycisku "Uruchom" w Visual Studio startuje OBA projekty naraz: backend (Kestrel, zwykle port z zakresu 5000-7000+) i frontend (serwer deweloperski Angulara, domyślnie port 4200 — dokładnie ta liczba z pytania egzaminacyjnego w lekcji 1!). Przeglądarka otwiera się automatycznie pod adresem frontendu.