Введение в концепции Angular¶
28.02.2022
Angular — это платформа и фреймворк для создания одностраничных клиентских приложений с использованием HTML и TypeScript. Angular написан на языке TypeScript.
Он реализует основные и дополнительные функции в виде набора библиотек TypeScript, которые вы импортируете в свои приложения.
Архитектура приложения Angular опирается на определенные фундаментальные концепции. Основными строительными блоками фреймворка Angular являются компоненты Angular, которые организованы в NgModules.
NgModules собирают связанный код в функциональные наборы; приложение Angular определяется набором NgModules.
Приложение всегда имеет как минимум корневой модуль, который обеспечивает загрузку, и обычно имеет много других функциональных модулей.
-
Компоненты определяют виды, которые представляют собой наборы элементов экрана, которые Angular может выбирать и изменять в соответствии с логикой и данными вашей программы.
-
Компоненты используют сервисы, которые обеспечивают специфическую функциональность, не связанную напрямую с представлениями.
Поставщики услуг могут быть инжектированы в компоненты в качестве зависимостей, что делает ваш код модульным, многократно используемым и эффективным.
Модули, компоненты и сервисы — это классы, использующие декораторы. Эти декораторы обозначают их тип и предоставляют метаданные, которые указывают Angular, как их использовать.
-
Метаданные класса компонента связывают его с шаблоном, определяющим представление. Шаблон объединяет обычный HTML с Angular директивами и связывающей разметкой, которые позволяют Angular изменять HTML перед его отображением на экране.
-
Метаданные класса сервиса содержат информацию, необходимую Angular для того, чтобы сделать его доступным для компонентов через инъекцию зависимости (DI).
Компоненты приложения обычно определяют множество представлений, расположенных иерархически. Angular предоставляет сервис Router, чтобы помочь вам определить пути навигации между представлениями.
Маршрутизатор обеспечивает сложные возможности навигации в браузере.
Смотрите Angular Glossary для основных определений важных терминов Angular и их использования.
Пример приложения, которое описывается на этой странице, см.:
Модули¶
Модули Angular NgModules отличаются от модулей JavaScript (ES2015) и дополняют их. NgModule объявляет контекст компиляции для набора компонентов, предназначенных для домена приложения, рабочего процесса или тесно связанного набора возможностей.
NgModule может связывать свои компоненты со смежным кодом, таким как сервисы, для формирования функциональных единиц.
Каждое приложение Angular имеет корневой модуль, условно называемый AppModule, который обеспечивает механизм загрузки, запускающий приложение. Приложение обычно содержит множество функциональных модулей.
Как и модули JavaScript, NgModules могут импортировать функциональность из других NgModules, а также позволяют экспортировать свою собственную функциональность и использовать ее другими NgModules. Например, чтобы использовать сервис маршрутизатора в вашем приложении, вы импортируете NgModule Router.
Организация кода в отдельные функциональные модули помогает управлять разработкой сложных приложений и проектировать их повторное использование. Кроме того, эта техника позволяет использовать преимущества lazy-loading — то есть загрузки модулей по требованию — для минимизации объема кода, который необходимо загрузить при запуске.
Для более подробного обсуждения смотрите Введение в модули.
Компоненты¶
В каждом приложении Angular есть как минимум один компонент, корневой компонент, который связывает иерархию компонентов с объектной моделью документа страницы (DOM). Каждый компонент определяет класс, содержащий данные и логику приложения, и связан с HTML шаблоном, определяющим представление, которое будет отображаться в целевой среде.
Декоратор @Component() идентифицирует класс, расположенный непосредственно под ним, как компонент, и предоставляет шаблон и связанные с ним метаданные, специфичные для компонента.
Декораторы — это функции, которые изменяют классы JavaScript. Angular определяет ряд декораторов, которые прикрепляют определенные виды метаданных к классам, чтобы система знала, что эти классы означают и как они должны работать.
Шаблоны, директивы и привязка данных¶
Шаблон объединяет HTML с разметкой Angular, которая может изменять элементы HTML перед их отображением. Шаблонные директивы обеспечивают программную логику, а связывающая разметка соединяет данные вашего приложения и DOM.
Существует два типа привязки данных:
| Связывание данных | Подробности |
|---|---|
| Привязка к событиям | Позволяет вашему приложению реагировать на ввод пользователя в целевой среде путем обновления данных приложения. |
| Привязка к свойствам | Позволяет интерполировать значения, вычисленные из данных приложения, в HTML. |
Перед отображением представления Angular оценивает директивы и разрешает синтаксис привязки в шаблоне, чтобы изменить элементы HTML и DOM в соответствии с данными и логикой вашей программы. Angular поддерживает двустороннее связывание данных, что означает, что изменения в DOM, такие как выбор пользователя, также отражаются в данных вашей программы.
Ваши шаблоны могут использовать пайпы для улучшения пользовательского опыта путем преобразования значений для отображения. Например, используйте пайпы для отображения дат и валютных значений, соответствующих локали пользователя.
Angular предоставляет предопределенные пайпы для общих преобразований, и вы также можете определить свои собственные пайпы.
Для более подробного обсуждения этих понятий смотрите Введение в компоненты.
Сервисы и инъекция зависимостей¶
Для данных или логики, которые не связаны с конкретным представлением и которые вы хотите использовать совместно с другими компонентами, вы создаете класс сервис. Определению класса сервиса непосредственно предшествует декоратор @Injectable().
Декоратор предоставляет метаданные, которые позволяют другим провайдерам быть инжектированными в ваш класс в качестве зависимостей.
Инъекция зависимостей (DI) позволяет вам сохранить ваши классы компонентов компактными и эффективными. Они не получают данные с сервера, не проверяют пользовательский ввод и не ведут прямой журнал в консоль; они делегируют эти задачи сервисам.
Для более подробного обсуждения смотрите Введение в сервисы и DI.
Маршрутизация¶
Ng-модуль Angular Router предоставляет сервис, который позволяет вам определить путь навигации между различными состояниями приложения и иерархиями представлений в вашем приложении. Он создан по образцу привычных навигационных соглашений браузера:
- Введите URL в адресную строку, и браузер перейдет на соответствующую страницу.
- Щелкните по ссылкам на странице, и браузер перейдет на новую страницу.
- Нажмите на кнопки браузера "назад" и "вперед", и браузер перейдет назад и вперед по истории просмотренных страниц.
Маршрутизатор сопоставляет URL-подобные пути с представлениями, а не со страницами. Когда пользователь выполняет действие, например, нажимает на ссылку, которая загружает новую страницу в браузере, маршрутизатор перехватывает поведение браузера и показывает или скрывает иерархии представлений.
Если маршрутизатор определяет, что текущее состояние приложения требует определенной функциональности, а модуль, определяющий ее, не был загружен, маршрутизатор может лениво загрузить модуль по требованию.
Маршрутизатор интерпретирует URL ссылки в соответствии с правилами навигации по представлениям и состоянием данных вашего приложения. Вы можете переходить к новым представлениям, когда пользователь нажимает на кнопку или выбирает из выпадающего списка, или в ответ на другой стимул из любого источника.
Маршрутизатор регистрирует действия в истории браузера, поэтому кнопки "назад" и "вперед" также работают.
Чтобы определить правила навигации, вы связываете навигационные пути с вашими компонентами. Путь использует URL-подобный синтаксис, который объединяет данные вашей программы, точно так же, как синтаксис шаблона объединяет ваши представления с данными вашей программы. Затем вы можете применить программную логику, чтобы выбрать, какие представления показывать или скрывать, в ответ на ввод пользователя и ваши собственные правила доступа.
Более подробное обсуждение см. в разделе Маршрутизация и навигация.
Что дальше¶
Вы узнали основы основных строительных блоков приложения Angular. Следующая диаграмма показывает, как эти основные части связаны между собой.
-
Вместе компонент и шаблон определяют представление Angular.
- Декоратор на классе компонента добавляет метаданные, включая указатель на связанный шаблон.
- Директивы и разметка привязки в шаблоне компонента изменяют представления на основе данных и логики программы.
-
Инжектор зависимостей предоставляет услуги компоненту, например, услугу маршрутизатора, которая позволяет определить навигацию между представлениями.
Каждая из этих тем представлена более подробно на следующих страницах.
Когда вы знакомы с этими фундаментальными строительными блоками, вы можете изучить их более подробно в документации. Чтобы узнать о других инструментах и методах, которые помогут вам создавать и развертывать приложения Angular, смотрите Следующие шаги: инструменты и методы.