Глоссарий

16.02.2023

Angular имеет свой собственный словарь. Большинство терминов Angular — это обычные английские слова или вычислительные термины, которые имеют специфическое значение в системе Angular.

В этом глоссарии перечислены наиболее известные термины и несколько менее знакомых терминов с необычными или неожиданными определениями.

Компиляция с опережением времени (AOT)

Компилятор Angular ahead-of-time (AOT) преобразует код Angular HTML и TypeScript в эффективный код JavaScript на этапе сборки. Фаза сборки происходит до того, как браузер загрузит и запустит отрендеренный код. Это лучший режим компиляции для производственных сред, с уменьшенным временем загрузки и увеличенной производительностью по сравнению с just-in-time (JIT) compilation.

Компилируя приложение с помощью инструмента командной строки ngc, вы можете загружать его непосредственно в фабрику модулей, поэтому вам не нужно включать компилятор Angular в свой пакет JavaScript.

Элемент Angular

Angular компонент, упакованный как пользовательский элемент.

Подробнее в Обзоре элементов Angular.

Формат пакета Angular (APF)

Спецификация оформления пакетов npm, специфичная для Angular, которая используется всеми сторонними пакетами Angular и большинством сторонних библиотек Angular.

Подробнее в спецификации формата пакетов Angular.

Аннотация

Структура, предоставляющая метаданные для класса. Подробнее см. в разделе декоратор.

app-shell

Оболочка приложения — это способ визуализации части вашего приложения с помощью маршрута во время сборки. Это позволяет пользователям получить первый значимый образ вашего приложения, который быстро отображается, поскольку браузер может отображать статические HTML и CSS без необходимости инициализации JavaScript. Чтобы узнать больше, смотрите The App Shell Model.

Вы можете использовать Angular CLI для генерации оболочки приложения. Это может улучшить пользовательский опыт, быстро запустив статическую визуализированную страницу, пока браузер загружает полную версию клиента и автоматически переключается на нее после загрузки кода.

Статическая визуализированная страница — это скелет, общий для всех страниц.

Чтобы узнать больше, смотрите Service Worker и PWA.

Architect

Инструмент, который Angular CLI использует для выполнения сложных задач, таких как компиляция и запуск тестов, в соответствии с заданной конфигурацией. Architect — это оболочка, которая запускает builder с заданной целевой конфигурацией.

Builder определен в npm-пакете.

В файле конфигурации рабочего пространства секция "architect" предоставляет параметры конфигурации для строителей Architect.

Например, встроенный билдер для линтинга определен в пакете @angular-devkit/build_angular:tslint, который использует инструмент TSLint для выполнения линтинга, с конфигурацией, указанной в файле tslint.json.

Используйте команду ng run Angular CLI для вызова конструктора, указав целевую конфигурацию, связанную с этим конструктором. Интеграторы могут добавлять конструкторы, чтобы обеспечить запуск инструментов и рабочих процессов через Angular CLI.

Например, пользовательский билдер может заменить сторонние инструменты, используемые встроенными реализациями команд Angular CLI, такими как ng build или ng test.

Директива атрибута

Категория директив, которая может слушать и изменять поведение других элементов HTML, атрибутов, свойств и компонентов. Обычно они представлены как атрибуты HTML, отсюда и название.

Подробнее в разделе Директивы атрибутов.

Биндинг (связывание)

Как правило, практика установки переменной или свойства на значение данных. В Angular обычно относится к data binding, которая координирует свойства DOM-объектов со свойствами объектов данных.

Иногда относится к привязке dependency-injection между token и provider.

bootstrap

Способ инициализации и запуска приложения или системы.

В Angular корневой Ng-модуль приложения AppModule имеет свойство bootstrap, которое определяет [компоненты] верхнего уровня AioGuideGlossaryComponent приложения. Во время процесса bootstrap Angular создает и вставляет эти компоненты в главную веб-страницу index.html.

Вы можете загружать несколько приложений в один и тот же index.html.

Каждое приложение содержит свои собственные компоненты.

Узнайте больше в Bootstrapping.

builder

Функция, использующая API Architect для выполнения сложного процесса, такого как build или test. Код билдера определяется в npm-пакете.

Например, BrowserBuilder запускает сборку webpack для цели браузера и KarmaBuilder запускает сервер Karma и запускает сборку webpack для юнит-тестов.

Команда ng run Angular CLI вызывает билдер с определенной целевой конфигурацией. Файл workspace configuration, angular.json, содержит конфигурации по умолчанию для встроенных конструкторов.

Типы регистров

Angular использует соглашения о капитализации для различения имен различных типов, как описано в разделе naming guidelines руководства по стилю. Ниже приводится краткое описание типов регистров:

	Подробности	пример
camelCase	Символы, свойства, методы, имена пайпов, некомпонентные селекторы директив, константы. Стандартный или нижний верблюжий регистр использует строчную букву в первой букве элемента.	selectedHero
UpperCamelCase PascalCase	Имена классов, включая классы, определяющие компоненты, интерфейсы, NgModules, директивы и пайпы. В верхнем верблюжьем регистре используется верхний регистр первой буквы элемента.	HeroComponent
dash-case kebab-case	Описательная часть имен файлов, селекторов компонентов.	app-hero-list
underscore_case snake_case	Обычно не используется в Angular. В змеином регистре используются слова, соединенные подчеркиванием.	convert_link_mode
UPPER_UNDERSCORE_CASE UPPER_SNAKE_CASE SCREAMING_SNAKE_CASE	Традиционно для констант. Этот регистр допустим, но предпочтительнее использовать camelCase. Верхний змеиный регистр использует слова, написанные всеми прописными буквами, соединенными с подчеркиванием.	FIX_ME

