Angular wykorzystywany jest głównie do tworzenia front-endu. Przy pomocy Angulara tworzymy przede wszystkim:
Posiadamy doświadczenie w tworzeniu rozwiązań i projektów wykorzystujących technologię Angular z takich obszarów jak:
Angular można wykorzystać w wielu projektach i rozwiązaniach.
Programiści piszą minimalną ilość kodu niezbędną do działania aplikacji.
Angular pozwala na szybkie i łatwe testowanie rozwiązań.
Polski Związek Motorowy
Adamed
Polska Agencja Prasowa
Astor
IFX Payments
TEB Edukacja
Fundacja Moc Pomocy
Elemental Holding
French Touch
Polski Komitet Normalizacyjny
TU
Bergakademie Freiberg
Bank Nowy BFG
Narodowe Centrum Promieniowania Synchrotronowego SOLARIS
Astorino Kawasaki Robotics
DTK&W Zespół Ogłoszeniowy
Opegieka
Crazy shop
PartyBox
WUOZ w Krakowie
Uniwersytet Medyczny w Łodzi
Grupa Mo
Jeleniogórska Organizacja Turystyczna
eFitness
Instytut Badań Literackich PAN
Danhoss
Fundacja Sztuki, Przygody i Przyjemności ARTS
Opennet.pl
Centrum Medyczne Intermed
Centrum Rozwoju Edukacji Edicon
Winner Europe
Po amputacji
MamMoc.pl
EtnoStoria
Widzisz Wszystko
EMKA Project
NowaLed ILL
Eco Light LED
LoxiMide
Fundacja AVLab.pl
RCC Nova
Vector Controls
Virtual SMS
Parus Holdings
Biuro Partner
Optime.AI
M2M Team
Angular (podobnie jak AngularJS) jest front-endową technologią WWW stworzoną przez jednego z gigantów technologicznych - Google. Angular jest otwartym framowkiem opartym o język programowania JavaScript i umożliwiającym tworzenie złożonych aplikacji (single page application, SPA) działających po stronie przeglądarki. Warto wspomnieć, że Angular wspiera również tworzenie aplikacji internetowych w modelu MVC (Model, View, Controller).
Angular został oparty o TypeScript, który rozszerza możliwości JavaScriptu o typowanie struktur. Daje to większe możliwości kontroli i zarządzania kodem, a dzięki statycznemu typowaniu skraca okres testów i ułatwia wnioskowanie o poprawności. Jednocześnie koszt wejścia w TypeScript jest niski, bo plik w JavaScript jest jednocześnie poprawnym kodem źródłowym w TypeScript. JavaScript jest dzisiaj niesamowicie popularny. Jest językiem internetu, na którym oparty jest front-end aplikacji webowych. Jednocześnie coraz częściej jest używany po stronie serwera jako część back-endu (np. Node.js).
Angular jest bardzo popularnym frameworkiem wykorzystywanym przez front-endowych deweloperów tworzących strony internetowe. Poniżej przedstawiamy najważniejsze powody, dla których warto znać i stosować Angular w projektach.
Angular dostarcza system szablonów wykorzystywanych w budowie konkretnych komponentów. Warto wspomnieć, że szablony wyposażone są w instrukcje sterujące oraz metody wyświetlania danych. Stosowanie szablonów pomaga zachować czytelność i przejrzystość kodu.
Angular stosuje mechanizm data binding, który polega na powiązaniu wartości zmiennej z miejscem w kodzie HTML, gdzie ta zmienna została użyta. Dzięki synchronizacji szablonu z polem tekstowym na stronie, w momencie wprowadzenia zmiany w kodzie zawartość strony automatycznie aktualizuje się. Warto wspomnieć, że taka synchronizacja może przebiegać w jednym lub w dwóch kierunkach.
Mimo iż kompilacja ma swoje minusy, to jednak często jest jedyną drogą na uzyskanie nowych możliwości. W Angularze mechanika aplikacji jest pisana w języku TypeScript, który jest modyfikacją JavaScriptu. TypeScript daje nowe możliwości programistom, do których należą typowanie zmiennych oraz wykorzystywanie pewnych elementów ES6. Określanie typów zmiennych jest bardzo istotna z punktu widzenia programistów, ponieważ pozwala zapanować nad kodem. Deweloperzy w szybszy i efektowniejszy sposób mogą wyszukiwać ewentualne błędy już na etapie kompilacji. Kompilator uniemożliwia na przykład przypisanie wartości typu string do zmiennej numerycznej.
Kolejnym dobrym powodem wykorzystywania Angulara jest możliwość kompaktowania, która jest następstwem procesu kompilacji. Dzięki temu, cała aplikacja zawarta jest w kilku plikach wynikowych (JS i CSS), co znacząco wpływa na polepszenie szybkości ładowania się strony. Dodatkowo sam proces poruszania się po tak zbudowanej stronie jest szybki i sprawny.
Wzorcem projektowym bardzo często wykorzystywanym w Angularze jest wstrzykiwanie zależności (dependency injection), który pozwala na usuwaniu bezpośrednich zależności pomiędzy komponentami na rzecz architektury plug-in. Bardzo często używa się go do dodawania serwisów odpowiedzialnych za wymienianie danych z zewnętrznym API.
Angular bardzo często wykorzystuje RxJS (Reactive Extensions for JavaScript), który jest biblioteką zawierającą narzędzia umożliwiające programowanie asynchroniczne oraz oparte na zdarzeniach. Programiści wykorzystujący bibliotekę RxJS mogą modyfikować dane, filtrować je oraz mapować.
Dzięki swojej specyfice i posiadaniu licznych zalet Angular wykorzystywany jest przez wiele firm, w tym czołowych graczy rynku technologicznego, do których zaliczają się Google, Microsoft i Apple. Google nie tylko wykorzystuje technologię w swoich projektach, ale również systematycznie nad nią pracuje i rozwija. Firma Microsoft użyła Angulara do zbudowania Microsoft Office Home oraz Xbox Live, a Apple wykorzystała technologię w swoim serwisie wspierającym produkty. Angular został użyty również w aplikacji YouTube TV, która służy do streamowania programów online. Kolejnym przykładem wykorzystania technologii jest stworzenie strony dla niemieckiego koncernu motoryzacyjnego BMW, która usprawnia wyszukiwanie dealerów pojazdów i pozwala na stworzenie własnej konfiguracji pojazdu. Technologia wykorzystywana jest również przez inne przedsiębiorstwa takie jak: AT&T, Adobe, Sears i McDonald's.
Angular jest nowszą i udoskonaloną wersją technologii AngularJS. Oba frameworki zostały stworzone przez pracowników Google w tym samym celu, czyli do budowania stron określanych mianem single page appliacation.
AngularJS został stworzony w 2009 r. przez Miško Hevery'ego i Adama Abronsa. Początkowo mężczyźni chcieli wykorzystać technologię do budowy własnego startupu, lecz szybko zmienili zdanie i finalnie AngularJS został wydany jako otwarty framework przez Google (firmę, w której obaj pracowali).
W 2014 r. firma Google ogłosiła decyzję o rozpoczęciu prac nad Angularem. Początkowo technologia miała być drugą wersją AngularaJS, jednak podczas prac projektowych zapadła decyzja o stworzeniu Angulara jako odrębnej i samodzielnej technologii. Decyzję poparto odrzuceniem kompatybilności wstecznej oraz szybkim i prostym stworzeniem ścieżki aktualizacji aplikacji napisanych w AngularJS do Angular. Prace nad Angularem ruszyły w 2014 r. i trwały dwa lata podczas, których stworzono kilka wersji próbnych. Ostateczna wersja technologii została wydana w 2016 r.
W tym czasie firma Google obiecała, że systematycznie będzie rozwijać technologię i co pół roku zamierza wypuszczać jej nowszą i sprawniejszą wersję. Razem z Angularem rozwijano jego kompilator i router. Angular 2 korzystał z routeru 3, dlatego nie wypuszczono Angulara 3 tylko stworzono nową wersję routera, który wydano razem z Angularem 4. W czerwcu 2020 r. został wypuszczony Angular 10.
Główny cel budowy Angulara dotyczył rozszerzenia możliwości tradycyjnego HTML-a, aby lepiej obsługiwał dynamiczne zmieniające się treści. Stworzono automatyczną synchronizację pomiędzy modelem i widokiem oraz oddzielono manipulacje w DOMie od logiki aplikacji, dzięki czemu znacznie ułatwiono proces testowania kodu. Dodatkowo oddzielono od siebie warstwę serwera od warstwy użytkowników aplikacji. Twórcom technologii zależało na ukazaniu całej ścieżki, którą trzeba przejść podczas tworzenia oprogramowania, zaczynając od projektowania interfejsów, a kończąc na testowaniu.
Obecnie częściej wykorzystuje się nowsze wersje Angulara niż technologię AngularJS. Poniżej prezentujemy najważniejsze różnice występujące między tymi technologiami.
AngularJS oparty jest o język JavaScript, w przypadku gdy aplikacje i strony internetowe budowane w technologii Angular pisane są w języku TypeScript. Oba języki mają swoje plusy i minusy np. TypeScript korzysta z ES6 i jest wstecznie kompatybilny z ES5.
AngularJS wykorzystuje kontrolery oraz koncepcję rootScope. Dodane zmienne widoczne są zarówno w kontrolerze jak i w widoku. Jeśli chodzi o architekturę Angulara to nie wykorzystuje on kontrolerów, lecz komponenty. Komponenty tworzą szablony wykorzystywane w procesie budowy interfejsów.
W technologii AngularJS mamy możliwość wykorzystania funkcji dwukierunkowego wiązania, która znacząco wpływa na skrócenie czasu budowy strony internetowej bądź aplikacji. Angular również umożliwia dwukierunkowe wiązanie danych, a na poprawę wydajności i szybkości budowania strony wpływa także jego ulepszona struktura.
AngularJS wykorzystuje narzędzia dostarczone przez inne firmy w celu zwiększenia efektywności wykorzystania technologii. Często wykorzystuje się takie narzędzia jak IDE i Webstorm. Technologia Angular używa natomiast interfejsu wiersza polecenia (CLI), aby zredukować czas pracy programistów.
Obecnie bardziej popularną technologią jest nowsza wersja Angulara ze względu na nowe możliwości i dostęp do dobrze rozbudowanej biblioteki. Jednak nie w każdym projekcie wybór technologii Angular, a nie AngularJS okaże się dobrym rozwiązaniem. Wybór technologii zależy od specyfiki i stopnia złożoności projektu. Przed podjęciem decyzji warto spróbować odpowiedzieć sobie na następujące pytania. Z jakich bibliotek zamierzamy korzystać? Czy biblioteki są kompatybilne z Angularem? Jakie przeglądarki internetowe zamierzamy wspierać? Szczere odpowiedzi pomogą nam wybrać technologię lepiej dopasowaną do naszych potrzeb.
Poniżej krótko omawiamy najważniejsze elementy, cechy i funkcjonalności technologii Angular.
Dzięki zastosowaniu architektury opartej o model MVW (Model-View-Whatever), Angular łączy ze sobą idee, elementy i funkcje JavaScriptu oraz wzorca MVC. Model MVW dąży do uczynienia kodu HTML bardziej wyrazistym i czytelnym. Na tym paradygmacie oparta jest cała istota biblioteki Angulara. W zależności od naszych potrzeb aplikacje mogą być oparte o różne wzorce architektoniczne takie, z którymi Angular sobie poradzi. Koncepcja MVW umożliwia nam pracę w ramach wzorców MVC (Model-View-Controller) i MVVM (Model-View-View-Model).
Wstrzykiwanie zależności jest kolejnym istotnym elementem biblioteki, dzięki któremu wprowadzone przez nas funkcjonalności w kodzie stają się bardziej zautomatyzowane. Podstawową zasadą wstrzykiwania zależności jest posiadanie serwisu zajmującego się uzupełnianiem potrzebnych zależności. Ten wzorzec projektowy jest często mylnie utożsamiany z odwróceniem sterowania (Inversion of Control, IoC), gdy w rzeczywistości patrząc z technicznego punktu widzenia, wstrzykiwanie zależności jest jedną ze szczególnych realizacji paradygmatu odwrócenia sterowania.
Moduły to inaczej kontenery warstw naszej aplikacji (kontrolery, serwisy, dyrektywy). Moduł jest podstawowym nośnikiem danych tak jak klasa, jednak nie możemy tworzyć instancji modułu, ponieważ opiera się on na nieco innej funkcjonalności. Warto podkreślić, że modułowa budowa frameworka znacząco wspomaga pracę w dużym zespole.
Cechą wyróżniającą Angular na tle innych bibliotek przeznaczonych do front-endu jest dwukierunkowe wiązanie danych. Mechanizm dwukierunkowego wiązania danych zapewnia dynamiczną synchronizację danych między warstwą widoku, a warstwą modelu danych. Zmiana zawsze znajduje odzwierciedlenie w obu komponentach. Wiązanie dwukierunkowe stanowi połączenie wiązania właściwości i zdarzeń.
Kolejną bardzo istotną cechą Angulara jest odpowiednia nawigacja. Dzięki niej mamy możliwość przekierowywania oraz ingerowania w wyświetlanie widoku strony dla odpowiedniego adresu.
Niezbędną rzeczą obecną w każdej aplikacji jest filtrowanie danych. Angular oferuje wbudowane mechanizmy filtrowania, które poniekąd wyręczają deweloperów w pisaniu własnych funkcji filtrujących dane.
W Angularze bardzo często wykorzystuje się takie narzędzia jak IDE i WebStorm. IDE nie jest konkretnym narzędziem, lecz zintegrowanym środowiskiem developerskim umożliwiającym między innymi pisanie kodu. WebStorm jest jednym z najpopularniejszych IDE oferującym szereg funkcji przyspieszających i ułatwiających pisanie kodu. Dzięki niemu użytkownik może między innymi podglądać zmiany i rozwiązywać problemy bezpośrednio w IDE.
Swoją rosnącą popularność Angular zawdzięcza przede wszystkim swoim licznym zaletom. Poniżej prezentujemy najważniejsze atuty technologii, najbardziej doceniane przez deweloperów.
Perspektywy wykorzystania potencjału tej biblioteki są spore, rozbicie aplikacji na 3 elementy (wzorzec MVW) możemy de facto interpretować na parę sposobów, zatem mamy tutaj duże pole do popisu.
Biblioteka posiada funkcję dwukierunkowego wiązania danych, dzięki temu możemy oszczędzić ilość kodu, ponieważ Angular sam wyłapuje zmiany w warstwie modelu i wprowadza odpowiednie modyfikacje w kodzie HTML.
Testowanie rozwiązań opartych o Angular staję się dużo łatwiejsze. Jest to spowodowane tym, że biblioteka umożliwia narzucenie wcześniej wspomnianej architektury MVW, co ułatwia np. integrację testów jednostkowych.
Jedną z głównych niedoskonałości technologii jest ograniczony dostęp do opcji SEO platformy. Dużym minusem jest również słaba dostępność do robotów internetowych (web crawlers), czyli programów analizujących dane o strukturze i treści stron internetowych, pozwalających na ich pozycjonowanie.
Programiści przyznają, że Angular nie należy do najprostszych technologii i jest stosunkowo trudny do nauczenia. Nie ma się co dziwić, że przy tak złożonej sieci modułów oraz ogromnych ilościach możliwości dostosowywania, zrozumienie Angulara zajmuje nieco więcej czasu.
Należy pamiętać, że Angular został stworzony z myślą o dużych i złożonych projektach, dlatego nie warto korzystać z niego w przypadku tworzenia niewielkich i prostych stron internetowych, gdyż w tym przypadku technologia zamiast ułatwić nam pracę, może ją tylko jeszcze bardziej skomplikować.
Celem Angulara jest utworzenie jak najbardziej uproszczonego środowiska dla front-endowych programistów, którzy skupiają się przede wszystkim na aspekcie projektowania aplikacji. Angular świetnie sprawdza się podczas dużych i skomplikowanych projektów obejmujących złożoną infrastrukturę. Warto skorzystać z technologii również podczas projektowania progresywnej aplikacji internetowej (PWA) oraz opracowywania aplikacji do witryn sieci web opartych o dynamiczną zawartość. Programiści wybierają Angulara również podczas prac aktualizacyjnych przestarzałych aplikacji internetowych. Krótko mówiąc Angular wykorzystywany jest przy dużych i bardzo złożonych projektach. Dobrym przykładem wykorzystania technologii może stanowić jej zastosowanie w platformie Google Cloud. Angular może być również wykorzystywany do mniejszych projektów, jednak ze względu na swoją specyfikę, w przypadku niewielkich i prostych projektów, programiści zazwyczaj wybierają ogólnie proste, podstawowe i łatwiejsze do nauczenia frameworki.
Każda aplikacja zbudowana w technologii Angular musi posiadać co najmniej jeden moduł, który jest modułem głównym (AppModule). Moduł często nazywa się rdzeniem aplikacji, ponieważ zawiera w sobie wszystkie składowe Angulara takie jak serwisy, komponenty i dyrektywy. Podział aplikacji na moduły jest bardzo przydatny przy określaniu różnych funkcji aplikacji. Chodzi tutaj o stworzenie oddzielnych modułów np. modułu logowania i modułu do wyświetlania użytkowników. W module następuje deklaracja najważniejszych składowych Angulara.
W technologii wykorzystuje się NgModules, które uzupełniają moduły JavaScript. Moduły Angulara mogą wiązać komponenty z kodem, aby utworzyć jednostki funkcjonalne. Moduł główny odgrywa znaczącą rolę, ponieważ dostarcza mechanizm ładowania początkowego odpowiedzialnego za uruchamianie aplikacji. Pozostałe moduły funkcjonalne mogą importować funkcje z innych modułów lub je eksportować. Warto wspomnieć, że technika organizacji kodu w różnych modułach umożliwia korzystanie z takiej funkcji jak ładowanie modułów na żądanie. Dzięki temu nie musimy zawsze ładować całego kodu, tylko możemy pracować nad jego częściami.
Każda aplikacja zbudowana w technologii Angular musi posiadać co najmniej jeden komponent nazywany komponentem głównym, który łączy hierarchię komponentów z modelem obiektowym dokumentu strony (DOM). Warto dodać, że każdy komponent definiuje klasę zawierającą dane i logikę aplikacji.
Angular już od kilku lat zajmuje wysoką pozycję w rankingu najczęściej wybieranych technologii przez front-end deweloperów. Swoje ugruntowane miejsce zawdzięcza przede wszystkim dobrze zbudowanej strukturze i licznym zaletom. Oto lista najważniejszych powodów dużej popularność tej technologii.
Firmie Google bardzo zależy na tym, aby stworzona i rozwijana przez nich technologia była nie tylko doskonale rozumiana przez ich własnych pracowników, ale również przez innych użytkowników. Z tego powodu dokumentacja Angulara jest bardzo dokładna i szczegółowa. Nie tylko opisuje najdrobniejsze detale, zawiera wszystkie niezbędne informacje, ale również odpowiada na najczęstsze pytania programistów znajdujących się na początku przygody z Angularem.
Na sukces Angulara przełożyło się zbudowanie świetnego eksosystemu narzędzi i komponentów innych firm, które można wykorzystywać w aplikacjach Angular. Dzięki temu można uzyskać duże usprawnienia w zakresie funkcjonalności i produktywności.
Architektura oparta na komponentach jest jedną z najważniejszych cech technologii, która znacząco wpływa na jego popularność. Zgodnie z tą architekturą aplikacja podzielona jest na niezależne składniki logiczne i funkcjonalne. Programiści doceniają niezależność komponentów, która ułatwia testowanie aplikacji i zapewnia bezproblemowe działanie każdego składnika.
Nikogo nie dziwi fakt, że technologia wydana i rozwijana przez giganta technologicznego zgromadziła wokół siebie sporą społeczność, która aktywnie komunikuje się ze sobą, wymienia radami i pomaga w rozwiązywaniu problemów.
