Angular 12 что нового

Angular 12 что нового

13 мая компания Google анонсировала новую версию фреймворка Angular — Angular 12, Напомню, что новые версии фреймворка выходят два раза в год.

Основные изменения и обновления в Angular 12:

• Ранее использовавшийся движок представления View Engine объявлен устаревшим и будет удален в будущих релизах. Отныне единственным движком, который будет использоваться, стал движок Ivy . Стоит отметить, что библиотеки, которые сейчас применяют View Engine, также будут работать с приложениями, которые применяют движок Ivy. Однако авторам подобных библиотек рекомендуется переходить на Ivy.
• Изменения в системе локализации i18n — осуществлен переход к новому формату идентификаторов сообщений.
• В шаблоны Angular добавлена поддержка оператора ?? (nullish coalescing operator). Так, если раньше наличие значение проверялось с помощью следующего кода:

То при помощи оператора ?? код можно сократить следующим образом:

"inlineStyleLanguage": "scss”

Релиз Angular 12

В мае вышла новая мажорная версия Angular. Марк Тексон рассказал о всех нововведениях релиза — «Angular v12 is now available».

— Экосистема Angular продолжает миграцию на пайплайн компиляции и рендеринга Ivy; View Engine с 12-ой версии задеприкейчен и будет удалён в одном из будущих релизов.

— Добавлены инструменты для автоматической миграции на новый формат идентификаторов сообщений i18n.

— Protractor (инструмент E2E-тестирования Angular-приложений) больше не используется при создании новых проектов. Его дальнейшая судьба пока неизвестна.

— Теперь @Component поддерживает инлайн SASS-кода. Добавлена поддержка новой модульной системы SASS. Angular CDK и Angular Material больше не поддерживают node-sass.

— Добавлена поддержка Nullish Coalescing в шаблонах. Завершена миграция на Webpack 5 и добавлена поддержка TypeScript 4.2. Команда ng update по умолчанию переключена в production-режим. Задеприкейчена поддержка IE11, она будет удалена полностью в следующей мажорной версии.

Создайте новый проект¶

Используйте команду ng new , чтобы начать создание приложения Tour of Heroes.

В этом руководстве:

1. Устанавливает ваше окружение.
2. Создает новое рабочее пространство и начальный проект приложения.
3. Обслуживает приложение.
4. Вносит изменения в новое приложение.

Для просмотра кода приложения смотрите:

Настройка среды¶

Чтобы настроить среду разработки, следуйте инструкциям в Local Environment Setup.

Создайте новое рабочее пространство и начальное приложение¶

Вы разрабатываете приложения в контексте Angular workspace. Рабочее пространство содержит файлы для одного или нескольких проектов.

Проект — это набор файлов, составляющих приложение или библиотеку.

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

1. Убедитесь, что вы еще не находитесь в каталоге рабочего пространства Angular. Например, если вы находитесь в рабочей области «Начало работы» из предыдущего упражнения, перейдите в ее родительскую директорию.
2. Выполните команду ng new , за которой следует имя приложения, как показано здесь:

ng new angular-tour-of-heroes 

ng new устанавливает необходимые пакеты npm и другие зависимости, которые требуются Angular. Это может занять несколько минут.

ng new также создает следующее рабочее пространство и файлы начального проекта:

• Новое рабочее пространство с корневым каталогом angular-tour-of-heroes .
• Начальный скелетный проект приложения в подкаталоге src/app .
• Связанные конфигурационные файлы

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

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

Перейдите в каталог рабочей области и запустите приложение.

cd angular-tour-of-heroes ng serve --open 

Команда ng serve :

• Создает приложение
• Запускает сервер разработки
• Следит за исходными файлами
• Пересоздает приложение по мере внесения изменений.

Флаг —open открывает браузер на http://localhost:4200 .

Вы должны увидеть запущенное приложение в браузере.

компоненты Angular¶

Страница, которую вы видите, — это оболочка приложения. Оболочка управляется компонентом Angular component с именем AppComponent .

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

Внесение изменений в приложение¶

Откройте проект в вашем любимом редакторе или IDE. Перейдите в каталог src/app для редактирования стартового приложения. В IDE найдите эти файлы, которые составляют AppComponent , который вы только что создали:

Files	Details
app.component.ts	Код класса компонента, написанный на TypeScript.
app.component.html	Шаблон компонента, написанный на HTML.
app.component.css	Частные CSS стили компонента.

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

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

Чтобы узнать больше о тестировании с помощью Angular, смотрите Тестирование.

Измените заголовок приложения¶

Откройте файл app.component.ts и измените значение свойства title на «Tour of Heroes».

title = 'Tour of Heroes'; 

Откройте app.component.html и удалите шаблон по умолчанию, который создал ng new . Замените его следующей строкой HTML.

h1>>h1> 

Двойные фигурные скобки — это синтаксис интерполяционного связывания в Angular. Эта интерполяционная привязка представляет значение свойства компонента title внутри тега заголовка HTML.

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

