Angular

Кратко въведение

Angular е фреймуърк с отворен код, базиран на TypeScript, за front-end разработка, поддържан от Google, който е специално проектиран за създаване на мащабируеми уеб приложения и приложения от една страница (SPA).

Той е пуснат през 2016 г. и е наследник на Angular JS, чийто произход може да се проследи до 2009 г., когато екип от инженери на Google създава AngularJS – фреймуърк за изграждане на уеб приложения, базиран на JavaScript.

Когато говорим за Angular, не можем да пренебрегнем неговото начало – като приложение, написано на JavaScript (AngularJS). Преходът към базирано на TypeScript приложение (Angular) обаче е толкова значителен, че ражда изцяло нов продукт, и затова ги различаваме, тъй като те се отличават напълно по много параметри, а не само по езика за програмиране.

Някои от тези разлики са, че архитектурата на AngularJS е MVVM (Model-View-ViewModel), докато архитектурата на Angular е базирана на компоненти (Component-based). Въпреки че функциите на Angular са широкообхватни и включват маршрутизиране (routing), внедряване на зависимости (dependency injection) и валидиране на формуляри, AngularJS не предлага същото. Тъй като Angular е фреймуърк, базиран на TypeScript, той не следва стриктно, а разширява HTML шаблоните.

Въпреки огромните разлики обаче, основната цел на Angular остава непроменена – да изгражда интерфейси за динамични уеб приложения, способни да обработват големи обеми от данни. Нека се запознаем по-подробно с функциите на Angular и с това как работи по-долу.

Как работи?

В едно Angular приложение модулът не е нищо повече от съвкупност от компоненти, директиви, канали (pipes) и услуги, които обикновено се използват в приложението. Всички тези групи комуникират помежду си, за да изградят ефективно функционалност, която да направи приложението ви сигурно и надеждно.

Angular приложението се състои от 8 градивни елемента, които разработчиците често използват в рамките на фреймуърка при създаването на уеб приложения, за да осигурят безпроблемното им разработване. Тези градивни елементи включват:

  • Модули (Modules): Всяко Angular приложение има един основен модул, наречен AppModule. Този модул обикновено предоставя на разработчиците механизъм за стартиране (bootstrap), който улеснява пускането на нови приложения.

  • Компоненти (Components): Всяко Angular приложение има поне един компонент – основният (root) компонент, който свързва йерархията от компоненти с обектния модел на документа (DOM) на страницата. Всеки компонент дефинира клас, съдържащ данните и логиката на приложението, и е свързан с HTML шаблон, който определя изгледа (view), който да бъде показан в целевата среда.

  • Услуги (Services): Разработчиците на Angular създават клас за услуга (service class), когато няма специфични данни или логика, свързани с конкретния изглед. Освен това те могат да споделят данните или логиката между различни компоненти за многократна употреба.

  • Шаблони (Templates): Шаблоните в Angular са комбинация от HTML и Angular маркиране (markup). Основната цел на тези шаблони е да модифицират HTML елементите, преди да бъдат показани. В допълнение, директивите на шаблона предоставят програмна логика, а маркирането за обвързване (binding markup) свързва данните на вашето приложение с манипулацията на DOM.

  • Метаданни (Metadata): Метаданните действат като дескриптор, който информира системата как да обработи даден клас. Те са специално предназначени да "декорират" класа, така че разработчиците да могат бързо да конфигурират очакваното му поведение.

  • Обвързване на данни (Data binding): Концепцията за обвързване на данни в Angular обикновено се грижи за комуникацията в реално време между даден шаблон и свързания с него компонент. Нещо повече, обвързването на данни е от голяма полза и за комуникацията между родителски и дъщерни компоненти.

  • Директиви (Directives): Директивите са класове, които могат да променят структурата на DOM или да модифицират атрибути в DOM и модела на данните на компонента. Класът на директивата обикновено се свързва с HTML елемент или атрибут, като този елемент или атрибут често се нарича самата директива. Когато Angular открие директива в HTML шаблон, той създава инстанция на съответния клас на директивата и ѝ предоставя контрол върху тази част от DOM на браузъра.
    Angular има три категории директиви: Компоненти, които се използват за свързване на шаблон с клас. Атрибутни директиви, които променят поведението и външния вид на елементите на страницата. Структурни директиви, които променят структурата на DOM. Angular предоставя редица вградени директиви, които започват с префикса ng. Можете също така да създавате нови директиви, за да реализирате своя собствена функционалност.

  • Внедряване на зависимости (Dependency Injection): Представлява шаблон за проектиране (design pattern) и механизъм за създаване и предоставяне на едни части от приложението (зависимости) на други негови части, които се нуждаят от тях. В Angular зависимостите обикновено са услуги, но могат да бъдат и стойности като низове или функции. Инжекторът за дадено приложение (който се създава автоматично по време на стартиране) създава инстанции на зависимостите при необходимост, използвайки конфигуриран доставчик (provider) на услугата или стойността.

