encyklopedia.run.place

angular_(web_application_framework)

Angular (często zapisywany jako Angular lub Angular 2+) – otwarto‑źródłowy framework do tworzenia aplikacji jednostronicowych (SPA) w języku TypeScript i JavaScript. Projektowany i utrzymywany przez Google, jest następcą starszego frameworku AngularJS (znanego jako Angular 1). Angular jest często używany w połączeniu z architekturą MVC/MVVM.

Historia

Projekt rozpoczął się w 2010 roku jako AngularJS, pierwotnie opracowany przez Misko Hevery. W 2014 roku zespół Google ogłosił, że rozwija nową wersję opartą na TypeScript, której pierwsza stabilna wersja Angular 2 została wydana w 2016 roku. Od tamtej pory framework jest wydawany w regularnych, semantycznych wersjach (Angular 4, 5, …, 15). Każda kolejna wersja przynosiła usprawnienia w kompilacji, wydajności i doświadczeniu deweloperskim.

Podstawowe założenia

  • Modularność – aplikację buduje się z modułów, które grupują komponenty, serwisy i inne zasoby.
  • Komponentowość – interfejs użytkownika składa się z hierarchii komponentów z własnym szablonem i logiką.
  • Deklaratywny HTML – szablony uzupełniane są o własności, dyrektywy i wiązania danych.
  • Wstrzykiwanie zależności (DI) – usługi i inne obiekty są dostarczane przez wbudowany kontener DI.
  • Reaktywność – obsługa strumieni danych przy użyciu biblioteki RxJS.
  • Statyczna analiza i kompilacja – Angular Compiler (ngc) przetwarza kod TypeScript i szablony do wydajnego JavaScriptu.

Architektura

Angular opiera się na kilku warstwach:

  1. Warstwa platformy (@angular/core) – podstawowe API, w tym kompilator, DI, zmiana detekcji.
  2. Warstwa przeglądarki (@angular/platform-browser) – integracja z DOM, obsługa serwera (@angular/platform-server).
  3. Warstwa routera (@angular/router) – deklaratywne definiowanie ścieżek URL i nawigacji.
  4. Warstwa formularzy (@angular/forms) – obsługa formularzy szablonowych i reaktywnych.
  5. Warstwa HTTP (@angular/common/http) – usługę HttpClient do komunikacji z API.

Komponent

Podstawowy element UI. Definiowany przy pomocy dekoratora @Component, zawiera:

  • szablon HTML (lub templateUrl),
  • klasę TypeScript (logika komponentu),
  • metadane stylów (styles lub styleUrls),
  • opcjonalny zestaw providerów dla DI.

Moduł (NgModule)

Moduł grupuje powiązane ze sobą komponenty, dyrektywy, pipe'y i serwisy. Najważniejszy jest AppModule, który jest podstawą aplikacji i jest ładowany przy starcie.

Dyrektywy i Pipe'y

Dyrektywy modyfikują zachowanie elementów DOM (*ngIf, *ngFor), a pipe'y transformują dane w szablonach (date, currency).

Kluczowe funkcjonalności

Funkcjonalność Opis Wewnętrzny link
Routing Definiowanie ścieżek, lazy loading, ochrona tras Angular_Router
Formularze Template‑driven i Reactive Forms, walidacja Angular_Forms
HTTP Client Obsługa zapytań REST, interceptory HttpClient
Internationalization (i18n) Wsparcie dla wielu języków i18n_(Angular)
Testing Jednostkowe (Jasmine), integracyjne (Karma) Angular_Testing

Wersjonowanie i wydania

Angular stosuje semantyczne wersjonowanie (SemVer). Najważniejsze wydania:

  • Angular 2 – 2016, wprowadzenie TypeScript i nowego kompilatora.
  • Angular 4 – 2017, zmniejszenie rozmiaru package.
  • Angular 5 – 2017, obsługa RxJS 5.5.
  • Angular 9 – 2020, wprowadzenie Ivy jako domyślnego renderera.
  • Angular 12 – 2021, wsparcie dla Webpack 5.
  • Angular 15 – 2023, ulepszenia w Standalone Components i wstrzykiwaniu zależności.

Porównanie z innymi frameworkami

Angular konkuruje m.in. z React i Vue.js. Główne różnice:

  • Rozmiar i narzut – Angular jest bardziej rozbudowany, dostarczając pełny ekosystem.
  • Typowanie – silne wsparcie dla TypeScript kontra opcjonalna typizacja w React.
  • Struktura projektu – Angular narzuca bardziej opinatywną strukturę (moduły, komponenty), podczas gdy React pozostawia to programiście.
  • Wydajność – Dzięki Ivy i Change Detection strategii, Angular rywalizuje pod względem szybkości renderowania.

Ekosystem i społeczność

Do najważniejszych elementów ekosystemu należą:

  • Angular CLI – narzędzie wiersza poleceń do scaffolding’u, kompilacji, testów i optymalizacji.
  • RxJS – biblioteka reaktywna używana do obsługi asynchroniczności.
  • Angular Material – zestaw komponentów UI zgodnych z wytycznymi Material Design.
  • NgRx – implementacja wzorca Redux w Angularze.
  • Platforma StackBlitz jako oficjalne środowisko online do prototypowania.

Zastosowania

Angular jest wykorzystywany w projektach o dużej skali, szczególnie w:

  • aplikacjach korporacyjnych (np. systemy ERP, CRM),
  • portalach rządowych i publicznych,
  • serwisach streamingowych i platformach e‑learningowych,
  • narzędziach wewnętrznych i dashboardach.

Kontrowersje i krytyka

Mimo popularności, Angular spotyka się z krytyką za:

  • Wysoki próg wejścia – konieczność znajomości TypeScript, dekoratorów i struktury projektu.
  • Rozbudowany kod generowany przez kompilator, co może zwiększać rozmiar paczek.
  • Częste zmiany API w początkowych latach (np. migracja z Angular 2 do 4), które wymuszały aktualizacje.

W odpowiedzi zespół Google wprowadza strategię zachowania kompatybilności i narzędzia migrujące (ng update).

Przyszłość

Roadmapa Angulara zakłada dalsze usprawnienia w:

Rozwój frameworka jest prowadzony otwarto, a decyzje techniczne są omawiane na publicznych spotkaniach GitHub i w konferencjach ng‑conf.

Bibliografia i dalsza lektura

  1. Oficjalna dokumentacja Angular – Angular_Dokumentacja
  2. „Angular – Przewodnik po nowoczesnym frameworku” – Książka_(Angular)
  3. Artykuły na Medium opisujące migrację Angular_Upgrade