Co jest w tym projekcie

Czego się dziś nauczysz

Przygotowanie: lekcja 01 — masz projekt klub-gier, który się uruchamia. Przewidywany czas: 45 min z zadaniami.

Które pliki są Twoje

Folder projektu wygląda groźnie, ale większość to rzeczy, których nie ruszasz. Twoja praca odbywa się w folderze src, a w nim prawie wyłącznie w src/app.

Droga od adresu do ekranu

Kiedy wpisujesz localhost:4200, zawsze dzieją się cztery rzeczy, w tej samej kolejności:

1. Przeglądarka dostaje index.html. W środku jest pusty znacznik <app-root>.
2. Uruchamia się main.ts i woła bootstrapApplication(App, appConfig).
3. Angular szuka w stronie znacznika, który pasuje do selector komponentu App — czyli <app-root>.
4. W to miejsce wstawia szablon app.html z danymi z klasy App.

Komponent to para: klasa w pliku .ts i szablon w pliku .html. Łączy je dekorator @Component({ ... }) — zapis z małpą tuż nad klasą, który mówi Angularowi: „ta klasa jest komponentem, a oto jego ustawienia”.

Strona, która przychodzi do przeglądarki

Cała aplikacja Angulara mieści się w jednym pliku HTML. Otwórz go i zmień dwie rzeczy: język strony na polski i tytuł na karcie przeglądarki.

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <title>Klub gier</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>
  <app-root></app-root>
</body>
</html>

Karta przeglądarki: Klub gier

W body nie ma żadnej treści — jest jeden znacznik <app-root>, którego nie zna żadna przeglądarka. Tutaj Angular wstawi Twoją aplikację. lang="pl" mówi przeglądarce, że strona jest po polsku (przydaje się czytnikom ekranu i tłumaczowi).

Kto to wszystko uruchamia

Jeden plik startowy, kilka wierszy. To on łączy stronę z Twoim kodem.

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

bootstrapApplication(App, appConfig)
  .catch((err) => console.error(err));

• import { App } from './app/app'; — weź klasę App z pliku src/app/app.ts (rozszerzenia .ts się nie pisze).
• bootstrapApplication(App, appConfig) — uruchom aplikację: pierwszy argument to komponent główny, drugi — ustawienia.
• .catch(...) — jeśli start się nie uda, wypisz błąd w konsoli przeglądarki (F12 → Console).

Komponent to para plików

CLI utworzyło app.ts przygotowany pod stronę powitalną. Po lekcji 01 strony powitalnej już nie ma, więc uporządkuj klasę: usuń import RouterOutlet i pole title, a dopisz własne pole tytul.

import { Component } from '@angular/core';

@Component({
  imports: [],
  selector: 'app-root',
  styleUrl: './app.css',
  templateUrl: './app.html',
})
export class App {
  readonly tytul = 'Klub gier';
}

<h1>{{ tytul }}</h1>
<p>Tu wkrótce pojawi się lista wydarzeń.</p>

Klub gier
Tu wkrótce pojawi się lista wydarzeń.

Ostrzeżenie NG8113 zniknęło z terminala — tablica imports jest pusta, bo szablon nie używa żadnego dodatkowego elementu. selector: 'app-root' mówi: „jestem znacznikiem app-root” — dlatego aplikacja ląduje właśnie w tym miejscu index.html.

Zapis {{ tytul }} w szablonie wstawia wartość pola tytul z klasy. To zapowiedź lekcji 05, gdzie poznasz go dokładnie — dziś wystarczy zauważyć, że szablon widzi pola swojej klasy. Słowo readonly oznacza, że pola nie da się później zmienić (znasz je z TypeScriptu).

Ustawienia całej aplikacji

Wszystko, co dotyczy aplikacji jako całości, a nie jednego komponentu, trafia do app.config.ts. Na razie tylko go oglądasz.

import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideRouter(routes)
  ]
};

import { Routes } from '@angular/router';

export const routes: Routes = [];

Tablica providers to lista „usług” włączonych dla całej aplikacji. Dziś są dwie: przechwytywanie błędów w przeglądarce i router — na razie z pustą listą podstron. Ta lista będzie rosła: w lekcji 16 dojdą polskie formaty dat i walut, w lekcji 34 podstrony, w lekcji 36 pobieranie danych z serwera.

Zestawienie elementów

Zanim utkniesz

Zadania

Co trzeba zapamiętać

• Pracujesz w src/app; node_modules nigdy nie edytujesz.
• index.html zawiera pusty <app-root> — tam trafia aplikacja.
• main.ts uruchamia aplikację i wskazuje komponent główny App.
• Komponent to klasa .ts i szablon .html, połączone dekoratorem @Component.
• selector to nazwa znacznika komponentu; musi zgadzać się z HTML-em.
• Niepotrzebny wpis w imports daje ostrzeżenie NG8113.
• Ustawienia całej aplikacji mieszkają w app.config.ts.
• Kod błędu i ścieżka pliku w terminalu prowadzą prosto do miejsca problemu; część błędów widać tylko w konsoli przeglądarki (F12).

Sprawdź się: gdzie wpiszesz nowy tekst do pokazania użytkownikowi, a gdzie wartość, którą program ma zapamiętać?

Dokumentacja: angular.dev — struktura projektu.