Обнаружение изменений

Механизм, с помощью которого фреймворк Angular синхронизирует состояние пользовательского интерфейса приложения с состоянием данных. Детектор изменений проверяет текущее состояние модели данных при каждом запуске и сохраняет его как предыдущее состояние для сравнения на следующей итерации.

Когда логика приложения обновляет данные компонента, значения, привязанные к свойствам DOM в представлении, могут измениться. Детектор изменений отвечает за обновление представления, чтобы отразить текущую модель данных.

Аналогичным образом, пользователь может взаимодействовать с пользовательским интерфейсом, вызывая события, которые изменяют состояние модели данных.

Эти события могут вызвать обнаружение изменений.

Используя стратегию обнаружения изменений по умолчанию, детектор изменений проходит через иерархию view hierarchy на каждом повороте VM, чтобы проверить каждое data-bound property в шаблоне. На первом этапе он сравнивает текущее состояние зависимых данных с предыдущим состоянием и собирает изменения.

На втором этапе он обновляет DOM страницы, чтобы отразить все новые значения данных.

Если вы установили стратегию обнаружения изменений OnPush, детектор изменений запускается только при явном вызове, или когда он запускается изменением ссылки Input или обработчиком события. Это обычно повышает производительность. Чтобы узнать больше, смотрите Оптимизация обнаружения изменений в Angular.

Декоратор класса

Декоратор decorator, который появляется непосредственно перед определением класса, объявляет класс заданным типом и предоставляет метаданные, соответствующие типу.

Следующие декораторы могут объявлять типы классов Angular.

• @Component()
• @Directive()
• @Pipe()
• @Injectable()
• @NgModule()

Декоратор поля класса

Утверждение decorator непосредственно перед полем в определении класса, которое объявляет тип этого поля. Примерами являются @Input и @Output.

Коллекция

В Angular набор связанных схем, собранных в npm-пакет.

Интерфейс командной строки (CLI)

Angular CLI — это инструмент командной строки для управления циклом разработки Angular. Используйте его для создания начальной файловой системы для рабочего пространства или проекта, а также для запуска схем, которые добавляют и изменяют код для начальных общих версий различных элементов.

Angular CLI поддерживает все этапы цикла разработки, включая сборку, тестирование, комплектацию и развертывание.

• Чтобы начать использовать Angular CLI для нового проекта, смотрите Настройка локальной среды.
• Чтобы узнать больше о всех возможностях Angular CLI, смотрите Справочник команд Angular CLI.

См. также Schematics CLI.

Компонент

Класс с @Component() декоратором, который связывает его с сопутствующим шаблоном. Вместе класс компонента и шаблон определяют представление.

Компонент — это особый тип директивы.

Декоратор @Component() расширяет декоратор @Directive() функциями, ориентированными на шаблон.

Класс компонента Angular отвечает за раскрытие данных и обработку большей части логики отображения и взаимодействия с пользователем в представлении посредством привязки данных.

Подробнее о классах компонентов, шаблонах и представлениях читайте в Введение в концепции Angular.

Конфигурация

См. Конфигурация рабочего пространства.

Проекция контента

Способ вставки содержимого DOM извне компонента в представление компонента в определенном месте.

Чтобы узнать больше, смотрите Реагирование на изменения содержимого.

Пользовательский элемент

Функция веб-платформы, в настоящее время поддерживаемая большинством браузеров и доступная в других браузерах через полифиллы. См. раздел Поддержка браузеров.

Функция пользовательского элемента расширяет HTML, позволяя вам определить тег, содержимое которого создается и контролируется кодом JavaScript. Пользовательский элемент распознается браузером, когда он добавлен в CustomElementRegistry.

Пользовательский элемент также называют веб-компонентом.

Вы можете использовать API для преобразования компонента Angular таким образом, чтобы его можно было зарегистрировать в браузере и использовать в любом HTML, который вы добавляете непосредственно в DOM в приложении Angular. Тег пользовательского элемента вставляет представление компонента с функциями обнаружения изменений и привязки данных в контент, который иначе отображался бы без обработки Angular. См. элемент Angular.

См. также динамическая загрузка компонентов.

Привязка данных

Процесс, позволяющий приложениям отображать значения данных для пользователя и реагировать на его действия. Действия пользователя включают щелчки, прикосновения, нажатия клавиш и так далее.

При связывании данных вы объявляете связь между HTML-виджетом и источником данных и позволяете фреймворку обрабатывать детали. Связывание данных — это альтернатива ручному вводу значений данных приложения в HTML, подключению слушателей событий, извлечению измененных значений с экрана и обновлению значений данных приложения.

Прочитайте о следующих формах привязки данных Синтаксис шаблона в Angular:

• Интерполяция
• Привязка свойств
• Привязка событий
• Привязка атрибутов
• Связывание классов и стилей
• Двустороннее связывание данных с ngModel

Декларируемый

Класс, который можно добавить в список declarations модуля NgModule. Вы можете объявлять компоненты, директивы и пайпы, если в их декораторах флаг standalone установлен в true, что делает их автономными. Примечание: автономные компоненты/директивы/пайпы не являются не декларируемыми. Более подробную информацию об автономных классах можно найти ниже.

Не объявляйте следующее:

• Класс, уже объявленный как standalone.

• Класс, который уже объявлен в другом модуле NgModule.

• Массив директив, импортированных из другого пакета.

  Например, не объявляйте FORMS_DIRECTIVES из @angular/forms.

• Классы NgModule.

• Классы сервисов.

• Неангулярные классы и объекты, такие как строки, числа, функции, модели сущностей, конфигурации, бизнес-логика и вспомогательные классы.