Предимства

Фреймуъркът Angular има цяла гама от предимства, които свидетелстват за неговото висококачествено изпълнение. Най-изявените сред тях обаче са следните:

  • Персонализирани компоненти за многократна употреба – това позволява на разработчиците да създават свои собствени компоненти. Тези компоненти могат да се използват многократно, да се комбинират и влагат, предоставяйки своеобразен конструктор за изграждането на приложението.

  • Асинхронно програмиране – това дава на разработчиците предимството да изпълняват задачи асинхронно. Когато даден потребител извика някакво действие, приложението продължава да работи и да изпълнява други действия. В резултат на това различни разработчици или екипи могат да се справят с различни задачи едновременно, докато приложението продължава да функционира.

  • Лесно тестване – Angular може да се използва за извършване на модулно тестване (Jasmine/Karma) и тестване от край до край (Protractor, Cypress) на приложението. Фреймуъркът е подходящ за извършване както на просто модулно тестване, така и на тестване от край до край. Броят на разработчиците/потребителите няма значение. Възможно е да се тества всяка част от вашето приложение.

  • Висока съвместимост – Angular е кросплатформено съвместим с всички основни браузъри като Chrome или Firefox. За да могат сравнително лесно да разработват големи и малки приложения със съвременни уеб технологии, компаниите се нуждаят от подходящи ресурси и надеждни инструменти.

Недостатъци

Като всеки продукт, Angular също има своите недостатъци.

Някои от тях са, че кривата на обучение за този инструмент е по-стръмна в сравнение с други JavaScript фреймуърци като React. Широкият набор от много и различни функции може да бъде плашещ за начинаещите, което може да доведе до по-дълъг период на навлизане.

Известно е също, че приложенията на Angular имат по-голямо количество шаблонен код (boilerplate code) в сравнение с други фреймуърци, което води до по-голяма кодова база, чиято поддръжка може да се окаже предизвикателство.

Приложенията на Angular генерират съдържание предимно от страна на клиента (client-side), което може да доведе до ограничения във възможностите за SEO. Изисква се допълнителна работа, за да се гарантира правилното прилагане на оптимизацията за търсачки, но този фактор е специфичен за даден проект и не е универсален.

Дори и при посочените недостатъци, Angular е предпочитан фреймуърк сред разработчиците и много големи компании, включително и самият Google, разбира се – той се използва в различни компоненти на Outlook, Office 365, OneDrive. Използва се и от други водещи компании като PayPal, Deutsche Bank, Delta Air Lines, IBM, Bosch и много други.

Основни изводи

  • Angular е структурен фреймуърк за изграждане на уеб приложения, който използва TypeScript като език за програмиране.

  • Angular следва архитектура, базирана на компоненти, която позволява на разработчиците да създават UI компоненти за многократна употреба и с лекота да изграждат сложни приложения.

  • Angular разполага с мощен набор от функции като двупосочно обвързване на данни, внедряване на зависимости и директиви, които улесняват разработването на динамични уеб приложения.

  • Angular има йерархична система за внедряване на зависимости, която позволява слабо свързване (loose coupling) между компонентите, което улеснява замяната или актуализирането на отделни компоненти, без това да засяга цялото приложение.

  • Angular има модулна архитектура, която позволява на разработчиците да разделят приложението на по-малки модули, които могат да се зареждат при поискване (on-demand), подобрявайки производителността и намалявайки времето за зареждане.


Адрес

Улица Слънце 3, Велико Търново, България

Контакти

Въведете име
Въведете фамилия
Въведете имейл
Невалиден имейл
Въведете съобщение