Angular 11 что это

Добро пожаловать в Angular 11

Специально к старту нового потока курса «Fullstack веб-разработчик на JavaScript» представляем вам обзор новой версии популярного фреймворка JavaScript — Angular. 11.0.0 версия уже доступна, и в ней есть отличные обновления, которые затрагивают всю платформу, включая сам фреймворк, библиотеку компонентов и инструменты командной строки. Давайте посмотрим, что в этом релизе.

Обновления операции Byelog

Когда мы поделились Angular roadmap, одним из пунктов была операция Byelog, в рамках которой мы обязались приложить значительные инженерные усилия для сортировки проблем и PR до тех пор, пока у нас не будет чёткого понимания потребностей сообщества. Теперь мы можем сообщить, что первоначальная цель достигнута! Мы отсортировали все проблемы во всех трех монорепозиториях и продолжим эту работу по мере поступления сообщений о новых проблемах.

Это наше обязательство: в дальнейшем все новые проблемы, о которых сообщается, будут сортироваться в течение 2 недель. В процессе работы мы решили несколько популярных проблем с роутером и формами. А еще мы закрыли третью по популярности проблему!

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

Автоматическое встраивание шрифтов

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

Средства тестирования компонентов

В Angular v9 мы представили средства тестирования компонентов. Они предоставляют прочное и разборчивое API, помогающее тестировать компоненты Angular Material. Это дает разработчикам возможность взаимодействовать с компонентами Angular Material с помощью поддерживаемого API во время тестирования.

Начиная с версии 11 у нас есть средства для всех компонентов! Теперь разработчики могут создавать более надёжные наборы тестов.

Мы также улучшили производительность и добавили новые API. Функция parallel упрощает работу с асинхронными действиями в ваших тестах, позволяя разработчикам запускать несколько асинхронных взаимодействий с компонентами параллельно. Функция manualChangeDetection предоставляет разработчикам доступ к более тонкому управлению обнаружением изменений путем отключения автоматического обнаружения изменений в юнит-тестах.

Для получения более подробной информации и примеров этого API и других новых функций обязательно ознакомьтесь с документацией по Angular Material Test Harness!

Улучшенная отчетность и логирование

Мы внесли изменения в отчёты на этапе сборки, чтобы сделать их ещё более полезными во время разработки. Мы вносим обновлённый вывод в CLI, чтобы облегчить чтение логов и отчетов.

Улучшено форматирование вывода CLI

Превью обновленного Language Service

Angular Language Service предоставляет полезные инструменты, которые делают разработку с Angular продуктивной и увлекательной. Текущая версия Language Service основана на View Engine, и сегодня мы кратко познакомимся с Language Service на основе Ivy. Обновлённый Language Service предоставляет разработчикам более мощный и точный опыт.

Теперь Language Service сможет правильно определять универсальные типы в шаблонах так же, как это делает компилятор TypeScript. Например, на скриншоте ниже мы можем сделать вывод, что итерируемый объект имеет тип string.

Angular Language Service выводит повторяющиеся типы в шаблонах

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

Обновлена поддержка Hot Module Replacement (HMR)

Angular предлагает поддержку HMR, но для её включения требовались изменения конфигурации и кода, что делало её не очень удобной для быстрого включения в проекты Angular. В версии 11 мы обновили инструменты командной строки, чтобы разрешить включение HMR при запуске приложения с помощью ng serve. Для начала выполните следующую команду:

ng serve --hmr

После того как локальный сервер запустится, консоль отобразит сообщение, подтверждающее, что HMR активен:

NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.

Вот тут можно получить информацию о работе с HMR для webpack.

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

Более быстрая сборка

Мы ускоряем цикл разработки и сборки, внося обновления в некоторые ключевые области.

• При установке зависимостей процесс обновления ngcc происходит теперь в 2–4 раза быстрее.
• Более быстрая компиляция с TypeScript v4.0.

Экспериментальная поддержка webpack 5

Теперь команды могут использовать webpack v5. В настоящее время вы можете поэкспериментировать с Module Federation. В будущем webpack v5 покажет:

• Более быстрые сборки с постоянным кэшированием на диске.
• Уменьшение размера пакетов благодаря cjs tree-shaking.

Хотите попробовать webpack 5? Чтобы включить его в своём проекте, добавьте следующий раздел в файл package.json:

"resolutions":

В настоящее время вам нужно использовать yarn, чтобы использовать это, поскольку npm еще не поддерживает свойство Resolution.

Линтинг

В предыдущих версиях Angular мы поставляли реализацию для линтинга по умолчанию (TSLint). Теперь TSLint устарел, создатели проекта рекомендуют перейти на ESLint. Джеймс Генри вместе с другими людьми из сообщества разработчиков ПО с открытым исходным кодом разработали стороннее решение и способ миграции с помощью typescript-eslint, angular-eslint и tslint-to-eslint-config! Мы тесно сотрудничаем, чтобы обеспечить плавный переход разработчиков Angular на поддерживаемый стек линтинга.

