Глоссарий

TypeScript

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

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

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

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Компиляция Ahead-of-time (AOT)

Вы можете скомпилировать приложения Angular во время сборки. Скомпилировав ваше приложение с помощью компилятора-cli, ngc, вы можете напрямую запустить фабрику модуля, а это значит, что вам не нужно включать компилятор Angular в ваш JavaScript-сборник. Приложения, скомпилированные Ahead-of-time, также получают уменьшение времени загрузки и увеличение производительности.

Модуль Angular

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

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

Подробности и примеры см. на странице Модули Angular (NgModule).

Аннотация

На практике, синоним для Декоратора.

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

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

Например, вы можете использовать директиву ngClass для добавления и удаления имен CSS-классов.

Узнайте об них в руководстве Директивы атрибутов.

Бэрел

Способ roll up exports из нескольких модулей ES2015 в один удобный модуль ES2015. Сам бэрел — это файл модуля ES2015, который повторно экспортирует выбранные экспорты других модулей ES2015.

Например, представьте три модуля ES2015 в папке heroes:

// heroes/hero.component.ts
export class HeroComponent {}

// heroes/hero.model.ts
export class Hero {}

// heroes/hero.service.ts
export class HeroService {}

Без бэрела потребителю нужны три инструкции import:

import { HeroComponent } from '../heroes/hero.component.ts';
import { Hero }          from '../heroes/hero.model.ts';
import { HeroService }   from '../heroes/hero.service.ts';

Вы можете добавить бэрел в папку heroes (называемую index, по соглашению), который экспортирует все эти элементы:

export * from './hero.model.ts';   // re-export all of its exports
export * from './hero.service.ts'; // re-export all of its exports
export { HeroComponent } from './hero.component.ts'; // re-export the named thing

Теперь потребитель может импортировать то, что ему нужно, из бэрела.

import { Hero, HeroService } from '../heroes'; // index is implied

У каждого из scoped пакетов Angular есть бэрел с именем index.

Часто можно добиться того же результата, используя модули Angular вместо этого.

Связывание

Обычно относится к связыванию данных и действию связывания свойства HTML-объекта со свойством объекта данных.

Иногда относится к введению зависимостей связыванию между «маркером» — также известным как «ключ» — и поставщиком зависимости provider. При использовании этого более редкого случая, будьте ясны в контексте.

Bootstrap

Вы запускаете приложение Angular, «запуская» его с помощью корневого модуля приложения Angular (AppModule). Запуск определяет верхнеуровневый «корневой» компонент приложения, который является первым компонентом, загружаемым для приложения. Для получения более подробной информации см. страницу Настройка.

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

camelCase

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

Имена функций, свойств и методов обычно пишутся в camelCase. Например, square, firstName, и getHeroes. Обратите внимание, что square — это пример того, как вы пишете одно слово в camelCase.

camelCase также известен как lower camel case для отличия от upper camel case или PascalCase. В документации Angular «camelCase» всегда означает lower camel case.

Компонент

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

Компонент — один из самых важных строительных блоков в системе Angular. Фактически, это Angular директива с сопроводительным шаблоном.

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

Те, кто знаком с шаблонами «MVC» и «MVVM», узнают компонент в роли «контроллера» или «модели представления».

dash-case

Практика написания составных слов или фраз таким образом, что каждое слово разделяется дефисом (-). Эта форма также известна как kebab-case.

Селекторы директивы (например, my-app) и корень имён файлов (например, hero-list.component.ts ) часто пишутся в dash-case.

Связывание данных

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

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

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

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

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

Декоратор | декорирование

Функция, которая добавляет метаданные к классу, его членам (свойствам, методам) и аргументам функций.

Декораторы — это возможность языка JavaScript, реализованная в TypeScript и предложенная для ES2016 (также известного как ES7).

Для применения декоратора разместите его непосредственно над или слева от элемента, который он декорирует.