Обратите внимание, что декларируемые компоненты также могут быть объявлены как автономные и просто импортированы в другие автономные компоненты или существующие NgModules, чтобы узнать больше, смотрите руководство Автономные компоненты.

Декоратор

Функция, изменяющая определение класса или свойства. Декораторы являются экспериментальной (стадия 3) функцией языка JavaScript.

Декоратор также называют аннотацией.

TypeScript добавляет поддержку декораторов.

Angular определяет декораторы, которые прикрепляют метаданные к классам или свойствам, чтобы он знал, что эти классы или свойства означают и как они должны работать.

Чтобы узнать больше, смотрите декоратор класса. См. также декоратор поля класса.

Внедрение зависимостей (DI)

Шаблон проектирования и механизм для создания и доставки одних частей приложения (зависимостей) к другим частям приложения, которым они необходимы.

В Angular зависимостями обычно являются сервисы, но они также могут быть значениями, например, строками или функциями. Инжектор injector для приложения (созданный автоматически во время загрузки) инстанцирует зависимости, когда это необходимо, используя настроенный provider сервиса или значения.

Узнайте больше в Dependency Injection in Angular.

DI токен

Маркер поиска, связанный с провайдером зависимостей, для использования в системе инъекции зависимостей.

Директива

Класс, который может изменять структуру DOM или модифицировать атрибуты в DOM и модели данных компонента. Определению класса-директивы непосредственно предшествует @Directive() декоратор, который предоставляет метаданные.

Класс директивы обычно связан с элементом или атрибутом HTML, и этот элемент или атрибут часто называют самой директивой. Когда Angular находит директиву в HTML template, он создает соответствующий экземпляр класса директивы и передает ему контроль над этой частью DOM браузера.

В Angular есть три категории директив:

• Компоненты используют @Component() для связывания шаблона с классом.

  @Component() является расширением @Directive().

• Директивы атрибутов изменяют поведение и внешний вид элементов страницы.

• Структурные директивы изменяют структуру DOM.

Angular предоставляет ряд встроенных директив, которые начинаются с префикса ng. Вы также можете создавать новые директивы для реализации собственной функциональности. Вы связываете селектор с пользовательской директивой; это расширяет синтаксис шаблона, который вы можете использовать в своих приложениях.

Селектор — это HTML-тег, такой как <my-directive>.

UpperCamelCase, например NgIf, относится к классу директив. Вы можете использовать UpperCamelCase при описании свойств и поведения директивы.

lowerCamelCase, например ngIf, относится к имени атрибута директивы. Вы можете использовать lowerCamelCase при описании применения директивы к элементу в шаблоне HTML.

Язык, специфичный для домена (DSL)

Библиотека специального назначения или API. Чтобы узнать больше, смотрите Доменно-специфический язык.

Angular расширяет TypeScript специфическими языками для ряда областей, имеющих отношение к приложениям Angular и определенных в NgModules, таких как анимации, формы и маршрутизация и навигация.

Динамическая загрузка компонентов

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

См. также custom element, который обеспечивает более простой путь с тем же результатом.

Нетерпеливая загрузка

Ng-модули или компоненты, которые загружаются при запуске, называются eager-loaded, чтобы отличить их от тех, которые загружаются во время выполнения и называются lazy-loaded. См. также ленивая загрузка.

ECMAScript

официальная спецификация языка JavaScript.

Не все браузеры поддерживают последнюю версию стандарта ECMAScript, но вы можете использовать transpiler для написания кода с использованием последних возможностей, который затем будет транспилирован в код, работающий на версиях, поддерживаемых браузерами. Примером transpiler является TypeScript.

Чтобы узнать больше, см. раздел Поддержка браузеров.

Элемент

Angular определяет класс ElementRef для обертывания специфичных для рендеринга элементов пользовательского интерфейса. В большинстве случаев это позволяет вам использовать шаблоны Angular и привязку данных для доступа к элементам DOM без ссылки на собственный элемент.

В документации обычно говорится об элементах в отличие от элементов DOM. Элементы являются экземплярами класса ElementRef.

К DOM-элементам при необходимости можно обращаться напрямую.

Чтобы узнать больше, смотрите также пользовательский элемент.

Точка входа

Модуль JavaScript, который предназначен для импорта пользователем npm-пакета. Модуль точки входа обычно реэкспортирует символы из других внутренних модулей. Пакет может содержать несколько точек входа.

Например, пакет @angular/core имеет два модуля точек входа, которые можно импортировать, используя имена модулей @angular/core и @angular/core/testing.

Элемент управления формой

Экземпляр FormControl, который является фундаментальным строительным блоком для форм Angular. Вместе с FormGroup и FormArray отслеживает значение, валидацию и статус элемента ввода формы.

Подробнее о формах читайте в Введение в формы в Angular.

Модель формы

"Источник истины" для значения и статуса валидации элемента ввода формы в определенный момент времени. При использовании реактивных форм модель формы создается явно в классе компонента.

При использовании template-driven forms модель формы создается неявно с помощью директив.

Узнайте больше о реактивных и управляемых шаблонами формах в разделе Введение в формы в Angular.

Валидация формы

Проверка, которая выполняется при изменении значений формы и сообщает, являются ли данные значения правильными и полными в соответствии с заданными ограничениями. Реактивные формы применяют функции валидатора. Формы, управляемые шаблонами, используют директивы валидатора.

Чтобы узнать больше, смотрите Form Validation.

Неизменяемость

Невозможность изменить состояние значения после его создания. Реактивные формы выполняют неизменяемые изменения, поскольку каждое изменение модели данных создает новую модель данных, а не изменяет существующую.

