Podstawy Angular

Poniższy przewodnik wprowadzi Cię w kluczowe zagadnienia Angulara, obejmujące podstawy Angular, wiązanie danych, usługi i implementacje zależności, trasowanie oraz formularze. Te elementy są niezbędne, abyś mógł samodzielnie budować zaawansowane aplikacje Angular.

1. Podstawy Angular

• Angular CLI: Angular CLI to narzędzie, które pozwala na łatwe tworzenie, budowanie i uruchamianie aplikacji Angular. Oto jak się go używa:

Instalacja: Aby zainstalować Angular CLI, wpisz w terminalu:
npm install -g @angular/cli

To zainstaluje Angular CLI globalnie, co pozwala na korzystanie z niego w dowolnym miejscu na komputerze.

• Tworzenie projektu: Użyj Angular CLI do stworzenia nowego projektu Angular za pomocą polecenia:
  ng new nazwa-projektu
  Podczas tworzenia projektu zostaniesz zapytany o kilka ustawień (routing, styl). Wybierz odpowiednie dla siebie.
• Uruchamianie aplikacji: Przejdź do katalogu projektu i uruchom serwer deweloperski:
  cd nazwa-projektu
  
  ng serve

Teraz możesz otworzyć przeglądarkę i wejść na adres http://localhost:4200.

• Struktura projektu: Angular ma dobrze zorganizowaną strukturę folderów. Kilka kluczowych elementów:

src/app: Tutaj znajdują się wszystkie komponenty, serwisy i główna logika aplikacji.

angular.json: Plik konfiguracyjny, w którym definiowane są ustawienia projektu.

main.ts: Główny plik uruchamiający aplikację.

index.html: Główny plik HTML, w którym renderowana jest aplikacja Angular.

• Komponenty: Komponenty to podstawowe elementy budujące aplikację Angular. Składają się z szablonu HTML, logiki TypeScript oraz opcjonalnego stylu CSS. Aby utworzyć komponent:

ng generate component nazwa-komponentu

Każdy komponent składa się z 4 plików: html (szablon), css (style), ts (logika), spec.ts (testy).

2. Wiązanie danych i Dyrektywy

• Wiaązanie danych to mechanizm, który łączy dane z logiki aplikacji z interfejsem użytkownika (HTML).

Interpolacja ({{}}): Używaj interpolacji do wyświetlania danych w szablonie HTML. Przykład:
<h1>Witaj, {{ name }}!</h1>
     Wartość zmiennej name zostanie wstawiona w miejsce {{ name }}.

Property Binding ([property]): Używane do ustawiania wartości atrybutów HTML na podstawie danych z    komponentu. Przykład:
<img [src]=”imageUrl” />
Atrybut src zostanie ustawiony na wartość zmiennej imageUrl.

Event Binding ((event)): Umożliwia reagowanie na zdarzenia, takie jak kliknięcia. Przykład:
<button (click)=”kliknijMnie()”>Kliknij mnie!</button>
Gdy użytkownik kliknie przycisk, wywołana zostanie funkcja kliknijMnie().

• Dwukierunkowe wiązanie ([(ngModel)]): Dwukierunkowe wiązanie danych łączy wartości z modelu danych z interfejsem użytkownika. Przykład:
  
  <input [(ngModel)]=”nazwa” />
  
  Aby korzystać z ngModel, musisz zaimportować FormsModule w module aplikacji.
• Dyrektywy to specjalne znaczniki w HTML, które rozszerzają jego możliwości:

*ngIf: Pozwala na wyświetlenie elementu tylko wtedy, gdy spełniony jest określony warunek.
<div *ngIf=”czyPokazac”>To jest widoczne, gdy zmienna `czyPokazac` jest prawdziwa.</div>

*ngFor: Umożliwia iterację po tablicach.
<div *ngFor=”let element of lista”>{{ element }}</div>

ngClass i ngStyle: Umożliwiają dynamiczne ustawianie klas CSS i stylów elementów.

3. Usługi i Dostarczanie zależności

• Serwisy (Usługi) służą do przechowywania logiki biznesowej oraz współdzielenia danych między komponentami. Aby utworzyć serwis:

ng generate service nazwa-uslugi

Serwisy są singletonami, co oznacza, że jedna instancja serwisu jest współdzielona przez całą aplikację.

