# Przygotowanie stanowisk i omówienie zadania egzaminacyjnego

# Instalacja programów
https://code.visualstudio.com/Download
https://nodejs.org/en/download
https://www.google.com/intl/pl/chrome/
https://git-scm.com/downloads/win

# VS Code
  Settings -> workbench.editor.enablePreview -> wyłączyć, aby otwierał kolejne pliki

# Sprawdzanie, czy jest zainstalowany Node.js
  node -v

# Zdjęcie blokady do wykonywania skryptów (zezwolenie na instalację Angulara i wykonywanie jego poleceń)
  # PowerShell
    Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
  # CMD
    powershell -Command "Set-ExecutionPolicy RemoteSigned -Scope CurrentUser"

# Git Bash (Pulpit) - instalacja Angulara, Bootstrapa i próbne uruchomienie projektu
npm install -g @angular/cli
ng new egzamin
cd egzamin
npm install bootstrap -–save
ng serve -o

# Sprawdzanie, czy projekt się uruchamia
ng serve -o
ng s -o

# Generowanie komponentu
ng generate component courses
ng g c formularz

1. Omówienie budowy aplikacji / komponentu:
- app.html (szablon HTML)
- app.css (style CSS)
- app.ts (skrypty JS/TS)
- app.spec.ts (testy automatyczne)

2. Dołączanie komponentu do projektu głównego:
- wpisywanie selektora komponentu do szablonu aplikacji: app.html (na podstawie pliku TS komponentu @Component({selector: 'app-...'})), np. app-courses
- uzupełnienie importów w pliku app.ts (import, @Component({imports: []})), np. import { Courses } from './courses/courses';

3. Tworzenie pola komponentu (courses.ts):
- https://zse.lukaszhalat.pl/#wprowadzenie-do-klas-w-jezyku-typescript-34
export class Courses {
  courseTitles: string[] = [
    "Programowanie w C#",
    "Angular dla początkujących",
    "Kurs Django"
  ];
}

4. Interpolacja:
- https://zse.lukaszhalat.pl/#jednokierunkowe-techniki-wiazania-danych-39
<h1>Liczba kursów: {{ courseTitles.length }}</h1>
<ol>
  <li> {{ courseTitles }} </li>
</ol>
5. ngFor - CommonModule:
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of#try_it
- https://zse.lukaszhalat.pl/#dyrektywy-strukturalne-w-frameworku-angular-42

(courses.ts)
import { CommonModule } from '@angular/common';
@Component({
  imports: [ CommonModule ]
})
(courses.html)
<li *ngFor="let value of courseTitles"> {{value}} </li>

6. Uzupełnianie kodu HTML zgodnie z instrukcjami w zadaniu (pomoc w tabeli na końcu arkusza egzaminacyjnego) - https://getbootstrap.com/docs/5.3/forms/overview/
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" />
  </div>
  <div class="form-group">
   <button type="button" class="btn btn-success">Success</button>
  </div>
</form>

7. Dołączenie Bootstrapa zgodnie z instrukcją na końcu arkusza egzaminacyjnego (styles.css):
- https://getbootstrap.com/docs/5.3/getting-started/introduction/
@import "bootstrap/dist/css/bootstrap.css";

8. Omówienie stylów w Bootstrapie:
- przyciski: https://getbootstrap.com/docs/5.3/components/buttons/#variants
- odstępy: https://getbootstrap.com/docs/5.3/utilities/spacing/#notation

<form>
  <div class="form-group mb-3">
    <label for="personName" class="mb-2">Imię i nazwisko:</label>
    <input type="text" class="form-control" id="personName" />
  </div>
  <div class="form-group mb-3">
    <label for="courseNumber" class="mb-2">Numer kursu:</label>
    <input type="number" class="form-control" id="courseNumber" />
  </div>
  <div class="form-group mb-3">
    <button type="button" class="btn btn-primary">Zapisz do kursu</button>
  </div>
</form>

9. Dołączenie modułu do obsługi formularzy:
- https://zse.lukaszhalat.pl/#obsluga-formularzy-w-frameworku-angular-48
(courses.ts)
import { FormsModule } from '@angular/forms';
@Component({
  imports: [ FormsModule ]
})

10. Wiązanie zdarzeń (event binding):
- https://zse.lukaszhalat.pl/#jednokierunkowe-techniki-wiazania-danych-39
  (courses.html)
  <button type="button" class="btn btn-primary" (click)="onSubmit()">Zapisz do kursu</button>

  (courses.ts)
  onSubmit() {
    console.log("U mnie działa!");
  }

11. Wiązanie dwukierunkowe (two-way binding) wraz z naprawą błędu:
- https://zse.lukaszhalat.pl/#dwukierunkowe-wiazanie-danych-w-frameworku-angular-40
(courses.html)
<input type="text" class="form-control" id="personName" [(ngModel)]="personName" [ngModelOptions]="{standalone: true}">
<input type="number" class="form-control" id="courseNumber" [(ngModel)]="courseNumber" [ngModelOptions]="{standalone: true}" />

(courses.ts) - zmienne
personName: string = "";
courseNumber: number = 0;

12. Uzupełnienie skryptu do pełnej funkcjonalności:
(courses.ts)
  onSubmit() {
    const selectedCourse = this.courseTitles[this.courseNumber - 1];

    if (selectedCourse) {
      console.log(this.personName);
      console.log(selectedCourse);
    } else {
      console.log('Nieprawidłowy numer kursu');
    }
  }