Шаблонные формы выполняют изменяемые изменения с помощью NgModel и двустороннего связывания данных для модификации существующей модели данных на месте.

injectable

Класс Angular или другое определение, которое предоставляет зависимость с помощью механизма dependency injection. Инжектируемый сервис класс должен быть помечен @Injectable() декоратором.

Другие элементы, такие как постоянные значения, также могут быть инжектируемыми.

Инжектор

Объект в системе Angular dependency-injection, который может найти именованную зависимость в своем кэше или создать зависимость с помощью настроенного provider. Инжекторы создаются для NgModules автоматически как часть процесса загрузки и наследуются через иерархию компонентов.

• Инжектор предоставляет единичный экземпляр зависимости и может внедрять этот экземпляр в несколько компонентов.
• Иерархия инжекторов на уровне NgModule и компонентов может предоставлять различные экземпляры зависимости своим собственным компонентам и дочерним компонентам.
• Вы можете настроить инжекторы с различными провайдерами, которые могут предоставлять различные реализации одной и той же зависимости.

Подробнее об иерархии инжекторов в Hierarchical Dependency Injectors.

Input

При определении директивы декоратор @Input() на свойстве директивы делает это свойство доступным в качестве цели связывания свойств. Значения данных поступают в свойство input из источника данных, указанного в выражении шаблона справа от знака равенства.

Для получения дополнительной информации см. раздел @Input() и @Output() функции декоратора.

Интерполяция

Форма свойства связывание данных, в которой шаблонное выражение между двойными фигурными скобками отображается как текст. Этот текст может быть конкатенирован с соседним текстом, прежде чем он будет присвоен свойству элемента или отображен между тегами элемента, как в этом примере.

<label>My current hero is {{hero.name}}</label>

Подробнее читайте в руководстве Интерполяция.

Ivy

Ivy — это историческое кодовое название текущего конвейера компиляции и рендеринга в Angular. Сейчас это единственный поддерживаемый движок, поэтому во всем используется Ivy.

JavaScript

Чтобы узнать больше, смотрите ECMAScript. Чтобы узнать больше, смотрите также TypeScript.

Компиляция точно в срок (JIT)

Компилятор Angular just-in-time (JIT) преобразует ваш код Angular HTML и TypeScript в эффективный код JavaScript во время выполнения, как часть начальной загрузки.

JIT-компиляция используется по умолчанию (в отличие от AOT-компиляции), когда вы запускаете команды ng build и ng serve Angular CLI, и является хорошим выбором во время разработки. Режим JIT настоятельно не рекомендуется для использования в производстве, поскольку он приводит к большим полезным нагрузкам приложения, которые мешают производительности загрузки.

Сравните с опережающей компиляцией (AOT).

Ленивая загрузка

Процесс, ускоряющий время загрузки приложения путем разбиения приложения на несколько пакетов и загрузки их по требованию. Например, зависимости могут быть лениво загружены по мере необходимости.

Этот пример отличается от eager-loaded модулей, которые требуются корневому модулю и загружаются при запуске.

Маршрутизатор router использует ленивую загрузку для загрузки дочерних представлений только при активации родительского представления. Аналогичным образом можно создать пользовательские элементы, которые будут загружаться в приложение Angular по мере необходимости.

Библиотека

В Angular проект, предоставляющий функциональность, которая может быть включена в другие приложения Angular. Библиотека не является полноценным приложением Angular и не может работать самостоятельно.

Чтобы добавить повторно используемую функциональность Angular в не-Angular веб-приложения, используйте пользовательские элементы Angular.

• Разработчики библиотек могут использовать Angular CLI для генерирования строительных лесов для новой библиотеки в существующем рабочем пространстве, и могут опубликовать библиотеку как npm пакет.
• Разработчики приложений могут использовать Angular CLI для добавления опубликованной библиотеки для использования с приложением в том же workspace.

См. также схема.

Хуки жизненного цикла

Интерфейс, позволяющий подключаться к жизненному циклу директив и компонентов по мере их создания, обновления и уничтожения.

Каждый интерфейс имеет единственный метод hook, имя которого — имя интерфейса с префиксом ng. Например, интерфейс OnInit имеет хук-метод с именем ngOnInit.

Angular запускает эти хук-методы в следующем порядке:

	Метод хука	Подробности
1	ngOnChanges	Когда изменяется значение привязки input или output.
2	ngOnInit	После первого ngOnChanges.
3	ngDoCheck	Пользовательское обнаружение изменений разработчика.
4	ngAfterContentInit	После инициализации содержимого компонента.
5	ngAfterContentChecked	После каждой проверки содержимого компонента.
6	ngAfterViewInit	После инициализации представлений компонента.
7	ngAfterViewChecked	После каждой проверки представлений компонента.
8	ngOnDestroy	Непосредственно перед уничтожением директивы.

Чтобы узнать больше, смотрите Lifecycle Hooks.

Модуль

В общем случае модуль представляет собой блок кода, предназначенный для одной цели. Angular использует стандартные модули JavaScript, а также определяет модуль Angular, NgModule.

В JavaScript, или ECMAScript, каждый файл является модулем, и все объекты, определенные в файле, принадлежат этому модулю. Объекты можно экспортировать, делая их общедоступными, а общедоступные объекты можно импортировать для использования другими модулями.

Angular поставляется в виде коллекции модулей JavaScript. Коллекция модулей JavaScript также называется библиотекой.

Имя каждой библиотеки Angular начинается с префикса @angular.

Установите библиотеки Angular с помощью npm package manager и импортируйте их части с помощью деклараций JavaScript import.

Сравните с NgModule.