• Dependency Injection (dostarczanie zależności) pozwala na wstrzyknięcie serwisu do komponentu, aby mógł on z niego korzystać. Przykład:

constructor(private nazwaUslugi: NazwaUslugi) {}

Teraz możemy korzystać z metod serwisu w naszym komponencie.

4. Trasowanie

• Angular Router pozwala na tworzenie wielostronicowych aplikacji, w których użytkownik może poruszać się między różnych widokami bez przeładowania strony.
• Definiowanie tras: Przejdź do pliku app-routing.module.ts i zdefiniuj trasy.
  const routes: Routes = [

   { path: ”, component: HomeComponent },

   { path: 'about’, component: AboutComponent }

];
Każda trasa zawiera ścieżkę (path) oraz komponent, który powinien być wyświetlony.

• Linki nawigacyjne: Aby umożliwić nawigację między stronami, użyj dyrektywy routerLink.
  
  <a routerLink=”/about”>O nas</a>
• Osłony (Guards) służą do zabezpieczania tras, np. przed nieautoryzowanym dostępem. Aby utworzyć osłonę:

ng generate guard auth

Guard może sprawdzić, czy użytkownik ma uprawnienia do wyświetlenia określonej strony.

5. Formularze

Angular oferuje dwa rodzaje formularzy: Template-Driven Forms oraz Reactive Forms.

• Formularze oparte na szablonach (Template-Driven Forms): To podejście pozwala na tworzenie formularzy bezpośrednio w HTML z użyciem ngModel. Aby korzystać z tego podejścia, musisz zaimportować FormsModule.

Przykład:

<form #myForm=”ngForm”>

  <input type=”text” name=”nazwa” [(ngModel)]=”nazwa” required />

  <button type=”submit” [disabled]=”myForm.invalid”>Wyślij</button>

</form>

• Formy reaktywne (Reactive Forms): To bardziej zaawansowane podejście, które pozwala na ścisłe kontrolowanie formularza i jego walidacji w kodzie TypeScript.
• Tworzenie formularza: W komponencie utwórz instancję FormGroup i FormControl.
  
  import { FormGroup, FormControl } from '@angular/forms’;

myForm = new FormGroup({

     nazwa: new FormControl(”)

});

• Szablon HTML: Formularz jest tworzony z użyciem dyrektywy formGroup.
  <form [formGroup]=”myForm”>

     <input formControlName=”nazwa” />

     <button type=”submit”>Wyślij</button>

</form>

Walidacja: Angular oferuje wbudowane mechanizmy walidacji, takie jak required, oraz możliwość tworzenia własnych walidatorów.

Przykład walidacji:

import { Validators } from '@angular/forms’;

myForm = new FormGroup({

  nazwa: new FormControl(”, [Validators.required, Validators.minLength(3)])

});

To zapewni, że pole nazwa jest wymagane i musi mieć co najmniej 3 znaki.

6. Komunikacja z backendem (HTTP)

HttpClient: Angular oferuje moduł HttpClient, który pozwala na komunikację z serwerem za pomocą zapytań HTTP, takich jak GET, POST, PUT, DELETE.

• Importowanie HttpClientModule: Najpierw zaimportuj HttpClientModule w module aplikacji (app.module.ts):
  

import { HttpClientModule } from '@angular/common/http’;

@NgModule({

  imports: [

    HttpClientModule

  ]

})

export class AppModule {}

• Używanie HttpClient: Następnie wstrzyknij HttpClient do serwisu lub komponentu, aby wykonywać zapytania.
  

import { HttpClient } from '@angular/common/http’;

constructor(private http: HttpClient) {}

getData() {

     this.http.get(’https://api.example.com/data’).subscribe(response => {

    console.log(response);

    }, error => {

    console.error(’Błąd podczas pobierania danych’, error);

   });

}
HttpClient pozwala na obsługę odpowiedzi asynchronicznych za pomocą Observable, co pozwala na reagowanie na dane, kiedy są one gotowe.

7. Interakcje między komponentami

• Wejście/Wyjście (@Input() i @Output()): Komunikacja między komponentami rodzic-dziecko.

Dekorator @Input(): Pozwala na przekazywanie danych z komponentu rodzica do dziecka.
@Input() nazwa: string;
W szablonie komponentu rodzica:
<app-child [nazwa]=”parentName”></app-child>