Мы отказываемся от использования TSLint и Codelyzer в версии 11. Это означает, что в будущих версиях реализация для линтинга проектов Angular будет недоступна.

Перейдите на официальную страницу проекта, чтобы узнать, как включить angular-eslint в проект и перейти с TSLint.

Уборка

В этом обновлении мы прекращаем поддержку IE9/IE10 и IE для мобильных устройств. IE11 — это единственная версия IE, всё ещё поддерживаемая Angular. Мы также удалили устаревшее API и добавили несколько функций в список устаревших. Обязательно ознакомьтесь с ним, чтобы убедиться, что вы используете новейшие API-интерфейсы и следуете нашим рекомендациям.

Roadmap

Мы также обновили roadmap, чтобы вы были в курсе наших текущих приоритетов. Некоторые из объявлений в этом посте представляют собой обновления текущих проектов из roadmap. Это отражает наш подход к постепенному развёртыванию более масштабных усилий и позволяет разработчикам давать ранние отзывы, которые мы можем включить в окончательный релиз.

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

Обновление до Angular 11

Когда вы будете готовы к работе, выполните эту команду для обновления Angular и CLI:

ng update @angular/cli @angular/core

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

А с промокодом HABR можно получить дополнительные 10 % к скидке, указанной на баннере.

• Курс по JavaScript
• Обучение профессии Data Science
• Обучение профессии Data Analyst
• Онлайн-буткемп по Data Analytics
• Курс «Python для веб-разработки»

Eще курсы

• Обучение профессии C#-разработчик
• Продвинутый курс «Machine Learning Pro + Deep Learning»
• Курс «Математика и Machine Learning для Data Science»
• Курс по Machine Learning
• Разработчик игр на Unity
• Профессия Веб-разработчик
• Профессия Java-разработчик
• C++ разработчик
• Курс по аналитике данных
• Курс по DevOps
• Профессия iOS-разработчик с нуля
• Профессия Android-разработчик с нуля

Рекомендуемые статьи

• Как стать Data Scientist без онлайн-курсов
• 450 бесплатных курсов от Лиги Плюща
• Как изучать Machine Learning 5 дней в неделю 9 месяцев подряд
• Сколько зарабатывает аналитик данных: обзор зарплат и вакансий в России и за рубежом в 2020
• Machine Learning и Computer Vision в добывающей промышленности

Что такое Angular?¶

Эта тема поможет вам понять Angular: что такое Angular, какие преимущества он дает и чего можно ожидать, когда вы начнете создавать свои приложения.

Angular — это платформа разработки, построенная на TypeScript. Как платформа, Angular включает в себя:

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

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

Самое главное, что экосистема Angular состоит из разнообразной группы, включающей более 1,7 миллиона разработчиков, авторов библиотек и создателей контента.

Приложения Angular: Основные принципы¶

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

Компоненты¶

Компоненты — это строительные блоки, из которых состоит приложение. Компонент включает в себя класс TypeScript с декоратором @Component() , HTML-шаблон и стили.

Декоратор @Component() определяет следующую специфическую для Angular информацию:

• CSS-селектор, определяющий, как компонент будет использоваться в шаблоне. HTML-элементы в шаблоне, соответствующие этому селектору, становятся экземплярами компонента.
• HTML-шаблон, который указывает Angular, как отображать компонент.
• Необязательный набор стилей CSS, определяющих внешний вид HTML-элементов шаблона.

Ниже приведен минимальный компонент Angular.

 1 2 3 4 5 6 7 8 9 10 11 12

import  Component > from '@angular/core'; @Component( selector: 'hello-world', template: ` 
Hello World 
This is my first component! `, >) export class HelloWorldComponent  // The code in this class drives the component's behavior. > 

Чтобы использовать этот компонент, напишите в шаблоне следующее:

hello-world>hello-world> 

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

1 2 3 4

hello-world> h2>Hello Worldh2> p>This is my first component!p> hello-world> 

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

Более подробную информацию о том, что делать с компонентами, можно найти в разделе Обзор компонентов Angular.

Шаблоны¶

Каждый компонент имеет HTML-шаблон, который определяет способ отображения этого компонента. Вы определяете этот шаблон либо в строке, либо по пути к файлу.

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

Одним из применений этой возможности является вставка динамического текста, как показано в следующем примере.

Значение для message берется из класса компонента:

 1 2 3 4 5 6 7 8 9 10

import  Component > from '@angular/core'; @Component( selector: 'hello-world-interpolation', templateUrl: './hello-world-interpolation.component.html', >) export class HelloWorldInterpolationComponent  message = 'Hello, World!'; > 

Когда приложение загружает компонент и его шаблон, пользователь видит следующее:

p>Hello, World!p> 

Обратите внимание на использование двойных фигурных скобок — они указывают Angular интерполировать содержимое внутри них.

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

1 2 3

p [id]="sayHelloId" [style.color]="fontColor"> You can set my color in the component! p> 

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

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

1 2 3 4 5 6 7

button type="button" [disabled]="canClick" (click)="sayMessage()" > Trigger alert message button> 

В предыдущем примере вызывается метод, который определен в классе компонента:

1 2 3

sayMessage()  alert(this.message); > 

Ниже приведен комбинированный пример интерполяции, привязки свойств и привязки событий в шаблоне Angular:

hello-world-bindings.component.ts hello-world-bindings.component.html

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

import  Component > from '@angular/core'; @Component( selector: 'hello-world-bindings', templateUrl: './hello-world-bindings.component.html', >) export class HelloWorldBindingsComponent  fontColor = 'blue'; sayHelloId = 1; canClick = false; message = 'Hello, World'; sayMessage()  alert(this.message); > > 

 1 2 3 4 5 6 7 8 9 10 11 12 13

button type="button" [disabled]="canClick" (click)="sayMessage()" > Trigger alert message button> p [id]="sayHelloId" [style.color]="fontColor"> You can set my color in the component! p> p>My color is >p> 

Добавьте возможности в ваши шаблоны с помощью директив. Наиболее популярными директивами в Angular являются *ngIf и *ngFor . Используйте директивы для выполнения различных задач, например, для динамического изменения структуры DOM.

А также создавайте собственные пользовательские директивы для создания великолепного пользовательского опыта.

Следующий код является примером директивы *ngIf .

hello-world-ngif.component.ts hello-world-ngif.component.html

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

import  Component > from '@angular/core'; @Component( selector: 'hello-world-ngif', templateUrl: './hello-world-ngif.component.html', >) export class HelloWorldNgIfComponent  message = "I'm read only!"; canEdit = false; onEditClick()  this.canEdit = !this.canEdit; if (this.canEdit)  this.message = 'You can edit me!'; > else  this.message = "I'm read only!"; > > > 

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

h2>Hello World: ngIf!h2> button type="button" (click)="onEditClick()"> Make text editable! button> div *ngIf="canEdit; else noEdit"> p>You can edit the following paragraph.p> div> ng-template #noEdit> p> The following paragraph is read only. Try clicking the button! p> ng-template> p [contentEditable]="canEdit">>p> 

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

Более подробную информацию о шаблонах смотрите в разделе Шаблоны.

Инъекция зависимостей¶

Инъекция зависимостей позволяет вам объявлять зависимости ваших классов TypeScript, не заботясь об их инстанцировании. Вместо этого Angular выполняет инстанцирование за вас.

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

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

Чтобы проиллюстрировать, как работает внедрение зависимостей, рассмотрим следующий пример. Первый файл, logger.service.ts , определяет класс Logger .

Этот класс содержит функцию writeCount , которая записывает число в консоль.

1 2 3 4 5 6 7 8

import  Injectable > from '@angular/core'; @Injectable( providedIn: 'root' >) export class Logger  writeCount(count: number)  console.warn(count); > > 

Далее в файле hello-world-di.component.ts определяется компонент Angular. Этот компонент содержит кнопку, которая использует функцию writeCount класса Logger .

Чтобы получить доступ к этой функции, служба Logger внедряется в класс HelloWorldDI путем добавления private logger: Logger в конструктор.

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

import  Component > from '@angular/core'; import  Logger > from '../logger.service'; @Component( selector: 'hello-world-di', templateUrl: './hello-world-di.component.html', >) export class HelloWorldDependencyInjectionComponent  count = 0; constructor(private logger: Logger) <> onLogMe()  this.logger.writeCount(this.count); this.count++; > > 

Для получения дополнительной информации об инъекции зависимостей и Angular смотрите раздел Инъекция зависимостей в Angular.

Angular CLI¶

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

Команда	Подробности
ng build	Компилирует приложение Angular в выходной каталог.
ng serve	Собирает и обслуживает ваше приложение, перестраивая его при изменении файлов.
ng generate	Генерирует или изменяет файлы на основе схемы.
ng test	Запускает модульные тесты для данного проекта.
ng e2e	Собирает и обслуживает приложение Angular, затем запускает сквозные тесты.

Angular CLI — ценный инструмент для создания ваших приложений.

Сторонние библиотеки¶

