Framework od największej wyszukiwarki świata. Czym jest Angular?

Spis treści:

• Czym jest Angular
• Jak powstał
• Czym różni się od innych frameworków
• Jaka jest architektura frameworka?
• Jak utworzyć swój pierwszy projekt w Angularze
• Gdzie się go używa?
• Jakie są zalety i wady?
• Przydatne materiały od redaktorów Skillbox.by

Czym jest Angular

Angularto framework do tworzenia dynamicznych i interaktywnych aplikacji internetowych w językach programowania TypeScript i JavaScript. Platforma została opracowana przez Google. Framework szybko zyskał popularność w świecie tworzenia stron internetowych.

Framework służy do tworzenia aplikacji SPA – aplikacji internetowych działających jako pojedyncza strona. To aplikacja jednostronicowa, w której treść jest aktualizowana natychmiast, bez przeładowywania całej strony. Dzięki temu przejście między jej sekcjami jest natychmiastowe. Ta zasada działania leży u podstaw Angulara.

Obecnie platforma zajmuje jedno z czołowych miejsc wśród technologii dla front-end developmentu. Według badań Stack Overflow, AngularJS znajduje się w pierwszej dziesiątce najpopularniejszych frameworków.

Jak to się stało

W 2009 roku programista Google, Miško Hevery, i jego kolega i przyjaciel Adam Abrons postanowili ułatwić życie programistom. Wymyślili sposób na przekształcenie prostych formularzy HTML w formularze dynamiczne, czyli takie, które mogą się zmieniać i wchodzić w interakcję z użytkownikiem.

W 2010 roku Miško Heveri użył AngularJS w wewnętrznym projekcie Google, Google Feedback Tool. To narzędzie do zbierania opinii na temat produktów firmy. Mishko napisał kod w AngularJS w trzy tygodnie, chociaż wcześniej, korzystając z innego narzędzia, poświęcił na to sześć miesięcy. Następnie AngularJS uzyskał oficjalny status w Google i stał się dostępny dla wszystkich programistów.

W 2014 rokuGoogle wydało drugą wersję frameworka, którą nazwali Angular. Zawierała ona wiele zmian, które uczyniły narzędzie nowoczesnym. Na przykład programiści przepisali Angulara w TypeScript – języku programowania podobnym do JavaScript, ale o ustrukturyzowanej strukturze.

Zmiany w Angular 2 były znaczące; trudno nazwać go następcą AngularJS. Dlatego stara wersja nazywała się AngularJS, a nowa – po prostu Angular.

Czym różni się od innych frameworków

• Dwukierunkowe wiązanie danych.Wyobraź sobie, że tworzysz sklep internetowy. Potrzebujesz, aby informacje o produkcie były wyświetlane na stronie internetowej i jednocześnie aktualizowane w bazie danych. Angular umożliwia połączenie informacji o stronie internetowej z bazą danych. Jeśli zmienisz nazwę produktu na stronie internetowej, zostanie ona automatycznie zaktualizowana w bazie danych i odwrotnie;
• Architektura modułowa. Angular dzieli aplikację na oddzielne bloki zwane modułami. Każdy moduł odpowiada za swoją własną część aplikacji. Na przykład rejestrację użytkownika, koszyk zakupów lub wyświetlanie wiadomości. Upraszcza to rozwój i ułatwia dodawanie nowych funkcji;
• Wstrzykiwanie zależności.Wstrzykiwanie zależności przypomina dostawę artykułów spożywczych ze sklepu. Zamiast robić zakupy samemu, możesz je zamówić i zlecić dostawę. To samo dotyczy programistów. Nie muszą sami tworzyć wszystkich komponentów aplikacji. Angular pozwala „zamówić” gotowe komponenty, z których korzystają inni programiści;
• TypeScript.To język programowania podobny do JavaScript, ale z dodatkiem silnego typowania. Oznacza to, że dla każdej zmiennej trzeba określić typ danych. Na przykład tekst, liczbę lub datę. Dzięki temu kod staje się zrozumiały i można uniknąć błędów.

Jaka jest architektura frameworka?

Angular ma elementy, które działają razem jak koła zębate w zegarze:

• Komponenty.Są to podstawowe elementy aplikacji. Wyobraź sobie budowę domu z klocków LEGO. Komponent jest jednym z takich bloków. Zawiera kod, który kontroluje określony obszar aplikacji. Na przykład komponent Cart odpowiada za koszyk w sklepie internetowym;
• Moduły.Są to grupy połączonych ze sobą komponentów. Wyobraź sobie, że składasz całe maszyny z klocków LEGO, a nie z pojedynczych części – to jest moduł. Moduł łączy w sobie kilka współpracujących ze sobą komponentów. Na przykład „Moduł produktu” łączy komponenty „Lista produktów”, „Karty produktów” i „Filtr produktów”;

• Dyrektywy.Są to specjalne polecenia, które określają zachowanie elementów na stronie. Na przykład dyrektywa ngIf wyświetla element tylko wtedy, gdy spełniony jest określony warunek. Działa to jak instrukcja: „Jeśli ten warunek jest spełniony, pokaż element, jeśli nie, ukryj go”. Na przykład dyrektywa może wyświetlić produkt na liście zakupionych tylko wtedy, gdy użytkownik znajduje się w bazie danych kupujących tego produktu;
• Usługi.To kod używany przez różne komponenty do wykonywania określonych działań. Na przykład usługa autoryzacji odpowiada za sprawdzenie nazwy użytkownika i hasła;
  
