- PVSM.RU - https://www.pvsm.ru -
Angular — это платформа-фреймворк для создания клиентских приложений на HTML и
TypeScript.
Angular написан на TypeScript.
Основные и дополнительные функции можно подключать к приложению как библиотеки
TypeScript.
Главные строительные блоки приложения — модули (NgModules), которые обеспечивают
контекст выполнения компонентов.
Модули объединяют связанный код в функциональные группы.
Приложение на Angular состоит из набора модулей.
В любом приложении всегда есть корневой модуль (root module).
Он позволяет произвести начальную загрузку приложения.
Как правило, у приложения есть и другие функциональные модули.
Как компоненты, так и сервисы — просто классы с декораторами, которые обозначают их
тип и задают метаданные.
Метаданные говорят Angular, как их использовать.
Компоненты приложения обычно определяют много представлений в иерархическом
порядке.
Angular предоставляет сервис Router.
Он помогает определить пути навигации между множеством представлений.
Router обеспечивает возможность сложной навигации внутри браузера.
Модули Angular отличаются от модулей JavaScript (ES2015) и дополняют их.
Модуль в Angular объявляет контекст выполнения множества компонентов, для домена
приложения, рабочего процесса или близко связанного с ним набора возможностей.
Модуль может связывать свои компоненты с соответствующим кодом, например с
сервисами, для создания функциональных блоков.
У каждого приложения есть корневой модуль, условно он называется AppModule.
Он предоставляет механизм загрузки, запускающий приложение.
Обычно приложение содержит множество функциональных модулей.
Подобно модулям JavaScript, модули Angular могут импортировать функциональность из
других модулей, и разрешать их собственную функциональность для экспорта и
использования другими модулями.
Например, чтобы использовать службу маршрутизации в приложении, нужно
импортировать модуль Router.
Объединение кода в отдельные функциональные модули помогает упростить разработку
сложных приложений и в дальнейшем использовать их при необходимости.
Кроме того, это техника позволяет использовать возможности «ленивой загрузки», то
есть, загружает модули только тогда, когда к ним обращаются, что помогает
минимизировать количество кода, загружаемого при старте приложения.
У каждого приложения на Angular есть как минимум один компонент — корневой, который
связывает его иерархию с объектной моделью документа (DOM) страницы.
Каждый компонент определяет класс, содержащий данные приложения и логику, и
связанный с шаблоном HTML, определяющим представление в выбранном окружении.
Декоратор Component [1]() идентифицирует класс сразу под ним как компонент и
представляет шаблон и связанные с ним метаданные компонента.
Шаблон сочетает HTML с пометками Angular, которые могут изменять HTML-элементы
перед их отображением на экран.
Директивы шаблона обеспечивают программу логикой, а пометка привязки связывает
данные приложения с DOM.
Существует два типа пометки привязки:
Перед отображением представления, Angular определяет директивы и изучает синтакс
связывания в шаблоне, чтобы изменить HTML-элементы и DOM сообразно данным и
логике приложения.
Angular поддерживает двустороннее связывание данных, то есть, изменения в DOM,
например, выбор пользователя, также влияют на данные программы.
Шаблоны могут использовать каналы (pipes), чтобы улучшить восприятие пользователем
сайта с помощью изменения отображающихся значений.
Например, использование каналов для отображения дат и значений валют, которые
соответствуют текущему расположению пользователя.
Angular использует предопределенные каналы для общих изменений, но также при желании
можно создать свой собственный канал.
Для данных и логики, которые не ассоциируются с определенным представлением и
которые предполагается использовать внутри нескольких компонентов, можно создать
вспомогательный класс.
Определение этого класса следует сразу после декоратора @Injectable().
Этот декоратор предоставляет метаданные, которые позволяют сервису быть
включенным в клиентские компоненты и зависимости.
Инъекция зависимости позволяет поддерживать классы компонента эффективными и
небольшими.
Они не получают данных от сервера, не проверяют вошел ли пользователь, и не выводят
ничего прямо в консоль.
Они делегируют подобные задачи сервисам.
В Angular модуль Router обеспечивает сервис, который позволяет определить
навигационные пути среди разных частей приложения и иерархию представлений в вашем
приложении.
Он смоделирован по привычным правилам навигации браузера:
Маршрутизатор сопоставляет URL пути к представлениям вместо страниц.
Когда пользователь совершает действие, например щелчок по ссылке, подгружается новая
страница в браузере, а маршрутизатор перехватывает действия браузера и показывает
или скрывает иерархию представления.
Если маршрутизатор определяет, что текущее состояние приложения требует
определенной функциональности, а также что модуль, определяющий ее, не был загружен,
маршрутизатор может лениво загрузить модуль по требованию.
Маршрутизатор интерпретирует адрес URL в соответствие с правилами навигации и
состоянием данных.
Можно перейти в новые представления кликом на кнопку, выбором из выпадающего окна
или
любым иным доступным способом.
Маршрутизатор записывает действия в истории браузера, таким образом кнопки
«назад» и «вперед» также работают.
Чтобы определить правила навигации, нужно ассоциировать пути навигации с
компонентами.
Путь использует синтакс URL, который объединяет данные программы, во многом
аналогично тому, как синтакс шаблона объединяет представления с данными программы.
Теперь можно применить логику программы, чтобы выбрать, какое представление
показать или скрыть в ответ на ввод пользователя и собственные правила доступа.
Вы изучили основы о главных строительных блоках приложения Angular.
Следующая диаграмма показывает, как взаимосвязаны эти части.
Теперь, когда вы ознакомились с этими основополагающими строительными блоками
приложения, вы можете изучить их более детально в документации.
Ссылка на источник: angular.io/guide/architecture [2]
Автор: рыцарь со стволом
Источник [3]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/angular/290616
Ссылки в тексте:
[1] Component: https://habr.com/users/component/
[2] angular.io/guide/architecture: https://angular.io/guide/architecture
[3] Источник: http://habrahabr.ru/sandbox/123241/
Нажмите здесь для печати.