Angular, stworzony przez Google, jest jednym z najbardziej znanych i używanych frameworków do
tworzenia aplikacji internetowych. Od swojego debiutu jako AngularJS, przeszedł gruntowną ewolucję,
aby stać się prostszy, szybszy i bardziej wydajny. Jego popularność wśród deweloperów i firm
nieustannie rośnie, dzięki czemu znajduje zastosowanie w projektach o różnych skalach i złożoności.
Angular to open-source'owy framework do tworzenia dynamicznych aplikacji webowych. Pozwala na
tworzenie aplikacji w modelu Single Page Application (SPA), co oznacza, że większość pracy (w tym
renderowanie) odbywa się po stronie klienta, czyli w przeglądarce użytkownika. W porównaniu do
innych frameworków, takich jak React czy Vue.js,
Angular wyróżnia się kompletnością – oferuje szereg
narzędzi i gotowych rozwiązań, które pozwalają szybko rozwijać zaawansowane aplikacje.
Architektura Angulara
Kluczową cechą Angulara jest jego modułowość i architektura oparta na komponentach. Każda aplikacja
Angularowa składa się z wielu komponentów, które współpracują ze sobą, tworząc spójny interfejs
użytkownika. Framework ten stosuje również wstrzykiwanie zależności (Dependency Injection), co
ułatwia zarządzanie zależnościami między różnymi częściami aplikacji. Podstawowe elementy Angulara
obejmują moduły, komponenty, serwisy i dyrektywy, każdy z nich odgrywa specyficzną rolę w strukturze
aplikacji.
Tworzenie Aplikacji w Angularze
Proces tworzenia aplikacji w Angularze rozpoczyna się od zainstalowania środowiska Angular CLI,
narzędzia command-line, które umożliwia łatwe tworzenie, zarządzanie i testowanie aplikacji.
Przykładowy komponent aplikacji może zawierać szablon HTML, logikę w TypeScript oraz opcjonalnie
styl CSS. Angular CLI automatyzuje wiele procesów, takich jak kompilacja, testowanie i wdrożenie
aplikacji.
Zaawansowane Funkcje Angulara
Angular oferuje szeroki zakres zaawansowanych funkcji, takich jak Routing, Formularze, HTTP
Communication, i wiele innych. Routing pozwala na nawigację między różnymi widokami i komponentami w
aplikacji. Mechanizmy formularzy ułatwiają zbieranie i walidację danych wejściowych użytkownika.
Komunikacja HTTP umożliwia interakcje z zewnętrznymi API i serwerami backendowymi. Dodatkowo,
Angular wspiera reaktywne programowanie z użyciem RxJS, co pozwala na efektywne zarządzanie
asynchronicznymi danymi i zdarzeniami.
Popularne narzędzia: Angular CLI, Angular Material, NgRx
Angular 17
-
Annotacja @Component — Ulepszono annotację @Component, wprowadzając nową właściwość styleUrl oraz
umożliwiając, aby właściwość styles przyjmowała wartość jako łańcuch znaków lub tablicę
łańcuchów znaków
-
Nowy Application Builder — Angular 17 wprowadza nowy "uniwersalny" builder
(@angular-devkit/build-angular:application), który pozwala na budowanie zarówno aplikacji z
renderowaniem po stronie klienta, jak i serwera. Jest to znaczna zmiana w porównaniu do
poprzednich wersji, gdzie wymagane były różne buildery dla różnych typów renderowania
-
Nowy Angular Code Flow — Wprowadzono nowy, bardziej zaawansowany kod strukturalny, eliminując
potrzebę importowania dyrektyw strukturalnych takich jak ngIf i ngFor. Ten nowy sposób pisania
kodu jest wbudowany w Angulara i ułatwia integrację komponentów opartych na sygnałach Angulara
-
Funkcja 'defer' — Angular 17 wprowadza funkcję 'defer', która ułatwia ładowanie leniwe (lazy
loading) komponentów, uwzględniając wszystkie etapy tego procesu. Dzięki temu, ładowanie
komponentów jest bardziej efektywne i mniej podatne na błędy
-
OSignal — W wersji 17, Signal, który pojawił się jako podgląd dla deweloperów w Angularze 16,
jest teraz stabilny i gotowy do użycia. Umożliwia on bardzo precyzyjną reaktywność, pozwalając
na odświeżanie tylko tych komponentów, których sygnał został zmodyfikowany
-
Angular Devtools — Narzędzia deweloperskie Angulara otrzymały nową funkcję, pozwalającą na
wyświetlanie drzewa iniekcji, co jest bardzo użyteczne podczas debugowania aplikacji,
szczególnie w przypadku cyklicznych zależności lub problemów z rozwiązaniem tokenów
Angular 16
-
Angular 16 Signals (Developer Preview) — Nowa funkcja umożliwiająca kontrolowanie zmian stanu w aplikacjach Angulara
-
Ulepszone Hydration (Developer Preview) — Możliwość ponownego wykorzystania istniejących węzłów
DOM na stronach renderowanych po stronie serwera lub pre-renderowanych
-
Szybsze Budowanie z esbuild (Developer Preview) — Wprowadzenie wsparcia dla nowych
builderów opartych na esbuild, znacznie przyspieszających czas budowy
-
Usunięcie ngcc (Angular Compatibility Compiler) — Pełne przejście od View Engine do Ivy
poprzez usunięcie kodu związanego z View Engine
Angular 15
-
Stabilne samodzielne komponenty — Przejście z wersji deweloperskiej do stabilnej
-
API kompozycji dyrektyw — Ułatwienie ponownego wykorzystania kodu przez połączenie wielu dyrektyw
-
Dyrektywa NgOptimizedImage — Optymalizacja ładowania obrazów
-
Wsparcie dla Node.js — Wersje 14.20, 16.13 i 18.10
-
Wsparcie dla TypeScript — Wersja 4.8 lub nowsza
Angular 9
-
Zmniejszenie rozmiaru zbudowanej paczki.
-
Bazel - Nowe narzędzie budujące, umożliwiające szybsze budowanie równoległe.
-
Ivy Rendering Engine - od teraz jest domyślnym silnikiem renderującym (po poprzednich: TemplateEngine, ViewEngine).
-
Rezygnacja z entryComponents.
-
Znacznik ngForm został zmieniony na ng-form.
Kurs AngularJS — Materiał archiwalny
AngularJS to framework, który przewrócił do góry nogami koncepcje budowy aplikacji webowych opartych o Javascript.
To pierwszy tak popularny Javascriptowy framework, którego używanie prawie całkowicie eliminuje potrzebę operowania na drzewie komponentów DOM tworzonej strony.
Najważniejszym przeznaczeniem frameworka (podobnie jak w Angular 2+) jest budowa aplikacji SPA (Single Page Application), a więc aplikacji uruchomionych pod jednym adresem URL
z funkcjonalnością przełączania widoków oraz podmianą widocznego adresu URL, wykonywanych po stronie samego Javascriptu.
Framework opiera się na koncepcji MVW (Model View Whatever) - co umożliwia nam pracę w ramach wzorców MVC (Model View Controller) oraz MVVM (Model Viewv View Model).
Kurs AngularJS wykorzystuje oba te wzorce.
Wprowadzenie do frameworka AngularJS
Przetwarzanie danych w AngularJS
Dyrektywy w AngularJS
