Это было просто прощание в 2018 году, когда Google объявил о выпуске Angular 7, всего через 6 месяцев после широко разрекламированного выпуска Angular 6.

Последняя версия angular прибыла с некоторыми существенными изменениями и новыми функциями. Однако вы можете смело предположить, что на этот раз ажиотаж в основном вызван улучшениями в платформе Angular Material 7 и Angular CLI 7.

В дополнение к этому, Google представил новые функции, такие как прокрутка, перетаскивание, подсказки CLI, Drop, Virtual и т. Д. Для существующей цепочки инструментов. Хотите узнать больше? Без лишних слов, давайте разберемся, что нового в Angular 7.

Шумиха вокруг Angular 7

Согласно плану выпуска Angular, они публикуют основной выпуск каждые 6 месяцев. Этот шаблон продолжился, и ng7 был выпущен 18 октября 2018 года. В этой версии команда Angular в основном работала над размером сборки и производительностью. И, продолжая недавнюю тенденцию по сравнению с предыдущими версиями, обновление теперь стало проще простого (и быстрее, чем когда-либо). Давайте прольем свет на новые функции, а также на изменения в инструментах ng7.

Подсказка CLI

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

Приведем здесь один пример. В более ранних версиях, если вы выполняли команду ng new или ng add, и внезапно вы поняли, что пропустили добавление маршрута. Тогда вам придется прервать процесс как можно раньше и перезапустить. Но в новой командной строке CLI вам не о чем беспокоиться.

Когда вы запускаете ng new, интерфейс командной строки автоматически предлагает do you want to add route? И процесс ждет, пока вы не выберете один из заданных параметров (y / N). После этого вы также можете выбрать формат таблицы стилей. Интерфейс командной строки позволит вам выбирать между CSS, SCSS, SAAS и LESS.

Вы также можете обработать эту конфигурацию в файле, просто добавив schematic.json с помощью схематического интерфейса командной строки.

Представление

Поскольку команда Angular сосредоточена на производительности, Angular 7 является самой производительной версией на сегодняшний день. Например, иногда вы можете по ошибке добавить полифил отражения метаданных. В обновлении ng7 команда ng специально обратилась к этому. Так что, если вы обновите свое приложение до ng 7, вам не о чем беспокоиться. Метаданные отражения будут автоматически удалены в процессе производства, но, как обычно, останутся в режиме JIT.

После создания производственной сборки вы всегда проверяете размер пакета? Забудьте об этом, в ng7 ваше приложение будет предупреждать, если предел размера пакета превысит 2 МБ, и вы получите сообщение об ошибке, если оно превысит 5 МБ, и вы также можете настроить эти ограничения размера в angular.json.

Угловой материал и CDK

Как фронтенд-разработчик, я предполагаю, что вы всегда в курсе того, как веб-сайт выглядит и воспринимается вашими пользователями. Так что, вероятно, Angular Material занимает первое место в вашем списке UI-фреймворков. В 2018 году материал Angular получил большое обновление. В ng7 угловатый материал имеет небольшую визуальную разницу. Чтобы пользовательский интерфейс оставался неизменным, после обновления angular-cli и angular-core вы можете запустить следующую команду для обновления материала angular

Давайте прольем свет на недавно представленные замечательные функции CDK.

Виртуальная прокрутка:

Предположим, у вас на сайте есть список из миллиона записей. Если вы загружаете список за раз и помещаете все в DOM в самом начале, ваш сайт будет сильно зависать. И это будет очень медленно для конечного пользователя. Итак, как вы решите эту проблему? Если вы используете ng7, то ответ прост - виртуальная прокрутка. С помощью виртуальной прокрутки ваша DOM загрузит только те записи, которые доступны в области просмотра. Так что вас не беспокоит, есть ли миллион записей или триллион. Ваше здоровье!

Чтобы использовать виртуальную прокрутку, сначала импортируйте ScrollingModule в app.module.ts

Затем добавьте следующий фрагмент кода в файлы HTML и TS соответственно.

Перетащите и отпустите:

Ng7 CDK полностью поддерживает функцию перетаскивания, и CDK также автоматически отображает оба массива (один - moveItemInArray, а другой - transferArrayItem).

Чтобы использовать функцию перетаскивания, сначала импортируйте DragDropModule в app.module.ts

Затем добавьте следующий фрагмент кода в файлы HTML и TS соответственно.

Чтобы узнать подробности реализации, нажмите здесь.

Переход с ng2 + на ng7

Обновление нг

Итак, вы рады обновить свое приложение с ng2 + до ng7? Вот краткое изложение того, как вы можете обновить свое приложение до ng7 за считанные минуты.

Сначала перейдите в каталог приложения Angular 6 (где находится package.json) и выполните следующую команду:

После этого вы должны увидеть следующее:

Вы можете проверить это через файл package.json.

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

Установка CDK

Во-первых, нам нужно установить пакет angular cdk и импортировать модуль DragDropModule. Установите модуль через npm:

После установки модуля запустите команду ng serve, чтобы проверить, правильно ли работает приложение. Вы можете получить следующую ошибку при выполнении команды ng serve

You seem not to be depending on “@angular/core” and/or “rxjs”. This is an error.

Чтобы исправить это, сначала запустите npm link, а затем команду ng serve.

Заключительные слова

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

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

Следите за обновлениями!

Первоначально опубликовано на logic-square.com.