NgModule

Определение класса, которому предшествует @NgModule() декоратор, который объявляет и служит манифестом для блока кода, предназначенного для домена приложения, рабочего процесса или тесно связанного набора возможностей.

Подобно JavaScript-модулю, NgModule может экспортировать функциональность для использования другими NgModules и импортировать публичную функциональность из других NgModules. В метаданных класса NgModule собраны компоненты, директивы и пайпы, которые использует приложение, а также список импорта и экспорта. См. также declarable.

NgModules обычно называются по имени файла, в котором определена экспортируемая вещь. Например, класс Angular DatePipe принадлежит функциональному модулю с именем date_pipe в файле date_pipe.ts.

Вы импортируете их из скопированного пакета Angular, например @angular/core.

Каждое приложение Angular имеет корневой модуль. По соглашению, класс называется AppModule и находится в файле app.module.ts.

Чтобы узнать больше, смотрите NgModules.

npm package

Менеджер пакетов npm используется для распространения и загрузки модулей и библиотек Angular.

Узнайте больше о том, как Angular использует Npm-пакеты.

ngc

ngc — это транспилятор с Typescript на Javascript, который обрабатывает декораторы, метаданные и шаблоны Angular и выдает код JavaScript. Самая последняя реализация имеет внутреннее название ngtsc, поскольку это минималистичная обертка вокруг компилятора TypeScript tsc, которая добавляет преобразование для обработки кода Angular.

observable

Производитель множества значений, которые он передает подписчикам. Используется для асинхронной обработки событий во всем Angular.

Вы запускаете наблюдаемую, подписываясь на нее с помощью метода subscribe(), передавая обратные вызовы для уведомлений о новых значениях, ошибках или завершении.

Наблюдаемые могут передавать подписчикам одно значение или несколько значений любого типа одним из следующих способов.

• Синхронно как функция доставляет значение запрашивающему.
• По расписанию

Подписчик получает уведомление о новых значениях по мере их создания и уведомление о нормальном завершении или ошибке.

Angular использует стороннюю библиотеку под названием Reactive Extensions (RxJS). Чтобы узнать больше, смотрите Observables.

Наблюдатель

Объект, передаваемый в метод subscribe() для observable. Объект определяет обратные вызовы для subscriber.

Output

При определении директивы декоратор @Output{} на свойстве директивы делает это свойство доступным в качестве цели привязки событий. События выходят из этого свойства в приемник, указанный в выражении шаблона справа от знака равенства.

Чтобы узнать больше, смотрите функции декораторов @Input() и @Output().

Пайпы

Класс, которому предшествует декоратор @Pipe{} и который определяет функцию, преобразующую входные значения в выходные для отображения в view. Angular определяет различные пайпы, и вы можете определить новые пайпы.

Чтобы узнать больше, смотрите Pipes.

Платформа

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

Поддержка различных платформ времени выполнения Angular обеспечивается пакетами @angular/platform-*. Эти пакеты позволяют приложениям, использующим @angular/core и @angular/common, работать в различных средах, предоставляя реализацию для сбора пользовательского ввода и рендеринга пользовательского интерфейса для данной платформы. Изоляция функциональности, специфичной для платформы, позволяет разработчику использовать остальную часть фреймворка независимо от платформы.

• При запуске в веб-браузере BrowserModule импортируется из пакета platform-browser и поддерживает сервисы, упрощающие безопасность и обработку событий, а также позволяет приложениям получать доступ к специфическим для браузера функциям, таким как интерпретация ввода с клавиатуры и управление заголовком отображаемого документа.

  Все приложения, работающие в браузере, используют одну и ту же службу платформы.

• При использовании server-side rendering (SSR) пакет platform-server предоставляет веб-серверные реализации DOM, XMLHttpRequest и других низкоуровневых функций, которые не зависят от браузера.

polyfill

Пакет npm, который заполняет пробелы в JavaScript реализации браузера. Полифиллы, поддерживающие определенную функциональность для конкретных платформ, см. в разделе Поддержка браузеров.

Проект

В Angular CLI — автономное приложение или библиотека, которое может быть создано или изменено командой Angular CLI.

Проект, создаваемый командой ng new, содержит набор исходных файлов, ресурсов и конфигурационных файлов, необходимых для разработки и тестирования приложения с помощью Angular CLI. Проекты также могут быть созданы с помощью команд ng generate application и ng generate library.

Для получения дополнительной информации смотрите Структура файла проекта.

Файл angular.json настраивает все проекты в workspace.

Провайдер

Объект, реализующий один из интерфейсов Provider. Объект провайдера определяет, как получить инжектируемую зависимость, связанную с DI-токеном.

Инжектор AioGuideGlossaryInjector использует провайдер для создания нового экземпляра зависимости для класса, которому она требуется.

Angular регистрирует свои собственные провайдеры в каждом инжекторе для сервисов, которые определяет Angular. Вы можете зарегистрировать собственные провайдеры для сервисов, которые нужны вашему приложению.

См. также service. См. также dependency injection.

Узнайте больше в Dependency Injection.

Реактивные формы

Фреймворк для создания форм Angular с помощью кода в компоненте. Альтернативой является template-driven form.

При использовании реактивных форм:

• "источник истины", модель формы, определяется в классе компонента.
• Валидация устанавливается с помощью функций валидации, а не директив валидации.
• Каждый элемент управления явно создается в классе компонента путем создания экземпляра FormControl вручную или с помощью FormBuilder.
• Шаблонные элементы ввода не используют ngModel.
• Связанные директивы Angular имеют префикс form, такие как formControl, formGroup и formControlName.

