Для создания веб-приложений, независимых от платформы решений, мобильных приложений с быстрым и гладким переходом по веб-ресурсам корпорация Google создала такой инструмент, как Ангуляр. Разберемся в структуре этой технологии и выясним, какие аспекты следует учесть при ее изучении.
Как устроен Angular
Angular использует концепцию «одностраничных приложений» (SPA, single-page application). Процесс работы следующий:
- Пользователь заходит на сайт.
- При посещении сайта браузер отправляет запрос на сервер.
- По итогам запроса сервер возвращает страницу для запрошенного URL.
- При просмотре первой страницы сервер фоново загружает остальные страницы.
- При необходимости перехода у пользователя уже загружены необходимые данные.
Одностраничное приложение работает так: технически сайт функционирует как одна страница и содержит шапку, меню, подвал. При этом основное содержимое загружается динамически, без необходимости перезагрузки. Хорошим примером такой реализации может быть социальная сеть VK, где новые сообщения могут появляться на экране в реальном времени, не требуя обновления страницы.
Компоненты
Все Angular-приложения состоят из набора компонентов. Разные компоненты представляют собой независимые элементы с собственным поведением. Например, лента новостей и кнопка «Прочитать» — это два разных элемента подобного рода.
Каждый компонент обычно выполняет отображение на экране и определенные действия: например, реакцию на клики, сворачивание, разворачивание, скрытие, переход.
У компонентов есть жизненные циклы, которые позволяют им изменяться и работать по заранее заданным сценариям. Например, при переходе от списка новостей к отдельной публикации такой компонент, как лента новостей, уничтожается, но при необходимости он может быть создан заново. Эти циклы помогают оптимизировать использование памяти, ускорять работу приложения.
Модули
Любые компоненты можно подключить к основным либо дополнительным модулям, управляющим их работой. Основной модуль отвечает за контроль всего приложения, дополнительные отслеживают функционирование отдельных элементов.
Дополнительные модули назначены для выполнения конкретных узких задач, подчиняются основному, необходимы для оптимизации. Они отвечают за такие аспекты, как:
- навигация;
- анимация;
- взаимодействие с браузером;
- хранение компонентов.
Формы
Почти в каждом приложении на Angular есть формы. В них есть поля, кнопки, такие как отправка, сохранение, ввод телефонного номера. Для них нет необходимости разрабатывать логику либо создавать их с нуля. Можно просто выбрать готовые блоки с формами, а потом быстро подключить их к основному модулю.
Сервисы
Для выполнения сложных операций компоненты заменяются сервисами, которые занимаются исключительно определенным набором логических операций.
Например, можно использовать сервис «Таблицы», чтобы отслеживать с его помощью страницы с обширными данными, а на основе этого автоматически обновлять контент. В этом случае сервис будет выполнять только эти задачи, ничего более.
Директивы
Периодически возникает необходимость использовать один и тот же компонент в нескольких частях веб-страницы. Например, при выборе валюты ее значок должен отображаться рядом с каждой ценой.
Для достижения этой цели удобно использовать компоненты или директивы. В случае с компонентами требуется много работы: если в каталоге 1000 ценовых позиций, для каждой необходим отдельный компонент со значком валюты. Директивы упрощают этот процесс: один новый блок автоматически добавляет нужный значок ко всем ценам.
Плюсы и минусы Angular
Преимущества:
- Angular использует Typescript, обеспечивая великолепную поддержку для этого языка.
- Angular-language-service предоставляет интеллектуальные возможности и автодополнение HTML-шаблонов компонентов.
- Новейшие возможности: генерация с использованием библиотек npm из командной строки, генерация, разработка компонентов с использованием Angular.
- Подробная документация, позволяющая разработчику получить всю необходимую информацию без необходимости обращаться за помощью к коллегам, хотя обучение требует времени.
- Односторонняя привязка данных обеспечивает надежное поведение приложения, сокращая риск возможных ошибок.
- MVVM (Model-View-ViewModel), позволяющая разработчикам независимо работать над одним и тем же разделом приложения, используя общий набор данных.
- Возможность внедрения зависимостей компонентов, связанных с модулями и модульной структурой в целом.
- Структура и архитектура, специально разработанные для обеспечения масштабируемости проекта.
Недостатки:
- Многообразие различных структур (Injectables, Components, Pipes, Modules) усложняет процесс изучения по сравнению с React и Vue.js, у которых есть только Component.
- Довольно медленная производительность, хотя существуют способы ее улучшения: один из них — использование ChangeDetectionStrategy для контроля рендеринга компонентов.
Angular и AngularJS: в чем разница
AngularJS, первая основная версия фреймворка, выпущена Google в 2012 году. Вторая основная версия была полностью переписана без JS в названии: разработчики отказались от зависимости от JavaScript.
Перечислим различия между двумя версиями фреймворка:
- Архитектура. AngularJS использует MVC — Model View Controller Design, где модель управляет данными, а контроллер обрабатывает ввод и высылает команды. Angular использует компоненты и директивы, где компоненты представляют собой директивы с шаблонами.
- Язык: AngularJS использует JavaScript, а Angular — TypeScript: JavaScript улучшается статической типизацией в сочетании с объектно-ориентированным подходом.
- Мобильная разработка: AngularJS не поддерживает мобильные браузеры, Angular совместим с ними.
- Синтаксис выражения: Angular использует «()» для событий, «[]» для свойств, упрощая связывание.
- Внедрение зависимостей: Angular имеет иерархическую систему внедрения зависимостей.
- Маршрутизация: Angular использует конфигурацию @Route для определения маршрутов, в отличие от @routeProvider.when в AngularJS.
- Управление и масштабируемость: Angular лучше структурирован, позволяет легко управлять большими приложениями, включает модульную конструкцию, угловой интерфейс командной строки, обладает более высокой производительностью по сравнению с AngularJS.
Как начать работать с Angular
Для начала работы требуется установить сервер Node.js и менеджер пакетов npm в случае их отсутствия на вашем устройстве. Для установки достаточно воспользоваться программой установки node.js, которая автоматически устанавливает npm.
Версия Node.js должна быть либо 18, начиная с подверсии 18.13.0 либо 20, начиная с подверсии 20.9.0.
Для TypeScript необходима версия 4.9.3 или выше, но ниже 5.3.0 (нужную версию TypeScript следует устанавливать локально в проекте).
То же самое относится к npm. Если установленная версия слишком старая или, наоборот, одна из последних, Angular может не поддерживать ее. Рекомендуется использовать версию npm, предлагаемую вместе с LTS-версией Node.js.
Как подойти к изучению Angular
Angular — инструмент, предназначенный для опытных разработчиков. Для разработки требуются базовые знания в таких областях, как:
- HTML, CSS, JavaScript — необходимые основы для разработки сайта.
- TypeScript — рекомендуемый язык программирования для приложений, разрабатываемых на Angular.
- Git, GitHub — инструменты для хранения, управления кодом, а также для коллективной работы.
- пакетные менеджеры — технологии для установки и обновления программных пакетов.
- препроцессоры — это инструменты, позволяющие упростить написание кода.
Профессиональные стандарты для Angular регулярно обновляются и публикуются на roadmap.sh. Для ознакомления с примерами работ на этом фреймворке рекомендуется посетить ресурс madewithangular.com. Также всегда можно переключиться на изучение другого фреймворка, например, React или Vue.