Добавить стили приложения¶

Большинство приложений стремятся к единообразному внешнему виду всего приложения. Для этого ng new создал пустой файл styles.css .

Поместите туда свои стили для всего приложения.

Откройте src/styles.css и добавьте в файл приведенный ниже код.

 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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

/* Application-wide Styles */ h1  color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; > h2, h3  color: #444; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; > body  margin: 2em; > body, input[type='text'], button  color: #333; font-family: Cambria, Georgia, serif; > button  background-color: #eee; border: none; border-radius: 4px; cursor: pointer; color: black; font-size: 1.2rem; padding: 1rem; margin-right: 1rem; margin-bottom: 1rem; margin-top: 1rem; > button:hover  background-color: black; color: white; > button:disabled  background-color: #eee; color: #aaa; cursor: auto; > /* everywhere else */ *  font-family: Arial, Helvetica, sans-serif; > 

Окончательный обзор кода¶

Вот файлы кода, рассмотренные на этой странице.

src/app/app.component.ts src/app/app.component.html src/styles.css (excerpt)

 1 2 3 4 5 6 7 8 9 10

import  Component > from '@angular/core'; @Component( selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], >) export class AppComponent  title = 'Tour of Heroes'; > 

Angular

Angular — это фреймворк от компании Google для создания продвинутых бесшовных (одностраничных) веб-приложений — SPA (Single Page Applications) — на языках программирования TypeScript, JavaScript, Dart.

Освойте профессию «Frontend-разработчик»

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

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

Чем Angular отличается от AngularJS

Angular — наследник AngularJS, написанного на JavaScript. Несмотря на похожие названия, это разные фреймворки. AngularJS еще называют версией 1.x. Фреймворк существует с 2009 года. Сейчас он находится в режиме long time support. Это значит, что его продолжают поддерживать, но новые возможности во фреймворк уже не добавляют. На AngularJS написано много legacy-кода.

Новая версия — Angular, он же Angular 2.x и далее. Фреймворк написан на TypeScript и несовместим с AngularJS. Его выпустили в 2016 году и с тех пор развивают. У Angular другая архитектура, а писать на нем можно и с TypeScript, и с JavaScript.

Профессия / 9 месяцев
Frontend-разработчик

Создавайте интерфейсы сервисов, которыми пользуются все

Устройство фреймворка Angular

Компоненты

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

Модули

Это тоже составные части приложения, но другие. Они управляют компонентами. Если компонент — это область приложения, то модуль отвечает за управление ею. Точка входа в приложение, код для анимации или навигации — это всё модули.

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

Формы

Большинство приложений на Angular — form-based, то есть основанные на формах. Форма — это структура, в которую пользователь вводит какие-либо данные, а потом отправляет их на сервер. Блок для написания комментария или для обратной связи — это форма.

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

Сервисы

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

Директивы

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

Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все

Что необходимо для работы с Angular

Node.js

Это платформа для работы с JavaScript и TypeScript. Подробнее о ней можно прочитать в нашей статье. Node.js нужна для установки и запуска Angular.

Npm

Это пакетный менеджер, который позволяет с помощью одной команды скачать нужный пакет данных. С его помощью обычно устанавливают фреймворки и библиотеки. Его пакеты также требуются для нормальной работы Angular. Обычно npm уже включен в Node.js.

TypeScript

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

Преимущества Angular

Обилие возможностей

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

Универсальное применение

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

Подробный style guide

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

Поддержка от Google

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

Недостатки Angular

Сложность в изучении

Angular считается одним из самых сложных фронтенд-фреймворков. Его может быть нелегко изучить с нуля самостоятельно. Кроме того, для начала работы потребуется знать не только «чистый» JavaScript, но и TypeScript, который на нем основан.

Отсутствие совместимости между старой и новой версиями

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

Как начать работать с Angular

Разработчики рекомендуют начать с установки консольного интерфейса Angular CLI. Его можно скачать и установить с помощью пакетного менеджера npm:

npm install -g @angular/cli

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

Например, команда «Создать новое приложение» будет выглядеть как:

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

Коротко о главном

• Angular — фреймворк от Google для создания SPA-приложений на TypeScript, JavaScript, Dart с открытым исходным кодом.
• AngularJS — предыдущая версия фреймворка, написанная на JavaScript. Отличается от Angular.
• Компоненты — большие составные части приложения, модули — управляющие компоненты, формы — основа для ввода данных, сервисы — узкоспециализированные компоненты, директивы — составные части приложения.
• Для работы с Angular необходимы Node.js, Npm, TypeScript.
• Преимущества Angular: обилие возможностей, универсальное применение, подробный style guide, поддержка от Google.
• Недостатки Angular: сложность в изучении, отсутствие совместимости между старой и новой версиями.
• Начать работу с Angular рекомендуется с установки Angular CLI.

Frontend-разработчик

Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.

Статьи по теме: