Angular CLI
Архитектура
Angular — это платформа-фреймворк для создания клиентских приложений на HTML и
TypeScript.
Angular написан на TypeScript.
Основные и дополнительные функции можно подключать к приложению как библиотеки
TypeScript.
Главные строительные блоки приложения — модули (NgModules), которые обеспечивают
контекст выполнения компонентов.
Модули объединяют связанный код в функциональные группы.
Приложение на Angular состоит из набора модулей.
В любом приложении всегда есть корневой модуль (root module).
Он позволяет произвести начальную загрузку приложения.
Как правило, у приложения есть и другие функциональные модули.
- Компоненты определяют представления (views).
Это наборы экранных элементов.
Из них Angular может выбирать и изменять в зависимости от логики и данных
программы. - Компоненты используют сервисы, обеспечивающие специфическую функциональность, не
связанную напрямую с представлением.
Сервис-провайдеры могут быть включены в компоненты как зависимости, что делает код
модульным, эффективным и готовым к повторному использованию.
Как компоненты, так и сервисы — просто классы с декораторами, которые обозначают их
тип и задают метаданные.
Метаданные говорят Angular, как их использовать.
- Метаданные класса компонента ассоциируют его с шаблоном, определяющим
представление.
Шаблон состоит из обычного HTML с директивами Angular и из пометок привязки
(binding).
Они позволяют Angular изменять HTML перед отображением на экран. - Метаданные для обслуживающего класса предоставляют информацию, которая должна
быть доступна для компонентов через инъекцию зависимости.
Компоненты приложения обычно определяют много представлений в иерархическом
порядке.
Angular предоставляет сервис Router.
Он помогает определить пути навигации между множеством представлений.
Router обеспечивает возможность сложной навигации внутри браузера.
Модули
Модули Angular отличаются от модулей JavaScript (ES2015) и дополняют их.
Модуль в Angular объявляет контекст выполнения множества компонентов, для домена
приложения, рабочего процесса или близко связанного с ним набора возможностей.
Модуль может связывать свои компоненты с соответствующим кодом, например с
сервисами, для создания функциональных блоков.
У каждого приложения есть корневой модуль, условно он называется AppModule.
Он предоставляет механизм загрузки, запускающий приложение.
Обычно приложение содержит множество функциональных модулей.
Подобно модулям JavaScript, модули Angular могут импортировать функциональность из
других модулей, и разрешать их собственную функциональность для экспорта и
использования другими модулями.
Например, чтобы использовать службу маршрутизации в приложении, нужно
импортировать модуль Router.
Объединение кода в отдельные функциональные модули помогает упростить разработку
сложных приложений и в дальнейшем использовать их при необходимости.
Кроме того, это техника позволяет использовать возможности «ленивой загрузки», то
есть, загружает модули только тогда, когда к ним обращаются, что помогает
минимизировать количество кода, загружаемого при старте приложения.
Компоненты
У каждого приложения на Angular есть как минимум один компонент — корневой, который
связывает его иерархию с объектной моделью документа (DOM) страницы.
Каждый компонент определяет класс, содержащий данные приложения и логику, и
связанный с шаблоном HTML, определяющим представление в выбранном окружении.
Декоратор Component() идентифицирует класс сразу под ним как компонент и
представляет шаблон и связанные с ним метаданные компонента.
Angular определяет ряд декораторов, которые предоставляют особый вид метаданных
классам, благодаря чему система знает, что означают эти классы и как они должны
работать.
Шаблоны, директивы и связывание данных
Шаблон сочетает HTML с пометками Angular, которые могут изменять HTML-элементы
перед их отображением на экран.
Директивы шаблона обеспечивают программу логикой, а пометка привязки связывает
данные приложения с DOM.
Существует два типа пометки привязки:
- Привязка по событию позволяет приложению реагировать на пользовательский ввод в
определенные области с помощью обновления данных приложения. - Привязка по свойству позволяет вставлять значения, которые вычисляются из данных
приложения, в HTML.
Перед отображением представления, Angular определяет директивы и изучает синтакс
связывания в шаблоне, чтобы изменить HTML-элементы и DOM сообразно данным и
логике приложения.
Angular поддерживает двустороннее связывание данных, то есть, изменения в DOM,
например, выбор пользователя, также влияют на данные программы.
Шаблоны могут использовать каналы (pipes), чтобы улучшить восприятие пользователем
сайта с помощью изменения отображающихся значений.
Например, использование каналов для отображения дат и значений валют, которые
соответствуют текущему расположению пользователя.
Angular использует предопределенные каналы для общих изменений, но также при желании
можно создать свой собственный канал.
Сервисы и инъекции зависимостей
Для данных и логики, которые не ассоциируются с определенным представлением и
которые предполагается использовать внутри нескольких компонентов, можно создать
вспомогательный класс.
Определение этого класса следует сразу после декоратора @Injectable().
Этот декоратор предоставляет метаданные, которые позволяют сервису быть
включенным в клиентские компоненты и зависимости.
Инъекция зависимости позволяет поддерживать классы компонента эффективными и
небольшими.
Они не получают данных от сервера, не проверяют вошел ли пользователь, и не выводят
ничего прямо в консоль.
Они делегируют подобные задачи сервисам.
Маршрутизация
В Angular модуль Router обеспечивает сервис, который позволяет определить
навигационные пути среди разных частей приложения и иерархию представлений в вашем
приложении.
Он смоделирован по привычным правилам навигации браузера:
- Ввод URL в адресную строку предполагает, что браузер перенаправит на запрашиваемую
страницу. - Переход по ссылке на странице ведет к открытию новой страницы.
- Нажатие на кнопки «вперед» и «назад» в браузере приводит к открытию последующих и
предыдущих просмотренных вкладок.
Маршрутизатор сопоставляет URL пути к представлениям вместо страниц.
Когда пользователь совершает действие, например щелчок по ссылке, подгружается новая
страница в браузере, а маршрутизатор перехватывает действия браузера и показывает
или скрывает иерархию представления.
Если маршрутизатор определяет, что текущее состояние приложения требует
определенной функциональности, а также что модуль, определяющий ее, не был загружен,
маршрутизатор может лениво загрузить модуль по требованию.
Маршрутизатор интерпретирует адрес URL в соответствие с правилами навигации и
состоянием данных.
Можно перейти в новые представления кликом на кнопку, выбором из выпадающего окна
или
любым иным доступным способом.
Маршрутизатор записывает действия в истории браузера, таким образом кнопки
«назад» и «вперед» также работают.
Чтобы определить правила навигации, нужно ассоциировать пути навигации с
компонентами.
Путь использует синтакс URL, который объединяет данные программы, во многом
аналогично тому, как синтакс шаблона объединяет представления с данными программы.
Теперь можно применить логику программы, чтобы выбрать, какое представление
показать или скрыть в ответ на ввод пользователя и собственные правила доступа.
Что потом?
Вы изучили основы о главных строительных блоках приложения Angular.
Следующая диаграмма показывает, как взаимосвязаны эти части.
- Компонент и шаблон вместе определяют представление Angular.
Декоратор добавляет метаданные в класс компонента, включая указатель на связанный
шаблон.
Директивы и пометки привязки в шаблоне компонента изменяют представление,
основываясь на данных и логике программы. - Инъекция зависимости обеспечивает компонент сервисами, такими как сервис
маршрутизатора, который позволяет определить навигацию в представлениях.
Теперь, когда вы ознакомились с этими основополагающими строительными блоками
приложения, вы можете изучить их более детально в документации.
Ссылка на источник: angular.io/guide/architecture
Автор: рыцарь со стволом
