Średni · lekcja 4

Omówienie gotowego małego programu — kalkulator BMI krok po kroku

Zacznij tutaj

Po co się tego uczymy?

Zanim zaczniesz uczyć się każdej technologii osobno i szczegółowo (Node.js, TypeScript, Bootstrap, Angular — kolejne lekcje), zobacz najpierw, jak to wszystko wygląda RAZEM, w praktyce, na przykładzie małego, kompletnego programu — kalkulatora BMI. Nie musisz jeszcze rozumieć każdej linijki — chodzi o to, żebyś zobaczył OGÓLNY OBRAZ i wiedział, gdzie w kolejnych lekcjach szukać wyjaśnienia konkretnego fragmentu.

Wprowadzenie

Teoria

Poniższy przykład to kompletny, mały komponent Angular obliczający BMI (wskaźnik masy ciała) na podstawie wzrostu i wagi wpisanych przez użytkownika. Przejdźmy przez niego fragment po fragmencie — z zapowiedzią, w KTÓREJ kolejnej lekcji poznasz dokładnie dany element.

1. Tworzenie komponentu — polecenie w terminalu. Zanim jakikolwiek kod powstanie, w terminalu Visual Studio (albo w terminalu systemowym w folderze projektu klienckiego) wywołuje się polecenie Angular CLI: ng generate component bmi-calculator --standalone. To polecenie URUCHAMIANE JEST przez Node.js (silnik wykonujący JavaScript poza przeglądarką, pełne omówienie w lekcji 5) — samo ng to skrót od Angular CLI, zainstalowanego wcześniej przez npm (menedżer pakietów Node.js). Efekt: Angular SAM tworzy 3 pliki (.ts, .html, .css) z gotowym szkieletem komponentu.

2. Klasa komponentu — plik .ts. Napisana w języku TypeScript (pełne omówienie w lekcji 6) — to JavaScript rozszerzony o typy (number, string...), które pomagają wychwycić błędy ZANIM program się uruchomi. Klasa BmiCalculatorComponent ma pola (height, weight, bmi) przechowujące dane, i metodę obliczBMI() z logiką obliczeniową — dokładnie ten sam podział na "dane" i "zachowanie", którego uczyłeś się przy klasach w dziale programowania obiektowego.

3. Szablon — plik .html. To WIDOK komponentu — zwykły HTML, ale z rozszerzeniami składni Angulara (pełne omówienie w lekcjach 8-10): [(ngModel)]="height" to dwukierunkowe wiązanie danych (wpisany tekst automatycznie aktualizuje pole height w klasie, i odwrotnie), a (click)="obliczBMI()" to podpięcie zdarzenia kliknięcia do metody z klasy TypeScript.

4. Stylowanie — Bootstrap. Klasy takie jak class="container" czy przyciski ze stylem "ładnego, gotowego wyglądu" (widoczne w pełnych projektach w dalszych lekcjach) pochodzą z biblioteki Bootstrap (pełne omówienie w lekcji 7) — zestawu gotowych stylów CSS, dzięki którym nie trzeba samodzielnie projektować wyglądu każdego przycisku czy formularza od zera.

5. Instalacja zależności — npm. Zanim komponent mógłby korzystać z formularzy Angulara (ngModel), trzeba było wcześniej zainstalować odpowiedni pakiet poleceniem npm install @angular/forms — npm (Node Package Manager, część Node.js) to "sklep" z gotowymi bibliotekami, z którego korzysta niemal każdy projekt JavaScript/TypeScript.

Ten sam wzorzec (komenda CLI → plik .ts z logiką → plik .html z widokiem → stylowanie Bootstrapem) powtórzy się w KAŻDYM kolejnym komponencie, który zbudujesz w tym dziale — łącznie z czterema pełnymi projektami na końcu.

Zobacz zależności

Schemat

Terminal (Node.js + npm + Angular CLI)
        │  ng generate component bmi-calculator --standalone
        ▼
Wygenerowane pliki:
┌────────────────────────────┐
│ bmi-calculator.component.ts │  ← TypeScript: dane (height, weight, bmi)
│                              │     + logika (obliczBMI())          [lekcja 6]
└──────────────┬───────────────┘
               │ templateUrl
               ▼
┌────────────────────────────┐
│ bmi-calculator.component.html │ ← HTML + składnia Angular:
│                                │   [(ngModel)], (click)            [lekcje 8-10]
│                                │   + klasy Bootstrap (stylowanie)  [lekcja 7]
└────────────────────────────────┘

npm install @angular/forms   ← instalacja zależności (npm, część Node.js) [lekcja 5]

Połącz z praktyką

Przykład z życia

Dokładnie tak, jak przy nauce nowego dania w kuchni najpierw ogląda się gotowy przepis "od góry do dołu", żeby zobaczyć, z jakich składników i kroków się składa, zanim zacznie się uczyć każdej techniki (siekanie, duszenie, pieczenie) osobno — ta lekcja pokazuje "gotowe danie" (kalkulator BMI), żebyś wiedział, DOKĄD zmierzasz, zanim zaczniesz uczyć się poszczególnych "technik kulinarnych" (Node.js, TypeScript, Bootstrap, Angular) w kolejnych lekcjach.