Альтернативой является форма, управляемая шаблоном. Для ознакомления и сравнения обоих подходов к формам смотрите Введение в Angular Forms.

resolver

Класс, реализующий интерфейс Resolve, который используется для создания или получения данных, необходимых для завершения навигации по запрошенному маршруту. Вместо интерфейса Resolve можно использовать функцию с той же сигнатурой, что и метод resolve().

Резольверы запускаются после выполнения и успешного завершения всех route guards для дерева маршрутов.

Смотрите пример использования resolve guard для получения динамических данных.

Гвард маршрута

Метод, контролирующий переход к запрашиваемому маршруту в приложении маршрутизации. Защиты определяют, можно ли активировать или деактивировать маршрут, и можно ли загрузить модуль с "ленивой" загрузкой.

Узнайте больше в руководстве Маршрутизация и навигация.

Маршрутизатор

Инструмент, который настраивает и реализует навигацию между состояниями и представлениями в приложении Angular.

Модуль Router — это NgModule, который предоставляет необходимые поставщики услуг и директивы для навигации по представлениям приложения. Компонент маршрутизации — это компонент, который импортирует модуль Router и чей шаблон содержит элемент RouterOutlet, где он может отображать представления, созданные маршрутизатором.

Маршрутизатор определяет навигацию между представлениями на одной странице, в отличие от навигации между страницами. Он интерпретирует URL-подобные ссылки, чтобы определить, какие представления создавать или уничтожать, и какие компоненты загружать или выгружать.

Это позволяет использовать преимущества ленивой загрузки в ваших приложениях Angular.

Чтобы узнать больше, смотрите раздел Маршрутизация и навигация.

Аутлет маршрутизатора

Директива directive, которая действует как заполнитель в шаблоне компонента маршрутизации. Angular динамически отображает шаблон в зависимости от текущего состояния маршрутизатора.

Компонент маршрутизации

Angular component с директивой RouterOutlet в шаблоне, который отображает представления на основе навигации по маршрутизатору.

Для получения дополнительной информации см. раздел Маршрутизация и навигация.

Правило

В схемах функция, которая работает с файловым деревом для создания, удаления или изменения файлов определенным образом.

schematic

Библиотека строительных лесов, которая определяет, как создать или преобразовать проект программирования путем создания, изменения, рефакторинга или перемещения файлов и кода. Схема определяет правила, которые работают с виртуальной файловой системой, обозначаемой как дерево.

В Angular CLI используются схемы для создания и изменения Angular проектов и частей проектов.

• Angular предоставляет набор схем для использования с Angular CLI. Смотрите Справочник команд Angular CLI.

  Команда ng add Angular CLI запускает схемы как часть добавления библиотеки в ваш проект.

  Команда ng generate Angular CLI запускает схемы для создания приложений, библиотек и конструкций кода Angular.

• Библиотека разработчики могут создавать схемы, которые позволяют Angular CLI добавлять и обновлять опубликованные ими библиотеки, а также генерировать артефакты, определяемые библиотекой.

  Добавьте эти схемы в пакет npm, который вы используете для публикации и обмена библиотекой.

Чтобы узнать больше, смотрите Схемы. Чтобы узнать больше, смотрите также Интеграция библиотек с CLI.

Schematics CLI

Schematics поставляется с собственным инструментом командной строки. Используйте Node 6.9 или выше для глобальной установки Schematics CLI.

npm install -g @angular-devkit/schematics-cli

Это устанавливает исполняемый файл schematics, который можно использовать для создания новой коллекции схем с начальным именем schematic. Каталог коллекции является рабочим пространством для схем. Вы также можете использовать команду schematics для добавления новой схемы в существующую коллекцию или расширения существующей схемы.

scoped package

Способ группировки связанных npm-пакетов. NgModules поставляются в составе scoped-пакетов, имена которых начинаются с имени Angular scope name @angular.

Например, @angular/core, @angular/common, @angular/forms и @angular/router.

Импортируйте скопированный пакет так же, как и обычный пакет.

import { Component } from '@angular/core';

Рендеринг на стороне сервера

Техника, которая генерирует статические страницы приложения на сервере и может генерировать и обслуживать эти страницы в ответ на запросы браузеров. Она также может предварительно генерировать страницы в виде HTML-файлов, которые вы будете обслуживать позже.

Эта техника может повысить производительность на мобильных и маломощных устройствах и улучшить пользовательский опыт за счет быстрого показа статической первой страницы, пока приложение на стороне клиента загружается. Статическая версия также может сделать ваше приложение более заметным для веб-краулеров.

Вы можете легко подготовить приложение к рендерингу на стороне сервера, используя Angular CLI для запуска инструмента Angular Universal, используя @nguniversal/express-engine schematic.

Сервис

В Angular класс с декоратором @Injectable(), который инкапсулирует логику, не относящуюся к пользовательскому интерфейсу, и код, который можно повторно использовать в приложении. Angular отличает компоненты от сервисов для повышения модульности и возможности повторного использования.

Метаданные @Injectable() позволяют использовать класс сервиса с помощью механизма dependency injection. Инжектируемый класс инстанцируется провайдером. Инжекторы ведут списки провайдеров и используют их для предоставления экземпляров сервисов, когда они требуются компонентам или другим сервисам.

Чтобы узнать больше, смотрите Введение в сервисы и инъекцию зависимостей.

Автономный

Конфигурация из компонентов, директив и пайпов, указывающая, что этот класс может быть импортирован напрямую без объявления его в каком-либо NgModule.

Автономные компоненты, директивы и пайпы отличаются от нестандартных тем, что:

• Поле standalone их декоратора имеет значение true.
• позволяет импортировать их напрямую без необходимости прохождения через NgModules.
• указывают свои зависимости непосредственно в декораторе.

