Наш мир постоянно развивается, и чтобы не отставать от него, сообщество Angular всегда стремится предоставлять новые функции. Это гарантирует, что ваши приложения не останутся позади. 7 февраля 2020 года Angular выпустил замечательную новую версию Angular, то есть Angular 9. Итак, если вы являетесь энтузиастом Angular и хотите узнать, что предлагает Angular 9, то эта статья «Что нового в Angular 9» определенно вам понравится. помочь утолить жажду.
Прежде чем двигаться дальше, взгляните на все, что обсуждалось здесь:
- Понимание версий Angular
- Обновить пути
- Поддерживаемые версии
- Что нового в Angular 9?
- Угловой9 Плющ
- Преимущества использования Айви
- АОТ и Айви
- Плющ и библиотеки
- Что такое АОТ?
- В чем разница между AOT и JIT?
- Работа АОТ?
- Этапы компиляции
Понимание версий Angular
Версия Angular относится к уровню изменений, предлагаемых выпуском, который фактически помогает пользователям понять, что происходит при обновлении до новой версии. Номера версий, которые вы видите в Angular, состоят из трех частей, то есть major.minor.patch.
Основные выпуски обычно содержат заметное количество новых функций, тогда как второстепенные выпуски содержат небольшие новые функции и полностью обратно совместимы. Выпуски исправлений чаще всего представляют собой исправления ошибок с очень низким риском.
Обновить пути
Пути обновления Angular зависят от двух факторов: обновляете ли вы в рамках одного и того же основного выпуска или от одного основного выпуска к другому.
- При обновлении в рамках одного и того же основного выпуска промежуточные выпуски могут быть опущены, и вы можете напрямую выполнить обновление до последнего дополнительного выпуска.
- При обновлении с одного основного выпуска на другой Angular рекомендует не пропускать промежуточные основные выпуски.
Поддерживаемые версии
Версии 4x, 5x и 6x больше не поддерживаются. Однако Angular 7x будет поддерживаться до 18 апреля 2020 года, тогда как версия 8x будет поддерживаться до 20 ноября 2020 года. >.
Что нового в Angular 9?
Angular 9 имеет ряд новых изменений, а именно:
- Компиляция приложений с помощью Ivy по умолчанию используется в Angular 9.
- Ваше приложение Angular скомпилировано с опережением времени (AOT). Это означает, что компилятор AOT Angular скомпилирует все HTML и TypeScript, присутствующие в вашем коде, в JavaScript до того, как ваш браузер загрузит и запустит его. Это преобразование происходит во время самого процесса сборки, а также включает проверку типов.
- Angular 9 требует TypeScript 3.7. Любые более ранние версии не поддерживаются
- tslib или библиотека времени выполнения TypeScript теперь стали взаимозависимыми, а не прямыми. Раньше эта библиотека устанавливалась автоматически, но теперь вам придется явно добавить ее с помощью npm или yarn.
Угловой 9 Плющ
Механизм компиляции и рендеринга Angular 9 известен как Ivy. Более старые версии Angular использовали View Engine. Размер пакета, созданного View Engine, очень велик, но с Ivy этот пакет значительно уменьшился, что помогло Angular решить проблемы с пакетами.
Например, простейшая программа Hello World весила около 36 КБ, что довольно много для простой программы Hello World. Итак, команда Angular решила, что они сохранят пороговое значение 10 КБ. Это было названо порогом пирога, потому что глава этой команды решил отдать команде весь пирог, если они уменьшат размер пакета до менее 10 КБ. Команде удалось невероятно уменьшить размер пакета до 7,3 КБ с уменьшенной версией Ivy и даже до 2,7 КБ с версией Ivy Compressed. Это действительно большое достижение, и они заслужили весь торт!
Преимущества использования Ivy
- Меньший размер пакета
- Очень полезно, когда дело доходит до отладки
- Обеспечивает более быструю компиляцию
Как Ivy производит пакет меньшего размера?
Чтобы понять, как Ivy уменьшает размер пакета, вам сначала нужно понять, как работает View Engine. Когда вы компилируете любой из ваших компонентов с помощью View Engine, скажем, например, example.component, вы в основном получаете два файла JavaScript. Это файл example.component.js, который состоит из скомпилированного кода TypeScript, и файл example.component.ngfactory.js, который является статическим представлением кода шаблона. Итак, здесь будет сопоставление этих двух файлов, что требует гораздо больше времени на сборку.
Итак, команда Angular решила, что второй файл, то есть файл .ngfactory.js, можно удалить, просто добавив код шаблона в сам код JavaScript. Ivy использует вызовы функций, а не перебирает каждый элемент, как в View Engine.
Полезно при отладке
С Angular 9 вам не нужно будет выполнять отладку через фреймворк, вы можете делать это на самом компоненте, что поможет вам мгновенно отлаживать свой код.
Быстрая компиляция
Раньше, когда вы использовали команду ng build, все приложение перекомпилировалось. Это произошло потому, что компоненты Angular знали обо всех своих зависимостях.
Например, если в вашем приложении есть компонент, содержащий *ngIf, компонент также будет знать, что нужно этому *ngIf для его компиляции. Поэтому, если вы вносите изменения в любую из зависимостей *ngIf, все компоненты, содержащие этот *ngIf, необходимо перекомпилировать. В результате команда придумала принцип локальности, который привел к компиляции в один файл. Компонентам, которые содержат *ngIf, на самом деле не нужно знать его зависимости. Таким образом, в этом случае, если какой-то компонент будет перекомпилирован, для перекомпиляции больше ничего не потребуется, что положит конец глобальной перекомпиляции. Ivy вызывает конструктор *ngIf, который знает его точные зависимости.
АОТ и Айви
AOT вместе с Ivy ускоряет создание приложений. Чтобы активировать AOT для своего проекта, откройте файл angular.json и установите для параметра aot значение правда.
Плющ и библиотеки
Вы можете создавать приложения Ivy с библиотеками компилятора View Engine, используя ngcc или компилятор совместимости с Angular. Чтобы эффективно создавать свои приложения, вам придется запускать ngcc после каждой установки сторонних пакетов. Для этого вставьте скрипт в файл package.json следующим образом:
Каждый раз, когда вы устанавливаете новый модуль, будет выполняться сценарий после установки.
ПРИМЕЧАНИЕ.Если вы устанавливаете несколько библиотек подряд, постустановка может быть медленнее, чем позволить Angular CLI запускать ngcc в сборках.
Что такое АОТ?
Как упоминалось ранее, компилятор Angular AOT компилирует ваш код HTML и TypeScript в JavaScript до того, как браузер загрузит и выполнит его. Вот несколько причин, по которым вы должны использовать компилятор AOT:
- Когда вы используете AOT, рендеринг становится быстрее. Это связано с тем, что браузер может загрузить предварительно скомпилированную версию вашего проекта и загрузить исполняемый код. Это помогает приложению мгновенно отображать изображение без необходимости предварительной компиляции кода.
- Компилятор AOT будет встраивать весь внешний HTML и CSS в приложения JavaScript, что, в свою очередь, устраняет дискретные запросы ajax для этих исходных файлов.
- Когда приложения уже скомпилированы, нет необходимости загружать компилятор Angular. Это помогает уменьшить размер загружаемого фреймворка Angular, поскольку размер компилятора составляет половину размера самого Angular.
- Компилятор Angular AOT поможет вам найти ошибки шаблона во время самого процесса сборки.
- Сокращение атак путем внедрения, поскольку HTML-шаблоны предварительно компилируются в JavaScript до того, как они будут обработаны на стороне клиента, что обеспечивает более высокий уровень безопасности.
В чем разница между JIT и AOT?
- AOT загружает приложение намного быстрее, чем компилятор JIT, потому что JIT компилирует приложение во время выполнения.
- AOT вообще не должен загружать компилятор, в отличие от JIT-компилятора.
- Размер пакета, созданного JIT, будет намного больше, поскольку он также содержит код компилятора.
- В случае AOT ошибки привязки шаблона могут быть обнаружены во время самой сборки, в отличие от JIT, где ошибки шаблона обнаруживаются во время отображения приложения.
Использование АОТ
Когда вы используете ng serve или ng build, в дело вступает JIT-компилятор. Чтобы использовать компилятор AOT, вы можете использовать те же команды с расширением -aot следующим образом:
- ng serve -aot // для создания и обслуживания
- ng build -aot // для сборки
Работа АОТ
AOT интерпретирует приложение, используя метаданные, указанные в @Component, декораторах @Input или в конструкторах. Компилятор AOT возьмет все метаданные, а затем сгенерирует для них фабрику. Например, если у вас есть компонент следующим образом:
Компилятор Angular AOT извлечет все метаданные DashboardComponent один раз, а затем создаст фабрику. Всякий раз, когда необходимо создать экземпляр этого класса, компилятор AOT будет вызывать фабрику, которая создаст визуальный элемент. Это будет связано с новым экземпляром класса целевого компонента с его внедренной зависимостью.
Этапы компиляции
Приложения компилируются компилятором AOT в три этапа:
- Анализ кода
На этом этапе сборщик AOT соберет метаданные, проанализирует синтаксис и представит его наилучшим образом. Любая ошибка в синтаксисе метаданных будет записана, и интерпретация метаданных не будет - Генерация кода
Здесь собранные метаданные будут интерпретированы StaticReflector компилятора, а также еще раз проверит правильность метаданных. Если есть какие-либо нарушения, будет выброшена ошибка - Проверка типов шаблонов
Это необязательный этап, на котором компилятор шаблонов Angulars использует компилятор TypeScript для проверки правильности выражений привязки в шаблонах. Если вы хотите включить это, вы можете установить для параметра конфигурации fullTemplateTypeCheck значение true, как показано ниже:
Если вы ищете обновление Angular, перейдите по следующей ссылке: Путь обновления Angular
На этом мы подошли к концу этой статьи об AngularJS Bootstrap. Если вы хотите прочитать больше статей о самых популярных на рынке технологиях, таких как искусственный интеллект, Python, этический взлом, вы можете обратиться к официальному сайту Edureka.
Обратите внимание на другие статьи из этой серии, в которых объясняются различные другие аспекты веб-разработки.
7. Анимация приложений AngularJS с помощью директивы ngAnimate
12. Создание CRUD-приложения с использованием Node.js и MySQL
13. Сборка CRUD-приложения с использованием Node.JS и MongoDB
Первоначально опубликовано на https://www.edureka.co 14 февраля 2020 г.
