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

Po co się tego uczymy?

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.

Teoria

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.

Schemat

NazwaProjektu (rozwiązanie w Visual Studio)
        │
        ├── NazwaProjektu.Server/  (backend C#)
        │       Controllers/  ── zwraca dane JSON
        │       Program.cs    ── konfiguracja, CORS
        │
        └── nazwaprojektu.client/  (frontend Angular/TypeScript)
                src/app/
                    app.component.ts    ── logika komponentu
                    app.component.html  ── widok komponentu
                package.json  ── zależności npm
                angular.json  ── konfiguracja narzędzi

Kliknięcie "Uruchom" (F5)
        │
        ├── Backend startuje na porcie np. 7042 (Kestrel)
        │
        └── Frontend startuje na porcie 4200 (serwer deweloperski Angular)
                    │
                    ▼
        Przeglądarka: http://localhost:4200
        (Angular w tle łączy się z backendem po dane)

Przykład z życia

To trochę jak restauracja z kuchnią (backend — nieprzepuszczana dla gości, przygotowuje "dane" czyli jedzenie) i salą dla gości (frontend Angular — to, co widzi i czym steruje klient). Kelner (żądania HTTP/JSON) przenosi zamówienia między nimi. Ucząc się tego projektu, uczysz się jednocześnie, jak zorganizowana jest kuchnia (Controllers, Program.cs) i jak urządzona jest sala (komponenty Angular, ich szablony HTML).

app.component.ts (fragment)

// nazwaprojektu.client/src/app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Moja pierwsza aplikacja Angular + ASP.NET Core';
}

Program.cs (fragment)

// NazwaProjektu.Server/Program.cs (fragment wygenerowany przez szablon)
var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllers();

// CORS - pozwala Angularowi (inny port!) łączyć się z tym backendem
builder.Services.AddCors();

var app = builder.Build();

app.UseDefaultFiles();
app.MapStaticAssets();

app.UseAuthorization();

app.MapControllers();

app.MapFallbackToFile("/index.html");

app.Run();

Komentarz i wyjaśnienie kodu

@Component({...}) to DEKORATOR TypeScript — mechanizm oznaczania klasy dodatkowymi metadanymi (tu: że to komponent Angulara, jego selektor HTML, plik szablonu). To pierwsze zetknięcie ze składnią, którą będziesz widzieć w KAŻDYM pliku komponentu Angulara — pełne omówienie w lekcji 9. standalone: true oznacza nowoczesny styl komponentów Angular (bez potrzeby dodatkowych plików "modułów", które były wymagane w starszych wersjach frameworka).

W Program.cs, app.MapFallbackToFile("/index.html") jest KLUCZOWĄ linią dla współpracy z Angularem — mówi backendowi: "jeśli żądanie nie pasuje do żadnego kontrolera API, zwróć plik index.html" — dzięki temu Angular (który sam obsługuje nawigację między "stronami" w przeglądarce, lekcja 11) może przejąć routing, nawet jeśli użytkownik odświeży stronę pod adresem innym niż główny.

Ćwiczenie samodzielne

Utwórz nowy projekt "ASP.NET Core with Angular" w Visual Studio 2026, poczekaj aż środowisko zainstaluje zależności (npm install w tle), uruchom projekt i sprawdź w przeglądarce domyślną stronę powitalną. Otwórz Eksplorator rozwiązań i odnajdź WSZYSTKIE elementy struktury opisane w tej lekcji.

Zadania do pracy własnej

Zmień tekst właściwości title w app.component.ts na dowolny własny napis, zapisz plik i sprawdź (dzięki Hot Reload/Live Reload Angulara), że strona w przeglądarce automatycznie się zaktualizowała, bez ręcznego odświeżania.
Otwórz plik package.json w projekcie klienckim i wypisz co najmniej 3 zależności (biblioteki) tam wymienione — dla każdej krótko sprawdź (np. przez szybkie wyszukanie), do czego służy.
Otwórz zakładkę Sieć (Network) w Narzędziach deweloperskich przeglądarki podczas działania uruchomionego projektu, odśwież stronę, i zidentyfikuj: który plik odpowiada za pobranie głównego kodu Angulara (zwykle duży plik .js), oraz sprawdź numer portu, na którym faktycznie działa backend (poszukaj żądań do adresu innego niż localhost:4200).

Typowe błędy

Pomylenie folderu Server (backend) z folderem client (frontend) przy próbie znalezienia konkretnego pliku — zawsze najpierw sprawdź, czy szukasz logiki C# (Server) czy komponentu Angular (client).

Ręczna edycja plików angular.json/package.json bez zrozumienia ich zawartości — te pliki są w dużej mierze generowane i zarządzane automatycznie przez Angular CLI; przypadkowa literówka może zepsuć całą konfigurację budowania projektu.

Próba uruchomienia SAMEGO projektu client bez uruchomionego backendu (i oczekiwanie, że dane się pojawią) — frontend Angular bez działającego backendu pokaże błędy sieciowe przy próbie pobrania jakichkolwiek danych z API.

Nawiązanie do egzaminu zawodowego

To praktyczne wprowadzenie do struktury projektu wymaganej przez INF.04.7.3 — dokładnie taki układ (osobny projekt backendu i frontendu w jednym rozwiązaniu) jest standardem przy budowaniu aplikacji Angular+ASP.NET Core, zarówno w tym kursie, jak i w prawdziwej pracy zawodowej. Kolejna lekcja pokazuje pełny, działający (choć mały) przykład programu zbudowanego w tej strukturze.