• Dekorator @Output(): Pozwala na wysyłanie zdarzeń z komponentu dziecka do rodzica.
  @Output() onClicked = new EventEmitter<string>();

kliknij() {

   this.onClicked.emit(’Kliknięto!’);

}

W szablonie komponentu rodzica:
<app-child (onClicked)=”handleClick($event)”></app-child>

• RxJS Subject i EventEmitter: Subject z RxJS może być używany do bardziej złożonej komunikacji między komponentami.

8. RxJS i programowanie reaktywne

• Observable i Subskrypcja: Observable to strumień danych, który może emitować wiele wartości w czasie.

Tworzenie Observable:

   import { Observable } from 'rxjs’;

  const myObservable = new Observable(observer => {

  observer.next(’Wartość 1′);

  observer.next(’Wartość 2′);

  observer.complete();

});

• Subskrypcja:
  myObservable.subscribe(value => {

  console.log(value);

   });

Operatory RxJS: Operatory, takie jak map, filter, switchMap, pozwalają na manipulowanie strumieniami danych.

9. Pipes

Wbudowane Pipes: Pipes to narzędzia do formatowania danych w szablonach HTML.

Przykłady wbudowanych pipes: date, currency, uppercase.

  <p>{{ today | date:’longDate’ }}</p>

<p>{{ kwota | currency:’PLN’ }}</p>

Torzenie własnych Pipes: Możesz również tworzyć własne pipes, jeśli potrzebujesz specyficznej transformacji danych.

Tworzenie pipe:
ng generate pipe nazwa-pipe
Przykład własnego pipe:

import { Pipe, PipeTransform } from '@angular/core’;

@Pipe({

  name: 'mojPipe’

})

export class MojPipe implements PipeTransform {

  transform(value: string): string {

    return value.toUpperCase();

  }

}

10. Stylizacja

• Style globalne i lokalne: Angular pozwala na korzystanie zarówno ze stylów globalnych (styles.css), jak i lokalnych (component.css).
• Angular Material lub Bootstrap: Możesz używać frameworków takich jak Angular Material lub Bootstrap, aby szybko tworzyć atrakcyjne interfejsy użytkownika.

Angular Material:
ng add @angular/material
Angular Material oferuje gotowe komponenty UI, takie jak przyciski, formularze, karty.

11. Moduły

• NgModule: Moduły (@NgModule) są używane do grupowania komponentów, serwisów i innych zasobów. Ułatwia to organizację dużych aplikacji.

Tworzenie modułu:
ng generate module nazwa-modulu

• Lazy Loading: Ładowanie modułów na żądanie pozwala optymalizować wydajność aplikacji. Moduły mogą być ładowane tylko wtedy, gdy są potrzebne, co przyspiesza początkowy czas ładowania aplikacji.

12. Zarządzanie stanem aplikacji

• Usługi i RxJS: Do prostego zarządzania stanem można używać serwisów w połączeniu z BehaviorSubject z RxJS.

BehaviorSubject:
import { BehaviorSubject } from 'rxjs’;

private stan = new BehaviorSubject<number>(0);

stan$ = this.stan.asObservable();

• NgRx: W bardziej zaawansowanych aplikacjach warto rozważyć NgRx, który jest biblioteką do zarządzania stanem inspirowaną Redux.

13. Testowanie

• Testy jednostkowe: Angular używa Jasmine i Karma do testowania jednostkowego komponentów i serwisów.

Tworzenie testów jednostkowych: W plikach spec.ts znajdziesz testy jednostkowe generowane automatycznie. Możesz je modyfikować i dodawać własne.

• Testy integracyjne (e2e): Angular używa narzędzia Protractor do testów end-to-end.

Uruchamianie testów e2e:
  ng e2e

14. Budowanie i wdrażanie aplikacji

• Budowa aplikacji: Aby zbudować aplikację do produkcji, użyj polecenia:

ng build –prod

To polecenie optymalizuje i minimalizuje rozmiar aplikacji, aby była gotowa do wdrożenia.

Wdrażanie: Aplikację Angular można wdrożyć na różnych platformach, takich jak Firebase, Netlify, GitHub Pages czy serwer HTTP.

Firebase Hosting:
npm install -g firebase-tools

firebase login

firebase init

firebase deploy