В разделе «Приложения Angular: самое необходимое» представлен краткий обзор нескольких ключевых архитектурных элементов, которые используются при создании приложений Angular. Многочисленные преимущества Angular становятся очевидными, когда ваше приложение растет, и вы хотите добавить такие функции, как навигация по сайту или ввод данных пользователем.

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

Некоторые из доступных библиотек включают:

Библиотека	Подробности
Angular Router	Расширенная навигация и маршрутизация на стороне клиента на основе компонентов Angular. Поддерживает ленивую загрузку, вложенные маршруты, пользовательское сопоставление путей и многое другое.
Angular Forms	Единая система участия и проверки форм.
Angular HttpClient	Надежный HTTP-клиент, способный обеспечить более продвинутое взаимодействие клиент-сервер.
Angular Animations	Богатая система для управления анимацией на основе состояния приложения.
Angular PWA	Инструменты для создания прогрессивных веб-приложений \(PWA\) , включая сервисный работник и манифест веб-приложения.
Angular Schematics	Автоматизированные инструменты для создания лесов, рефакторинга и обновления, которые упрощают разработку в больших масштабах.

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

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

Следующие шаги¶

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

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

Для дальнейшего изучения возможностей Angular рекомендуем следующие разделы:

• Понимание Angular
• Гайд разработчика Angular

Введение в Angular

Angular представляет фреймворк от компании Google для создания клиентских приложений. Прежде всего он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиально новый фреймворк.

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

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

Но мы не ограничены языком TypeScript. При желании можем писать приложения на Angular с помощью таких языков как Dart или JavaScript. Однако TypeScript все таки является основным языком для Angular.

Последняя версия Angular — Angular 17 вышла в ноябре 2023 года. Официальный репозиторий фреймворка на гитхабе: https://github.com/angular/angular. Там вы можете найти сами исходные файлы, а также некоторую дополнительную информацию.

Начало работы c Angular

Для работы с Angular необходимо установить сервер Node.js и пакетный менеджер npm , если они отсутствуют на рабочей машине. При этом особого какого-то знания для работы с NodeJS и npm не требуется. Для установки можно использовать программу установки node.js. Вместе с сервером она также установит и npm.

Следует учитывать, что Angular поддерживает те версии node.js, которые в текущий момент находятся в статусе «Active LTS» или «Maintenance LTS». На момент написания данной статьи это версии 18 и 20. Поэтому, если Node.js уже ранее был установлен, но имеет более старую или, наоборот новую, но еще не поддерживаемую версию, то лучше его обновить. Проверить совместимость версий node.js (а также версий typescript и библиотеки RxJS) для определенных версий Angular можно по адресу: https://angular.dev/reference/versions. Так, для последний на данный момент версии Angular 17 требования следующие:

• Версия Node.js должна быть либо 18 начиная с подверсии 18.13.0, либо 20 начиная с подверсии 20.9.0
• Версия TypeScript должна быть 4.9.3 и выше, но ниже 5.3.0 (нужная версия TypeScript устанавливается локально в проект)

То же самое касается и npm . Если версия слишком старая или, наоборот, одна из последних, то Angular может ее не поддерживать. При работе с Angular лучше полагаться на ту версию npm, которая устанавливается вместе с LTS-версией Node.js.

Установка Angular CLI

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

npm install -g @angular/cli

Данная команда установит пакет @angular/cli в качестве глобального модуля, поэтому в последующем при создании новый проектов Angular его не потребуется устанавливать заново.

Ту же команду можно использовать для обновления Angluar CLI при выходе новой версии фреймворка. Проверить версию CLI можно в командной строке/консоли с помощью команды:

ng version

Если Angluar CLI уже был установлен, то можно его обновить с помощью команды:

ng update

При работе на Windows и выполнении команд в PowerShell вместо командной строки стоит учитывать, что по умолчанию выполнение скриптов в PowerShell отключено. Чтобы разрешить выполнение скриптов PowerShell (что требуется для npm), необходимо выполнить следующую команду:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

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

Установка пакетов. Package.json

В выше созданной папке проекта создадим новый файл package.json со следующим содержимым:

< "name": "helloapp", "version": "1.0.0", "description": "First Angular 17 Project", "author": "Eugene Popov metanit.com", "scripts": < "ng": "ng", "start": "ng serve", "build": "ng build" >, "dependencies": < "@angular/common": "~17.0.0", "@angular/compiler": "~17.0.0", "@angular/core": "~17.0.0", "@angular/forms": "~17.0.0", "@angular/platform-browser": "~17.0.0", "@angular/platform-browser-dynamic": "~17.0.0", "@angular/router": "~17.0.0", "rxjs": "~7.8.0", "zone.js": "~0.14.2" >, "devDependencies": < "@angular-devkit/build-angular": "~17.0.0", "@angular/cli": "~17.0.0", "@angular/compiler-cli": "~17.0.0", "typescript": "~5.2.2" >>

Данный файл устанавливает пакеты и зависимости, которые будут использоваться проектом. В секции dependencies в основном определяются пакеты angular, которые необходимы приложению для работы. В секции devDependencies прописаны только те пакеты, которые будут использоваться для разработки. В частности, это пакеты для работы с языком typescript (так как мы будем писать код приложения на языке TypeScript), а также пакеты, необходимые для компиляции приложения с помощью инфраструктуры Angular CLI.

В секции «scripts» описаны используемые команды. В частности, команда ng serve запускает простенький веб-сервер для тестирования приложения и само приложение. А команда ng build компилирует приложение.

Затем откроем командную строку (терминал) и перейдем в ней к папке проекта с помощью команды cd:

C:\WINDOWS\system32>cd C:\angular\helloapp

И затем выполним команду npm install , которая установит все необходимые модули:

C:\angular\helloapp>npm install added 923 packages, and audited 924 packages in 1m 115 packages are looking for funding run `npm fund` for details found 0 vulnerabilities C:\angular\helloapp>

После выполнения этой команды в папке проекта должна появиться подпапка node_modules , которая содержит все используемые зависимости и пакеты.

Определение приложения

Затем создадим в папке проекта подпапку, которую назовем src — она будет содержать все исходные файлы. И далее в папке src создадим подкаталог app .

Создание компонента Angular

Компоненты представляют основные строительные блоки приложения Angular. Каждое приложение Angular имеет как минимум один компонент. Поэтому создадим в папке src/app новый файл, который назовем app.component.ts и в котором определим следующий код компонента:

import < Component >from «@angular/core»; import from «@angular/forms»; @Component(< selector: "my-app", standalone: true, imports: [FormsModule], template: `Введите имя:

Добро пожаловать >!

` >) export class AppComponent

В начале файла определяется директива import , которая импортирует функциональность модуля angular/core , предоставляя доступ к функции декоратора @Component . И также импортируем модуль FormsModule, который понадобится для работы с полями ввода.

Далее собственно идет функция-декоратор @Component , которая ассоциирует метаданные с классом компонента AppComponent. В эту функцию передается конфигурационных объект с рядом параметров:

• параметр selector определяет селектор css для HTML-элемента, который будет представлять компонент. В данном случае это селектор «my-app». То есть на веб-странице приложения должен быть элемент «», и в этот элемент будет загружаться приложение Angular
• параметр standalone: true указывает, что компонент будет независимым, то есть для него не нужно создавать дополнительных модулей, что уменьшает и упрощает код приложения
• параметр imports импортирует в компонент другие модули. Сторонние модули могут содержать различный функционал, который мы можем использовать. Например, в нашем случае мы будем использовать поле ввода, куда пользователь будет вводить имя. И для работы с этим полем ввода импортируем в компонент модуль FormsModule.
• параметр template представляет шаблон или визуальную часть компонента — то, что мы собственно увидим в браузере. В частности, в шаблоне определено поле ввода, куда пользователь будет вводить имя. А в заголовке h1 будет выводиться введенное значение. Для связи поля ввода и заголовка применяется двусторонняя привязка поля с помощью выражений [(ngModel)]=»name» и > к некоторой модели name.

И в конце собственно экспортируется класс компонента AppComponent, в котором как раз определяется переменная name — в данном случае это пустая строка.

Запуск приложения

Теперь нам надо указать Angular, как запускать наше приложение. Для этого создадим в папке src (на уровень выше, чем расположен файл «app.component.ts») файл main.ts со следующим содержимым:

import < bootstrapApplication >from "@angular/platform-browser"; import < AppComponent >from "./app/app.component"; bootstrapApplication(AppComponent).catch(e => console.error(e));

Этот код запускает приложение в виде ранее определенного компонента AppComponent. При возникновении ошибок они выводятся на консоль.

Создание главной страницы

Далее определим в папке src главную страницу index.html приложения:

      Загрузка.   

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

Определение конфигурации

Поскольку для определения кода приложения применяется язык TypeScript, поэтому также создадим в корневой папке проекта новый файл tsconfig.json :

< "compileOnSave": false, "compilerOptions": < "baseUrl": "./", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "ES2022", "moduleResolution": "node", "target": "ES2022", "typeRoots": [ "node_modules/@types" ], "lib": [ "ES2022", "dom" ] >, "files": [ "src/main.ts" ], "include": [ "src/**/*.d.ts"] >

Данный файл определяет настройки для компилятора TypeScript. Опция «compilerOptions» устанавливает параметры компиляции. А опция «files» определяет компилируемые файлы. В нашем случае это файл приложения — main.ts, который подтягивает все остальные файлы приложения.

Angular.json

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

 < "version": 1, "projects": < "helloapp": < "projectType": "application", "root": "", "sourceRoot": "src", "architect": < "build": < "builder": "@angular-devkit/build-angular:browser", "options": < "outputPath": "dist/helloapp", "index": "src/index.html", "main": "src/main.ts", "polyfills": ["zone.js"], "tsConfig": "tsconfig.json", "aot": true >>, "serve": < "builder": "@angular-devkit/build-angular:dev-server", "options": < "buildTarget": "helloapp:build" >> > > > >

Вкратце пройдемся по структуре файле. Вначале определяется параметр version . Он определяет версию конфигурации проекта.

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

Проект определяет следующие опции:

• projectType : тип проекта. Значение «application» указывает, что проект будет представлять приложение, которое можно будет запускать в браузере
• root : указывает на папку файлов проекта относительно рабочей среды. Пустое значение соответствует корневой папке проекта, так как в данном случае рабочая среда и каталог проекта совпадают
• sourceRoot : определяет корневую папку файлов с исходным кодом. В нашем случае это папка src, где собственно определены все файлы приложения
• architect : задает настройки для построения проекта. В файле package.json определены команды build и serve , и для каждой из этих команд в секции architect заданы свои настройки. Для каждой команды задается параметр builder , который определяет инструмент для построения проекта. Так, для команды «build» задано значение «@angular-devkit/build-angular:browser» — данный билдер для построения использует сборщик пакетов webpack. А для команды «serve» задано значение «@angular-devkit/build-angular:dev-server» — данный билдер запускает веб-сервер и развертывает на нем скомпилированное приложение.

Параметр options задает параметры построения файлов. Для команды «build» здесь определены следующие опции:

• outputPath : путь, по которому будет публиковаться скомпилированное приложение
• index : путь к главной странице приложения
• main : путь к главному файлу приложения, где собственно запускается приложение Angular
• polyfills : путь к файлам полифилов, в качестке которого выступает «zone.js»
• tsConfig : путь к файлу конфигурации TypeScript
• aot : указывает, будет ли использоваться компиляция AOT (Ahead-Of-Time) (предварительная компиляция перед выполнением). В данном случае значение true означает, что она используется

Для команды «serve» указана только одна опцияя — buildTarget , которая содержит ссылку на конфигурацию для команды build — «helloapp:build». То есть по сути эта команда использует ту же конфигурацию, что и команда build.

Если мы используем TypeScript для работы с Angular и Angular CLI для компиляции, то эти файлы package.json, tsconfig.json и angular.json фактически будут присутствовать в каждом проекте. И их можно переносить из проекта в проект с минимальными изменениями. Например, в файле angular.json вместо названия проекта «helloapp» будет соответствующее название проекта. В файле package.json можно будет задать какие-то другие версии пакетов, если предыдущие версии устарели. Можно будет изменить название проекта, версию. Можно подправить настройки TypeScript или Angular CLI, но в целом общая организация будет той же.

В итоге у нас получится следующая структура проекта:

Запуск проекта

И теперь, когда все готово, мы можем запустить проект. Для этого в командной строке (терминале) перейдем к папке проекта с помощью команды cd и затем выполним команду ng serve :

C:\WINDOWS\system32>cd C:\angular\helloapp C:\angular\helloapp>ng serve --open

Консольный вывод проинформирует нас, какие файлы какого размера созданы. Кроме того, мы сможем увидеть адрес, по которому запущен тестовый веб-сервер — по умолчанию это «http://localhost:4200/». Если мы передаем команде флаг —open , как в случае выше, то Angular CLI автоматически открывае браузер с запущенным приложением. И мы можем обратиться к приложению:

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

Важно отметить, что пока приложение запущено, мы можем поменять код, и Angular CLI почти моментально перекомпилирует и перезапустит приложение.

Что такое Angular. Начало работы с фреймворком¶

Angular представляет фреймворк от компании Google для создания клиентских приложений. Прежде всего он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиально новый фреймворк.

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

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

Но мы не ограничены языком TypeScript. При желании можем писать приложения на Angular с помощью таких языков как Dart или JavaScript. Однако TypeScript все таки является основным языком для Angular.

Официальный репозиторий фреймворка на гитхабе: https://github.com/angular/angular. Там вы можете найти сами исходные файлы, а также некоторую дополнительную информацию.

Начало работы c Angular¶

Для работы с Angular необходимо установить сервер Node.js и пакетный менеджер npm, если они отсутствуют на рабочей машине. Для установки можно использовать программу установки node.js. Вместе с сервером она также установит и npm. При этом особого какого-то знания для работы с NodeJS и npm не требуется.

