В то время как в сообществе фронтендов по-прежнему много шума вокруг Angular 2, ранее на этой неделе Google уже выпустил Angular 4. Google получил отрицательную обратную косую черту от разработчиков AngularJS, когда он перешел на Angular 2 с совершенно другой архитектурой без обратной совместимости с существующей структурой. Angular 4, с другой стороны, является улучшением по сравнению с angular 2 с небольшими критическими изменениями или без них, обеспечивая лучшую оптимизацию кода и некоторые интересные новые функции. Что ж, это облегчение для сообщества angular, которое все еще восстанавливается после радикального перехода Google с Angular 1 на Angular 2.
В этом новом выпуске команда angular представляет семантическое управление версиями: второстепенная версия выпускается каждый месяц с новыми функциями, а основная версия выпускается каждые шесть месяцев с минимальными критическими изменениями. Итак, мы можем ожидать следующего крупного обновления Angular 5 в конце этого года.
Почему не Angular 3?
Техническая причина, указанная Google, заключается в том, что последняя версия углового маршрутизатора имеет версию 3.3.0, которая не синхронизирована с другими модулями, которые имеют версию 2.3.0, и команда планирует выровнять имена версий среди модулей с Angular 4.
Что нового в Angular 4?
Меньше и быстрее
- Просмотр двигателя
Angular 4 имеет новый и оптимизированный движок просмотра. Angular принимает декларативные шаблоны, написанные пользователем, и компилирует их в JavaScript. В предыдущей версии сгенерированный код был намного больше. Новый механизм просмотра значительно улучшает этот этап компиляции, что приводит к уменьшению размера приложения по сравнению с предыдущими итерациями.
- Отдельный модуль анимации
Раньше анимация была частью основного модуля angular. В новом выпуске анимация отделяется от ядра в отдельном модуле. Это делает приложения, не требующие анимации, немного меньше, что снова является преимуществом для разработчиков.
Enhanced * ngIf
Директива * ngIf используется для условного отображения шаблона, который является частью более ранних версий. Теперь angular 4 поддерживает отображение альтернативного шаблона с помощью else.
<div *ngIf="show; else elseBlock">Text to show</div>
<ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
Улучшенный интерфейс командной строки
Больше всего мне нравится в angular его отличный инструмент CLI. Angulat cli основан на сборщике модулей webpack, который сегодня популярен в веб-сообществе. Он выполняет все этапы установки и настройки, позволяя разработчику быстро приступить к работе с существующим новым проектом, вместо того, чтобы тратить часы на настройку и сборку частей для запуска проекта. В angular cli представлены лучшие практики, настройка машинописного текста, конфигурация тестирования и настройки среды, что облегчает работу разработчика. Новый интерфейс командной строки также поддерживает установку пакетов через менеджер пакетов yarn. Все, что вам нужно сделать, это открыть терминал и ввести команду:
set --global packageManager=yarn
Конфигурация веб-пакета
Что ж, эта функция была доступна некоторое время, и не только для версии angular 4. Angular cli, построенный на веб-пакете, обеспечивает работу с черным ящиком, не открывая файл конфигурации веб-пакета. Невозможность настроить файл webpack и добавить собственные модули и библиотеки была преградой. Я считаю, что первые последователи Angular чувствуют мою боль. Однако в более поздних версиях angular cli вы можете просто запустить ng eject в каталоге вашего проекта, чтобы включить файл конфигурации webpack в вашем проекте angular.
Обновление до Angular 4
Вы можете выполнить следующие команды, чтобы обновить существующий проект angular 2 до angular 4.
iOS / Linux:
npm i @angular/{common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@next typescript@latest –S –E npm i @angular/compiler-cli@next — D -E
Windows:
npm i @angular/common@next @angular/compiler@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-browser@next @angular/platform-browser-dynamic@next @angular/platform-server@next @angular/router@next typescript@latest — S -E npm i @angular/compiler-cli@next — D -E
Команда Angular пообещала плавное и безболезненное обновление до новой версии angular с минимальными усилиями разработчика или без них.
Это захватывающее время для фронтенд-разработчика. Не могу дождаться, чтобы попробовать новые функции. Так вы попробовали Angular 4? Какие новые функции вам нравятся больше всего? Напишите в комментариях.