Angular имеет свой набор декораторов, чтобы помочь ему взаимодействовать с частями вашего приложения. Следующий пример — декоратор @Component, который идентифицирует класс как Angular компонент, и декоратор @Input, примененный к свойству name этого компонента. Пропущенный аргумент объекта декоратора @Component содержал бы соответствующие метаданные компонента.

@Component({...})
export class AppComponent {
  constructor(@Inject('SpecialFoo') public foo:Foo) {}
  @Input() name:string;
}

Область действия декоратора ограничена языковой функцией, которую он декорирует. Ни один из показанных здесь декораций не «просочится» к другим классам, которые следуют за ним в файле.

Всегда включайте скобки () при применении декоратора.

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

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

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

Эти части часто зависят от других частей. Часть Angular компонента может зависеть от части сервиса для получения данных или выполнения вычислений. Когда часть "A" зависит от другой части "B", говорят, что "A" зависит от "B", а "B" является зависимостью "A".

Вы можете попросить систему "инъекции зависимостей" создать для нас "A" и обрабатывать все зависимости. Если "A" нуждается в "B", а "B" — в "C", система разрешит эту цепочку зависимостей и вернёт полностью подготовленный экземпляр "A".

Angular предоставляет и использует собственную сложную систему инъекции зависимостей для сборки и запуска приложений путём "инъекции" частей приложения в другие части приложения, где и когда это необходимо.

В основе своей, injector возвращает значения зависимостей по запросу. Выражение injector.get(token) возвращает значение, связанное с заданным маркером.

Маркер — это тип Angular (OpaqueToken). Вам редко нужно работать с маркерами напрямую; большинство методов принимают имя класса (Foo) или строку ("foo"), и Angular преобразует её в маркер. Когда вы пишете injector.get(Foo), инжектор возвращает значение, связанное с маркером для класса Foo, обычно экземпляр класса Foo.

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

Injector хранит внутренний массив маркеров и значений зависимостей. Если Injector не может найти значение для данного маркера, он создаёт новое значение, используя Provider для этого маркера.

А провайдер — это рецепт для создания новых экземпляров значения зависимости, связанного с конкретным маркером.

Инжектор может создать значение для данного маркера только в том случае, если он имеет provider для этого маркера в своём внутреннем реестре провайдеров. Регистрация провайдеров — это важный предварительный шаг.

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

Подробнее см. на странице Инъекция зависимостей.

Директива

Класс Angular, отвечающий за создание, изменение и взаимодействие с HTML-элементами в DOM браузера. Директива — это наиболее фундаментальная функция Angular.

Директива обычно ассоциируется с HTML-элементом или атрибутом. Этот элемент или атрибут часто называют самой директивой.

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

Вы можете изобрести пользовательскую HTML-разметку (например, <my-directive>) для ассоциации с пользовательскими директивами. Вы добавляете эту пользовательскую разметку в HTML-шаблоны так, как если бы вы писали обычный HTML. Таким образом, директивы становятся расширениями самого HTML.

Директивы делятся на следующие категории:

• Компоненты объединяют логику приложения с HTML-шаблоном для отображения представлений приложения view. Компоненты обычно представлены в виде HTML-элементов. Они являются строительными блоками приложения Angular.

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

• Структурные директивы отвечают за формирование или изменение структуры HTML-макета, обычно добавляя, удаляя или изменяя элементы и их дочерние элементы.

ECMAScript

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

Последняя утверждённая версия JavaScript — ECMAScript 2016 (также известный как "ES2016" или "ES7"). Многие разработчики Angular пишут свои приложения на ES7 или диалекте, стремящемся к совместимости с ним, например, TypeScript.

Большинство современных браузеров поддерживают лишь гораздо более старую спецификацию "ECMAScript 5" (также известную как "ES5"). Приложения, написанные на ES2016, ES2015 или одном из их диалектов, должны быть транспилированы в JavaScript ES5.

Разработчики Angular могут писать напрямую на ES5.

ES2015

