От автора: как многие из вас уже знают, вышел Angular 6 RC2, а скоро будет выпущен и GA. По мере приближения даты релиза, многим из нас было интересно, какие новые функции будут введены, и какие преимущества они нам предлагают. Для начала этот релиз делает Angular легче, быстрее и проще. Разработчикам он должен понравиться тем, что он еще упрощает процесс разработки. Итак, в Angular 6 что нового?
Поддержка TypeScript 2.7+
Благодаря поддержке для 2.7, теперь нам будет намного проще писать объявления условного типа, объявления по умолчанию и строгую инициализацию класса. Для получения полной информации по TypeScript 2.7 перейдите по этой ссылке.
Элементы
Этот пакет в первую очередь предназначен для использования преимуществ веб-компонентов, поддерживаемых всеми современными браузерами (кроме Edge). Это позволит вам создать компонент Angular и опубликовать его как веб-компонент, который можно использовать на любой HTML-странице.
Преобразование компонента в пользовательский элемент обеспечивает простой способ создания динамического HTML-контента в приложении Angular.
Стабильный Angular Material с CDK ( Component Development Kit)
Первоначальная версия Angular Material2 была выпущена в марте 2016 года, но ей не хватало количества компонентов, стабильности и совместимости с последними версиями Angular. Теперь он более стабилен и совместим с Angular 6. Многие компоненты Angular Material2 построены на базе CDK Toolkit, который является инструментарием разработки Agnostic. В этом релизе CDK Toolkit стабилен, и разработчики могут использовать этот инструментарий для более простого создания своих собственных компонентов, поскольку в этом наборе инструментов уже содержится большинство часто используемых утилит для сборки компонентов.
Ivy Renderer
Ivy Renderer — это новый механизм рендеринга, который предназначен для обратной совместимости с существующим рендером и увеличения скорости рендеринга, он также оптимизирует размер финального пакета. Для Angular он не будет рендерером по умолчанию, но вы можете вручную включить его в параметрах компилятора. Я расскажу более подробно об Ivy в одном из следующих постов.
Компилятор Bazel
Bazel — это система сборки, используемая почти для всего программного обеспечения, созданного в Google. В этом релизе мы начнем поддержку компилятора Bazel. Когда вы компилируете код с помощью Bazel, вы перекомпилируете всю базу кода, но он компилируется только с необходимым кодом. Компилятор использует расширенное локальное и распределенное кэширование, оптимизированный анализ зависимостей и параллельное выполнение. Для получения более подробной информации перейдите по этой ссылке.
Дополние navigationSource и restoreState в NavigationStart
В настоящее время в NavigationStart нет способа узнать, было ли выполнено принудительное инициирование навигации или изменение местоположения. При использовании navigationSource можно идентифицировать источник навигации, например, действие прокрутки или изменение URL / URI. restoreState предоставит восстановленный идентификатор навигации, который приведет к текущей навигации. Эти два свойства помогают нам обрабатывать несколько вариантов использования при маршрутизации.
NgModelChange — теперь это событие выдается после того, как значение и валидность обновляются в элементе управлении. Раньше он выдавалось перед обновлением. Поскольку теперь для него будет доступно обновленное значение элемента управления, обработчик станет более мощным.
Элемент управления формы statusChanges — Angular 6 выдает событие «PENDING», когда мы вызываем AbstractControl markAsPending.
Улучшение валидаторов шаблонов форм — до Angular 6 валидаторы шаблонов не должны были содержать границ строки, т.е. ^ и / или & и / или $. Ранее валидатор использовался для добавления этих границ сторк к шаблону проверки автоматически без перекрестной проверки существования этих границ строк. Из-за этого, когда разработчик предоставлял границы строк в шаблоне валидатора Validations, возникали ошибки. Теперь валидаторы проверяют перед добавлением границ строки, это означает, что валидаторы будут работать как ожидалось с границами строк или без них.
Добавлено несколько валидаторов для метода массива FormBuilder — до Angular 6 у нас не было способа передать несколько валидаторов методу formBuilder.array, что сейчас реализовано.
Новый необязательный универсальный тип ElementRef. Этот дополнительный универсальный тип помогает получить оригинальный элемент заданного пользовательского Element, как ElementRef Type.
Функции, которые являются новыми в Angular CLI 1.7 и поддерживаются Angular 6
Поддержка Schematics. Schematics — это технология потока для современной разработки веб-приложений, которая может применять к вашему проекту преобразования, например, при создании нового компонента или обновлении код, чтобы исправить нарушение изменений в зависимостях. Или добавленнии новых параметров конфигурации или новой структуры в существующий проект. Это помогает создавать собственные scaffolding для приложения.
Обновление ng — Теперь у нас есть команда автоматического обновления Angular зависимостей приложений CLI. Все ваши @angular/* зависимости будут обновлены до последней стабильной версии, которая включает в себя все основные пакеты в ваших зависимостях и devDependencies, такие как rxjs, zone, typescript и т. д., а также сам CLI. Эта функция поможет сэкономить время при переходе на следующую стабильную версию, поскольку разработчику не требуется вручную идентифицировать и обновлять версии зависимостей одноранговых узлов.
Безопасность Service worker
Service worker- это скрипт, который запускается в веб-браузере. Он также управляет кэшированием приложения. Но иногда, например, при развертывании последней версии приложения нам может понадобиться деактивировать / удалить существующий Service worker. На данный момент нет прямого способа отключить его. Чтобы полностью реализовать эту потребность, данный новый релиз содержит файл скрипта security-worker.js, который будет частью производственного пакета — он, в свою очередь, помогает нам отменить регистрацию существующего Service worker.
App Budgets
Многие из нас сталкиваются с проблемами увеличения размера приложения, поскольку мы добавляем больше функций, несмотря на то, что устанавливаем некоторые пороговые уровни при запуске разработки приложений. Пока нет механизма, предупреждающего нас о растущем размере приложения. App Budgets — это функция в Angular CLI, которая позволяет устанавливать пороговые значения для размера пакетов. Мы сможем настроить сообщения / предупреждения, когда размер пакета будет превышать установленный порог.
Немного незначительных улучшений
Поддержка одиночных, многострочных и jsdoc комментариев в коде.
Добавление возможности встраивания ресурса в ngc — Когда angularCompilerOptions {enableResourceInlining: true}, мы заменяем все свойства templateUrl и styleUrls в @Component шаблоном / стилями.
Улучшение обмена сообщениями об ошибках с помощью NgIf при использовании элементов без шаблона.
Полный Angular 6 является отличным релизом с большим количеством интересных функций, которые ускоряют разработку, развертывание и упаковку. Однако, поскольку в реализации анимации и формах ngModel наблюдается значительное количество изменений, переход от Angular 5 к Angular 6 может быть немного сложным, но интересным.
Автор: Phani Kiran G
Источник: https://walkingtree.tech/
Редакция: Команда webformyself.