• Szablony.Kod, który określa wygląd strony aplikacji. Szablony wykorzystują HTML z dodatkiem specjalnych poleceń Angulara. Wyobraź sobie, że budujesz dom z cegieł. Szablon jest wtedy planem domu, który pokazuje, gdzie powinny znajdować się poszczególne cegły.

Jak stworzyć swój pierwszy projekt w Angularze

Zespół redakcyjny Skillbox.by poprosił zespół programistów o pomoc w stworzeniu projektu. Wykonaj następujące kroki:

1. Zainstaluj oprogramowanie.Aby pracować z Angularem, potrzebujesz Node.js – platformy oprogramowania open source do pracy z językiem JavaScript. Można go pobrać z oficjalnej strony internetowej.

2. Utwórz nowy projekt.Możesz utworzyć projekt za pomocą Angular CLI. Angular CLI to narzędzie, które umożliwia tworzenie projektów w Angular. Aby zainstalować narzędzie, wpisz w wierszu poleceń:npm install -g @angular/cli

Teraz tworzymy nowy projekt, używając ng new my-first-project:

Następnie przejdź do folderu projektu i uruchom serwer za pomocą poleceń cd my-first-project i ng serve:

Teraz możesz kliknąć link i wyświetlić swoją witrynę:

3. Napisz pierwszy komponent.Komponent to podstawowy element konstrukcyjny w Angularze. Każdy komponent to oddzielny fragment kodu, który odpowiada za określoną część aplikacji. Możesz utworzyć nowy komponent za pomocą polecenia ng generate component my-component.

Oficjalna dokumentacja Angulara jest dostępna na stronie internetowej. Znajdziesz tam niezbędne materiały i dowiesz się, jak korzystać z frameworka.

Gdzie jest używany

Wiele firm korzysta z Angulara:

• Google.Google używa Angulara do tworzenia swoich wewnętrznych narzędzi i usług. Na przykład Google Cloud Platform i Google Analytics działają na Angularze;

• PayPal.Ta platforma pomaga tworzyć bezpieczne i niezawodne aplikacje. Na przykład Venmo i Xoom, z których korzystają miliony użytkowników na całym świecie;
• Upwork i Freelancer.Popularne platformy dla freelancerów również korzystają z Angulara. Angular pomaga zarządzać projektami, komunikować się z klientami i zarabiać.

Jakie są zalety i wady?

Zalety

• Modułowość.Angular umożliwia tworzenie aplikacji z oddzielnych bloków — komponentów. Każdy komponent odpowiada za swoje własne zadanie. Takie podejście pomaga szybciej tworzyć aplikacje. W końcu programiści mogą pracować nad poszczególnymi częściami bez wzajemnego zakłócania się. Poszczególne komponenty są łatwe do testowania. Zmniejsza to również ryzyko pojawienia się błędów w projekcie. Ten sam kod komponentu może być używany w różnych częściach aplikacji — to jak gotowe bloki, które można przestawiać na różne sposoby.
• Architektura MVC. Angular wykorzystuje architekturę MVC, która dzieli aplikację na trzy części.

• Mnóstwo narzędzi programistycznych. AngularJS oferuje wiele narzędzi i bibliotek. Pomogą Ci poradzić sobie z każdym zadaniem podczas tworzenia złożonych aplikacji internetowych.
• Skalowalność.Dzięki architekturze komponentów i silnemu typowaniu, Angular pozwala rozszerzać aplikacje, dodawać nowe funkcje i zmieniać istniejące.

• Obsługiwane przez Google. Google regularnie publikuje nowe wersje Angulara, dodając nowe funkcje i ulepszając istniejące. Duża i aktywna społeczność programistów Angulara zapewnia dodatkowe wsparcie i pomoc. Dokumentacja, samouczki i fora do komunikacji są dostępne online.

Wady

• Złożona struktura. Angular jest trudniejszy do nauczenia niż podobne frameworki, na przykład React czy Vue.js. Ponieważ oprócz komponentów zawiera dodatkowe struktury. To jak składanie dużego zestawu konstrukcyjnego – więcej części i więcej czasu na zrozumienie.
• Problemy ze zgodnością. Angular ma starszą wersję AngularJS, która jest niezgodna z nową. Programiści pracujący z AngularJS muszą zapoznać się z nią osobno. W końcu zasady działania starego Angulara nie pokrywają się z nowymi.

Przydatne materiały od redaktorów Skillbox.by

Angular to potężne narzędzie do tworzenia aplikacji internetowych. Pozwala tworzyć aplikacje, które:

• działają na różnych urządzeniach: od komputera po smartfon.
• szybko się ładują i działają bez opóźnień.
• Łatwy w aktualizacji.

Jeśli chcesz zostać programistą lub masz już doświadczenie, nauka Angulara to świetny sposób na doskonalenie umiejętności. Te przydatne zasoby pomogą Ci się nauczyć:

Oficjalna dokumentacja Angulara:

• Dokumentacja Angulara — tutaj znajdziesz wszystko, od podstawowego wprowadzenia po zaawansowane tematy.

Artykuły i przewodniki:

• Tour of Heroes — oficjalny przewodnik szkoleniowy na temat tworzenia aplikacji w Angularze;
• Angular University — Kursy i artykuły o wszystkich funkcjach Angulara.

Blogi i społeczności:

• Stack Overflow — miejsce, w którym znajdziesz odpowiedzi na konkretne pytania.
• Reddit: r/Angular2 — Aktywna społeczność, w której możesz uzyskać porady i omówić najnowsze wiadomości.
• Blog Angular — oficjalny blog z nowościami i ogłoszeniami.