Angular logo

Angular

Angular to kompleksowy framework do projektowania oraz tworzenia wydajnych aplikacji typu SPA (Single Page Application) .

Napisany w języku TypeScript i wspierany oraz rozwijany przez Google. Angular początkowo miał być wersją 2 popularnego frameworku AngularJS, jednak decyzje projektowe sprawiły, że Google zdecydował się wydać go jako osobny byt, m.in. ze względu na brak kompatybilności wstecznej oraz prostej ścieżki aktualizacji aplikacji napisanych w AngularJS do Angular 2[2]. Angular wydany jest na licencji MIT.

Zalety Angular

GOTOWY DO UŻYCIA NATYCHMIAST

Domyślna konfiguracja Angular zapewnia wszystko, czego potrzebujesz, od razu po uruchomieniu. Obejmuje to narzędzia do obsługi routingu, dzięki czemu możesz łatwo pobrać dane, które chcesz przedstawić w swojej aplikacji. Wstępnie skonfigurowane środowisko Angulara nie tylko pomaga w programowaniu, ale także ułatwia testowanie.

WYDAJNOŚĆ

Możliwość szybkiego tworzenia widoków interfejsu użytkownika za pomocą prostej i wydajnej składni. Angular CLI - narzędzie wiersza poleceń pozwalają szybko tworzyć, dodawać komponenty i testy, a następnie umożliwia szybkie wdrożenie.

TYPESCRIPT

Angular jest zbudowany z TypeScript. Główną zaletą tego silnie wpisanego języka jest to, że pomaga programistom w utrzymaniu czystego i zrozumiałego kodu. Błędy są łatwiejsze do wykrycia i wyeliminowania dzięki możliwości zobaczenia typowych błędów podczas pisania. To przyspiesza debugowanie, a także ułatwia utrzymanie dużej bazy kodu - co jest szczególnie korzystne w dużych projektach na skalę korporacyjną.

Koncepcja aplikacji

Architektura aplikacji

Opiera się na pewnych podstawowych pojęciach. Podstawowymi elementami składowymi frameworka Angular są komponenty Angular, które są zorganizowane w NgModules. NgModules zbierają powiązany kod w zestawy funkcjonalne; aplikacja Angular jest definiowana przez zestaw NgModules. Aplikacja zawsze ma co najmniej moduł główny, który umożliwia ładowanie początkowe, i zazwyczaj ma o wiele więcej modułów funkcji.

Komponenty

Definiują widoki, które są zestawami elementów ekranu, które Angular może wybierać i modyfikować zgodnie z logiką programu i danymi.
Korzystają z usług, które zapewniają określoną funkcjonalność niezwiązaną bezpośrednio z widokami. Service providers mogą być wstrzykiwani do komponentów jako zależności, dzięki czemu kod jest modułowy, wielokrotnego użytku i wydajny.

Moduły, komponenty i usługi

To klasy, które używają dekoratorów. Te dekoratory zaznaczają swój typ i dostarczają metadane, które informują Angular, jak ich używać.

Metadane klasy komponentów

Metadane klasy komponentów wiążą ją z szablonem definiującym widok. Szablon łączy zwykły HTML z dyrektywami Angular i znacznikami powiązań, które pozwalają Angularowi modyfikować kod HTML przed renderowaniem go do wyświetlenia.

Powiązania danych

Szablon łączy HTML ze znacznikami Angular, które mogą modyfikować elementy HTML przed ich wyświetleniem. Dyrektywy szablonów zapewniają logikę programu, a wiążące znaczniki łączą dane aplikacji i DOM. Istnieją dwa typy powiązań danych:

  • powiązanie zdarzeń umożliwia aplikacji reagowanie na dane wejściowe użytkownika w środowisku docelowym przez aktualizowanie danych aplikacji.
  • powiązanie właściwości umożliwia interpolację wartości, które są obliczane z danych aplikacji do kodu HTML.

Poniższy diagram pokazuje w jaki sposób podstawowe elementy są ze sobą powiązane:

Architecture of an Angular 2 application