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