После установки необходимых инструментов создадим простейшее приложение. Для этого определим на жестком диске папку приложения. Путь она будет называться helloapp . В этой папке создадим новый файл package.json со следующим содержимым:

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

 "name": "helloapp", "version": "1.0.0", "description": "First Angular 9 Project", "author": "Eugene Popov ", "scripts":  "dev": "webpack-dev-server --hot --open", "build": "webpack" >, "dependencies":  "@angular/common": "~9.0.0", "@angular/compiler": "~9.0.0", "@angular/core": "~9.0.0", "@angular/forms": "~9.0.0", "@angular/platform-browser": "~9.0.0", "@angular/platform-browser-dynamic": "~9.0.0", "@angular/router": "~9.0.0", "rxjs": "^6.5.4", "zone.js": "^0.10.2" >, "devDependencies":  "@angular-devkit/build-angular": "~0.900.1", "@angular/cli": "~9.0.1", "@angular/compiler-cli": "~9.0.0", "@types/node": "^12.11.1", "typescript": "~3.7.5" > > 

Данный файл устанавливает пакеты и зависимости, которые будут использоваться проектом. В секции dependencies в основном определяются пакеты angular, которые необходимы приложению для работы. В секции devDependencies прописаны только те пакеты, которые будут использоваться для разработки. В частности, это пакеты для работы с языком typescript (так как мы будем писать код приложения на языке TypeScript), а также пакеты, необходимые для сборки приложения в один файл с помощью сборщика webpack.

Затем откроем командную строку (терминал) и перейдем в ней к папке проекта с помощью команды cd :

C:\WINDOWS\system32>cd C:\angular2\helloapp 

И затем выполним команду npm install , которая установит все необходимые модули:

C:\angular2\helloapp>npm install 

После выполнения этой команды в папке проекта должна появиться подпапка node_modules , которая содержит все используемые зависимости и пакеты.

Затем создадим в папке проекта подпапку, которую назовем src — она будет содержать все исходные файлы. И далее в папке src создадим подкаталог app .

Создание компонента Angular¶

Компоненты представляют основные строительные блоки приложения Angular. Каждое приложение Angular имеет как минимум один компонент. Поэтому создадим в папке src/app новый файл, который назовем app.component.ts и в котором определим следующий код компонента:

 1 2 3 4 5 6 7 8 9 10 11 12 13

import  Component > from '@angular/core'; @Component( selector: 'my-app', template: ` Введите имя:  
Добро пожаловать >! `, >) export class AppComponent  name = ''; > 

В начале файла определяется директива import , которая импортирует функциональность модуля @angular/core , предоставляя доступ к функции декоратора @Component .

Далее собственно идет функция-декоратор @Component , которая ассоциирует метаданные с классом компонента AppComponent . В этой функции, во-первых, определяется параметр selector или селектор css для HTML-элемента, который будет представлять компонент. Во-вторых, здесь определяется параметр template или шаблон, который указывает, как надо визуализировать компонент. В этом шаблоне задана двусторонняя привязка с помощью выражений [(ngModel)]=»name» и > к некоторой модели name .

И в конце экспортируется класс компонента AppComponent , в котором как раз определяется модель name — в данном случае это пустая строка.

Создание модуля приложения¶

Приложение Angular состоит из модулей. Модульная структура позволяет легко подгружать и задействовать только те модули, которые непосредственно необходимы. И каждое приложение имеет как минимум один корневой модуль. Поэтому создадим в папке src/app новый файл, который назовем app.module.ts со следующим содержимым:

 1 2 3 4 5 6 7 8 9 10

import  NgModule > from '@angular/core'; import  BrowserModule > from '@angular/platform-browser'; import  FormsModule > from '@angular/forms'; import  AppComponent > from './app.component'; @NgModule( imports: [BrowserModule, FormsModule], declarations: [AppComponent], bootstrap: [AppComponent], >) export class AppModule <> 

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

С помощью директив import здесь импортируется ряд нужных нам модулей. Прежде всего, это модуль NgModule . Для работы с браузером также требуется модуль BrowserModule . Так как наш компонент использует элемент input или элемент формы, то также подключаем модуль FormsModule . И далее импортируется созданный ранее компонент.

Запуск приложения¶

Теперь нам надо указать Angular, как запускать наше приложение. Для этого создадим в папке src (на уровень выше, чем расположены файлы app.component.ts и app.module.ts ) файл main.ts со следующим содержимым:

1 2 3 4

import  platformBrowserDynamic > from '@angular/platform-browser-dynamic'; import  AppModule > from './app/app.module'; const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule); 

Этот код инициализирует платформу, которая запускает приложение, и затем использует эту платформу для загрузки модуля AppModule .

Также в папке src определим еще один файл, который назовем polyfills.ts со следующим кодом:

import 'zone.js/dist/zone'; // zone используется angular 

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

Создание главной страницы¶