Сокращённое название для ECMAScript 2015.

ES5

Сокращённое название для ECMAScript 5, версии JavaScript, выполняемой в большинстве современных браузеров.

ES6

Сокращённое название для ECMAScript 2015.

Инжектор

Объект в системе инъекции зависимостей Angular, который может найти зависимость по имени в своём кэше или создать зависимость с зарегистрированным провайдером.

Вход

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

См. раздел Свойства Input и Output на странице Синтаксис шаблонов.

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

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

My current hero is {{hero.name}}

Подробнее об интерполяции см. на странице Синтаксис шаблонов.

Компиляция Just-in-time (JIT)

Метод загрузки, при котором компоненты и модули компилируются в браузере и приложение запускается динамически. Режим Just-in-time подходит для разработки. Для приложений в производстве рекомендуется использовать режим ahead-of-time.

kebab-case

См. dash-case.

Методы жизненного цикла

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

Вы можете задействовать ключевые моменты этого жизненного цикла, реализовав один или несколько интерфейсов методов жизненного цикла.

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

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

• ngOnChanges: когда меняется значение входного/выходного связывания.
• ngOnInit: после первого ngOnChanges.
• ngDoCheck: пользовательское изменение обнаружения разработчика.
• ngAfterContentInit: после инициализации содержимого компонента.
• ngAfterContentChecked: после каждого проверки содержимого компонента.
• ngAfterViewInit: после инициализации представлений компонента.
• ngAfterViewChecked: после каждой проверки представлений компонента.
• ngOnDestroy: непосредственно перед уничтожением директивы.

Подробнее см. на странице Методы жизненного цикла.

Модуль

Angular имеет следующие типы модулей:

• Модули Angular. Подробности и примеры см. на странице Модули Angular.
• Модули ES2015, как описано в этом разделе.

Сплошной блок кода, посвящённый одной задаче.

Приложения Angular модулярны.

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

Модуль экспортирует что-то ценное в этом коде, обычно одну вещь, такую как класс; модуль, которому нужен этот класс, импортирует его.

Структура модулей Angular и синтаксис импорта/экспорта основаны на стандарте модулей ES2015.

Приложение, соответствующее этому стандарту, требует загрузчика модулей для загрузки модулей по запросу и разрешения межмодульных зависимостей. Angular не включает загрузчик модулей и не отдает предпочтение какой-либо конкретной сторонней библиотеке (хотя в большинстве примеров используется SystemJS). Вы можете использовать любую библиотеку модулей, соответствующую стандарту.

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

Вам редко нужно напрямую обращаться к модулям функций Angular. Обычно вы импортируете их из модуля Angular с указанием пространства имён, такого как @angular/core.

Наблюдаемый объект

Массив, элементы которого поступают асинхронно со временем. Наблюдаемые объекты помогают управлять асинхронными данными, такими как данные, поступающие от сервиса бэкэнда. Наблюдаемые объекты используются самим Angular, включая систему событий Angular и его сервис http-клиента.

Для использования наблюдаемых объектов Angular использует стороннюю библиотеку под названием Reactive Extensions (RxJS). Наблюдаемые объекты являются предлагаемой функцией для ES2016, следующей версии JavaScript.

Выход

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

См. раздел Свойства Input и Output на странице Синтаксис шаблонов.

PascalCase

Практика написания отдельных слов, сложных слов или фраз таким образом, что каждое слово или аббревиатура начинается с заглавной буквы. Имена классов обычно пишутся в формате PascalCase. Например, Person и HeroDetailComponent.

Этот формат также известен как верхний регистр с прописной буквы для отличия его от нижнего регистра с прописной буквы или просто camelCase. В этой документации «PascalCase» означает верхний регистр с прописной буквы, а «camelCase» означает нижний регистр с прописной буквы.

Труба

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

Price: {{product.price | currency}}

Вы также можете написать собственные пользовательские трубы. Подробнее читайте на странице труб.

Провайдер