Чтобы узнать больше, смотрите руководство Standalone components guide.

Структурная директива

Категория директив, которая отвечает за формирование HTML-макета путем модификации DOM. Модификация DOM включает в себя добавление, удаление или манипулирование элементами и связанными с ними дочерними элементами.

Чтобы узнать больше, смотрите Structural Directives.

Подписчик

Функция, определяющая, как получать или генерировать значения или сообщения для публикации. Эта функция выполняется, когда потребитель запускает метод subscribe() для observable.

Акт подписки на наблюдаемую запускает ее выполнение, связывает с ней обратные вызовы и создает объект Subscription, позволяющий отписаться от нее.

Метод subscribe() принимает объект JavaScript observer с тремя обратными вызовами, по одному для каждого типа уведомлений, которые может предоставить наблюдаемая.

• Уведомление next отправляет значение, такое как число, строка или объект.

• Уведомление error отправляет ошибку JavaScript или исключение.

• Уведомление complete не отправляет значение, но обработчик запускается, когда метод завершается.

  Запланированные значения могут продолжать возвращаться после завершения метода.

Цель

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

В файле angular.json каждый проект имеет секцию "architect", которая содержит цели, конфигурирующие билдеры. Некоторые из этих целей соответствуют командам Angular CLI, таким как build, serve, test и lint.

Например, конструктор Architect, вызываемый командой ng build для компиляции проекта, использует определенный инструмент сборки и имеет конфигурацию по умолчанию со значениями, которые можно изменить в командной строке. Цель build также определяет альтернативную конфигурацию для сборки "разработки", которую можно вызвать с помощью флага --configuration development в команде build.

Инструмент Architect предоставляет набор конструкторов. Команда ng new Angular CLI предоставляет набор целей для начального проекта приложения.

Команды ng generate application и ng generate library Angular CLI предоставляют набор целей для каждого нового project.

Эти цели, их параметры и конфигурации могут быть настроены в соответствии с потребностями вашего проекта.

Например, вы можете добавить конфигурацию "staging" или "testing" к цели "build" проекта.

Вы также можете определить пользовательский конструктор и добавить цель в конфигурацию проекта, которая использует ваш пользовательский конструктор. Затем вы можете запустить цель с помощью команды ng run Angular CLI.

Шаблон

Код, определяющий, как отображать view компонента.

Шаблон сочетает прямой HTML с синтаксисом Angular data-binding, directives и template expressions (логические конструкции). Элементы Angular вставляют или вычисляют значения, которые изменяют элементы HTML перед отображением страницы.

Подробнее о языке шаблонов Angular можно узнать в руководстве Синтаксис шаблонов.

Шаблон связан с классом компонента через @Component() декоратор. Код шаблона может быть предоставлен в виде строки, как значение свойства template, или в отдельном HTML файле, связанном через свойство templateUrl.

Дополнительные шаблоны, представленные объектами TemplateRef, могут определять альтернативные или вложенные представления, на которые можно ссылаться из нескольких компонентов.

Формы, управляемые шаблонами

Формат для построения форм Angular с использованием HTML-форм и элементов ввода в представлении. Альтернативный формат использует фреймворк reactive forms.

При использовании форм, управляемых шаблонами:

• "источником истины" является шаблон.

  Валидация определяется с помощью атрибутов отдельных элементов ввода.

• Двустороннее связывание с ngModel поддерживает синхронизацию модели компонента с вводом пользователем элементов ввода.

• За кулисами Angular создает новый элемент управления для каждого элемента ввода, если вы установили атрибут name и двустороннюю привязку для каждого ввода.

• Соответствующие директивы Angular имеют префикс ng, например ngForm, ngModel и ngModelGroup.

Альтернативой является реактивная форма. Для ознакомления и сравнения обоих подходов к формам смотрите Введение в Angular Forms.

Выражение шаблона

TypeScript-подобный синтаксис, который Angular оценивает внутри привязки данных.

Переменная ссылки на шаблон

Переменная, определенная в шаблоне, которая ссылается на экземпляр, связанный с элементом, таким как экземпляр директивы, экземпляр компонента, шаблон в TemplateRef или элемент DOM. После объявления переменной ссылки шаблона на элемент в шаблоне, вы можете получить доступ к значениям этой переменной в других местах того же шаблона.

В следующем примере определена переменная-ссылка шаблона с именем #phone.

<input #phone placeholder="phone number" />

Чтобы узнать больше, смотрите Шаблонная ссылочная переменная.

Входная переменная шаблона

Входная переменная шаблона — это переменная, на которую можно ссылаться в пределах одного экземпляра шаблона. Вы объявляете входную переменную шаблона с помощью ключевого слова let, как в примере let customer.

<tr *ngFor="let customer of customers;">
    <td>{{customer.customerNo}}</td>
    <td>{{customer.name}}</td>
    <td>{{customer.address}}</td>
    <td>{{customer.city}}</td>
    <td>{{customer.state}}</td>
    <button (click)="selectedCustomer=customer">
        Select
    </button>
</tr>

Читайте и узнавайте больше о входных переменных шаблона.

Токен

Непрозрачный идентификатор, используемый для эффективного поиска в таблице. В Angular DI-токен используется для поиска поставщиков зависимостей в системе внедрения зависимостей.

transpile

Процесс перевода, преобразующий одну версию JavaScript в другую; например, понижение уровня ES2015 до более старой версии ES5.

Дерево

В схематике виртуальная файловая система, представленная классом Tree. Схематические правила принимают на вход объект дерева, производят над ним операции и возвращают новый объект дерева.