Далее определим в папке src главную страницу index.html приложения:

 1 2 3 4 5 6 7 8 9 10

 html> head> meta charset="utf-8" /> title>Hello Angular 9title> head> body> my-app>Загрузка. my-app> body> html> 

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

Определение конфигурации¶

Поскольку для определения кода приложения применяется язык TypeScript, поэтому также создадим в корневой папке проекта новый файл tsconfig.json :

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

 "compileOnSave": false, "compilerOptions":  "baseUrl": "./", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "esnext", "moduleResolution": "node", "target": "es2015", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2018", "dom" ] >, "files": [ "src/main.ts", "src/polyfills.ts" ], "include": [ "src/**/*.d.ts" ] > 

Данный файл определяет настройки для компилятора TypeScript. Опция » compilerOptions » устанавливает параметры компиляции. А опция » files » определяет компилируемые файлы. В нашем случае это файл приложения — main.ts , который подтягивает все остальные файлы приложения, и файл полифилов polyfills.ts .

Angular.json¶

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

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

 "version": 1, "projects":  "helloapp":  "projectType": "application", "root": "", "sourceRoot": "src", "architect":  "build":  "builder": "@angular-devkit/build-angular:browser", "options":  "outputPath": "dist/helloapp", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.json", "aot": true > >, "serve":  "builder": "@angular-devkit/build-angular:dev-server", "options":  "browserTarget": "helloapp:build" > > > >>, "defaultProject": "helloapp" > 

Вкратце пройдемся по структуре файле. Вначале определяется параметр version . Он определяет версию конфигурации проекта.

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

Проект определяет следующие опции:

• projectType : тип проекта. Значение » application » указывает, что проект будет представлять приложение, которое можно будет запускать в браузере
• root : указывает на папку файлов проекта относительно рабочей среды. Пустое значение соответствует корневой папке проекта, так как в данном случае рабочая среда и каталог проекта совпадают
• sourceRoot : определяет корневую папку файлов с исходным кодом. В нашем случае это папка src , где собственно определены все файлы приложения
• architect : задает настройки для построения проекта. В файле package.json определены команды build и serve , и для каждой из этих команд в секции architect заданы свои настройки.

Для каждой команды задается параметр builder , который определяет инструмент для построения проекта. Так, для команды » build » задано значение » @angular-devkit/build-angular:browser » — данный билдер для построения использует сборщик пакетов webpack. А для команды » serve » задано значение » @angular-devkit/build-angular:dev-server » — данный билдер запускает веб-сервер и развертывает на нем скомпилированное приложение.

Параметр options задает параметры построения файлов. Для команды » build » здесь определены следующие опции:

• outputPath : путь, по которому будет публиковаться скомпилированное приложение
• index : путь к главной странице приложения
• main : путь к главному файлу приложения, где собственно запускается приложение Angular
• polyfills : путь к файлу полифилов
• tsConfig : путь к файлу конфигурации TypeScript
• aot : указывает, будет ли использоваться компиляция AOT (Ahead-Of-Head) (предварительная компиляция перед выполнением). В данном случае значение true означает, что она используется

Для команды » serve » указана только одна опцияя — browserTarget , которая содержит ссылку на конфигурацию для команды build — » helloapp:build «. То есть по сути эта команда использует ту же конфигурацию, что и команда build .

Последняя опция defaultProject указывает на проект по умолчанию. В данном случае это наш единственный проект.

Если мы используем TypeScript для работы с Angular и Angular CLI для компиляции, то эти файлы package.json , tsconfig.json и angular.json фактически будут присутствовать в каждом проекте. И их можно переносить из проекта в проект с минимальными изменениями. Например, в файле angular.json вместо названия проекта » helloapp » будет соответствующее название проекта. В файле package.json можно будет задать какие-то другие версии пакетов, если предыдущие версии устарели. Можно будет изменить название проекта, версию. Можно подправить настройки TypeScript или Angular CLI, но в целом общая организация будет той же.

В итоге у нас получится следующая структура проекта:

Запуск проекта¶

И теперь, когда все готово, мы можем запустить проект. Для этого в командной строке (терминале) перейдем к папке проекта с помощью команды cd и затем выполним команду ng serve:

C:\WINDOWS\system32>cd C:\angular\helloapp C:\angular\helloapp>ng serve --open 

Консольный вывод проинформирует нас, какие файлы какого размера созданы. Кроме того, мы сможем увидеть адрес, по которому запущен тестовый веб-сервер — по умолчанию это » http://localhost:4200/ «. Если мы передаем команде флаг —open , как в случае выше, то Angular CLI автоматически открывае браузер с запущенным приложением. И мы можем обратиться к приложению:

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

Важно отметить, что пока приложение запущено, мы можем поменять код, и Angular CLI почти моментально перекомпилирует и перезапустит приложение.