Провайдер создает новый экземпляр зависимости для системы ввода зависимостей. Он связывает маркер поиска с кодом — иногда называемым «рецептом» — который может создать значение зависимости.

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

Метод построения форм Angular с помощью кода в компоненте. Альтернативный метод — шаблонно-управляемые формы.

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

• «Источник истины» — компонент. Валидация определяется с помощью кода в компоненте.
• Каждый элемент управления явно создается в классе компонента с помощью new FormControl() или с помощью FormBuilder.
• Элементы ввода шаблона не используют ngModel.
• Соответствующие директивы Angular имеют префикс Form, такие как FormGroup, FormControl, и FormControlName.

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

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

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

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

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

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

Другие представления в приложении, вероятно, содержат теги якоря или кнопки с директивами RouterLink, которые пользователи могут нажать для навигации.

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

Модуль маршрутизатора

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

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

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

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

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

Упакованный пакет

Способ группировки связанных пакетов npm. Подробнее читайте на странице npm-scope.

Модули Angular поставляются в упакованных пакетах, таких как @angular/core, @angular/common, @angular/platform-browser-dynamic, @angular/http, и @angular/router.

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

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

Служба

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

Приложения часто требуют служб, таких как служба данных о героях или служба регистрации.

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

Приложения часто требуют служб, таких как служба данных или служба регистрации.

Дополнительную информацию см. на странице Услуги обучающего тура по героям.

snake_case

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

Структурные директивы

Категория директивы, которая может формировать или переформировать макет HTML, обычно путём добавления и удаления элементов в DOM. Директива ngIf "условный элемент" и директива ngFor "повторитель" — известные примеры.

Подробнее читайте в руководстве Структурные директивы.

Шаблон

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

Шаблонно-управляемые формы

Метод создания форм Angular с использованием HTML-форм и элементов ввода в представлении. Альтернативный метод — Реактивные формы.

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

• «Источник истины» — шаблон. Валидация определяется с помощью атрибутов на отдельных элементах ввода.
• Двухсторонняя привязка с помощью ngModel синхронизирует модель компонента с вводом пользователя в элементы ввода.
• Внутри Angular создает новый элемент управления для каждого элемента ввода, при условии, что вы настроили атрибут name и двухстороннюю привязку для каждого ввода.
• Соответствующие директивы Angular имеют префикс ng такие как ngForm, ngModel, и ngModelGroup.

Шаблонно-управляемые формы удобны, быстры и просты. Они являются хорошим выбором для многих простых сценариев форм ввода данных.

Подробнее о создании шаблонно-управляемых форм читайте на странице Формы.

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

Синтаксис, похожий на TypeScript, который Angular оценивает в рамках привязки данных.

Подробнее о написании выражений шаблонов читайте в разделе Выражения шаблонов страницы Синтаксис шаблонов.

Транспилировать

Процесс преобразования кода, написанного в одном формате JavaScript (например, TypeScript), в другой формат JavaScript (например, ES5).

TypeScript

Версия JavaScript, которая поддерживает большинство функций языка ECMAScript 2015, такие как декораторы.

TypeScript также известен своей необязательной системой типов, которая предоставляет проверку типов во время компиляции и сильную поддержку инструментов (например, «интеллектуальное завершение», завершение кода, рефакторинг и интеллектуальный поиск). Многие редакторы кода и IDE поддерживают TypeScript либо нативно, либо с помощью плагинов.

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

Подробнее о TypeScript читайте на сайте typescriptlang.org.

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

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

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

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

Зона

Механизм инкапсуляции и перехвата асинхронной активности приложения JavaScript.

У браузера DOM и JavaScript ограниченное количество асинхронных активностей, таких как события DOM (например, щелчки), обещания и вызовы XHR к удалённым серверам.

Зоны перехватывают все эти действия и предоставляют «клиенту зоны» возможность предпринять действия до и после завершения асинхронной активности.

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

Узнайте больше о зонах в этом видео Брайана Форда.