TypeScript

Язык программирования, основанный на JavaScript и отличающийся необязательной системой типизации. TypeScript обеспечивает проверку типов во время компиляции и мощную инструментальную поддержку.

Проверка типов и инструментальная поддержка включают завершение кода, рефакторинг, встроенную документацию и интеллектуальный поиск.

Многие редакторы кода и среды разработки поддерживают TypeScript либо нативно, либо с помощью подключаемых модулей.

TypeScript является предпочтительным языком для разработки Angular. Чтобы узнать больше о TypeScript, смотрите typescriptlang.org.

Конфигурационный файл TypeScript

Файл определяет корневые файлы и параметры компилятора, необходимые для компиляции проекта TypeScript. Чтобы узнать больше, смотрите Конфигурация TypeScript.

Однонаправленный поток данных

Модель потока данных, в которой дерево компонентов всегда проверяется на изменения в одном направлении от родителя к ребенку, что предотвращает циклы в графе обнаружения изменений.

На практике это означает, что данные в Angular при обнаружении изменений текут вниз. Родительский компонент может легко изменить значения в своих дочерних компонентах, поскольку родительский компонент проверяется первым.

Однако может произойти сбой, если дочерний компонент попытается изменить значение в своем родителе во время обнаружения изменений (инвертируя ожидаемый поток данных), потому что родительский компонент уже был отрисован.

В режиме разработки Angular выбрасывает ошибку ExpressionChangedAfterItHasBeenCheckedError, если ваше приложение пытается это сделать, вместо того, чтобы молча вывести новое значение.

Чтобы избежать этой ошибки, метод lifecycle hook, который пытается сделать такое изменение, должен запускать новый прогон обнаружения изменений. Новый запуск следует в том же направлении, что и предыдущий, но успешно обнаруживает новое значение.

Универсальный

Инструмент для реализации рендеринга на стороне сервера приложения Angular. При интеграции с приложением Universal генерирует и обслуживает статические страницы на сервере в ответ на запросы браузеров. Первоначальная статическая страница служит в качестве быстро загружаемого заполнителя, пока все приложение готовится к нормальному выполнению в браузере.

Чтобы узнать больше, смотрите Angular Universal: рендеринг на стороне сервера.

Представление

Наименьшая группа элементов отображения, которые могут создаваться и уничтожаться вместе. Angular рендерит представление под управлением одной или нескольких директив.

Класс component и связанный с ним template определяют представление. Представление конкретно представлено экземпляром ViewRef, связанным с компонентом.

Представление, принадлежащее непосредственно компоненту, называется хост-представлением.

Представления обычно собираются в иерархии представлений.

Свойства элементов в представлении могут изменяться динамически, в ответ на действия пользователя; структура (количество и порядок) элементов в представлении не может. Вы можете изменить структуру элементов, вставляя, перемещая или удаляя вложенные представления в их контейнерах представления.

Иерархии представлений могут загружаться и выгружаться динамически по мере навигации пользователя по приложению, обычно под управлением маршрутизатора.

View Engine

Предыдущий конвейер компиляции и рендеринга, использовавшийся в Angular. С тех пор он был заменен Ivy и больше не используется.

View Engine был устаревшим в версии 9 и удален в версии 13.

Иерархия представлений

Дерево связанных представлений, с которыми можно работать как с единым целым. Корневое представление упоминается как хост-представление компонента.

Хостовое представление является корнем дерева вложенных представлений, собранных в контейнере представления ViewContainerRef, прикрепленном к элементу якоря в хостовом компоненте.

Иерархия представлений является ключевой частью Angular обнаружения изменений.

Иерархия представлений не подразумевает иерархию компонентов. Представления, встроенные в контекст определенной иерархии, могут быть хост-представлениями других компонентов.

Эти компоненты могут находиться в том же NgModule, что и размещающий компонент, или принадлежать другим NgModules.

Веб-компонент

См. пользовательский элемент.

Рабочее пространство

Набор Angular проектов (то есть приложений и библиотек), работающих с Angular CLI, которые обычно располагаются в одном репозитории контроля исходных текстов (например, git).

Команда ng new Angular CLI создает каталог файловой системы (корень рабочего пространства). В корне рабочего пространства она также создает конфигурационный файл (angular.json) и, по умолчанию, начальный проект приложения с тем же именем.

Команды, которые создают или работают с приложениями и библиотеками (такие как add и generate) должны выполняться из каталога рабочего пространства. Чтобы узнать больше, смотрите Конфигурация рабочего пространства.

Конфигурация рабочего пространства

Файл с именем angular.json на корневом уровне Angular workspace предоставляет настройки по умолчанию для всего рабочего пространства и конкретного проекта для инструментов сборки и разработки, которые предоставляются Angular CLI или интегрированы с ним. Чтобы узнать больше, смотрите Конфигурация рабочего пространства.

Дополнительные файлы конфигурации, специфичные для проекта, используются инструментами, например package.json для npm package manager, tsconfig.json для TypeScript transpilation и tslint.json для TSLint. Для получения дополнительной информации см. раздел Структура файлов рабочего пространства и проекта.

Зона

Контекст выполнения для набора асинхронных задач. Полезен для отладки, профилирования и тестирования приложений, включающих асинхронные операции, такие как обработка событий, обещания и запуски на удаленные серверы.

Приложение Angular работает в зоне, где оно может реагировать на асинхронные события, проверяя изменения данных и обновляя отображаемую информацию путем разрешения привязок данных.

Клиент зоны может выполнять действия до и после завершения асинхронной операции.

Узнайте больше о зонах из этого видео Brian Ford.

Ссылки

• Glossary

Комментарии