Беше просто сбогом на 2018 г., когато Google обяви пускането на Angular 7, само 6 месеца след нашумелото пускане на Angular 6.

Най-новата версия на angular пристигна с някои значителни промени и нови функции. Можете обаче спокойно да предположите, че шумът този път се дължи главно на подобренията в платформата Angular Material 7 и в Angular CLI 7.

В допълнение към това Google въведе нови функции като превъртане, плъзгане, CLI подкани, пускане, виртуални и т.н. за съществуващата верига от инструменти. Вълнувате ли се да научите повече? Без повече шум, нека проучим какво е новото с Angular 7.

Hype на angular 7

Според плана за пускане на екипа на Angular, те публикуват голямо издание на всеки 6 месеца. Този модел продължи и ng7 беше пуснат на 18 октомври 2018 г. В тази версия екипът на Angular работи главно върху размера на компилацията и производителността. И продължавайки скорошната тенденция от предишни версии, надграждането вече е лесно (и по-бързо от всякога).] Нека хвърлим малко светлина върху новите функции, както и промените в инструментите на ng7.

CLI подкана

Екипът на Angular винаги се опитва да подобри инструментите за разработка и новите CLI функции не са изключение.

Да приемем един пример тук. С по-ранни версии, ако сте изпълнявали командата ng new или ng add и изведнъж сте осъзнали, че сте пропуснали да добавите маршрут. Тогава ще трябва да прекратите процеса възможно най-рано и да рестартирате. Но в новия CLI подкана не е нужно да се притеснявате за това.

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

Можете също да управлявате тази конфигурация във файл, като просто добавите schematic.json с помощта на схематичен CLI.

производителност

С фокуса на екипа на Angular върху производителността, Angular 7 е най-добре представящата се версия до момента. Например, понякога можете да добавите отразяващи метаданни polyfill по погрешка. В надстройката на ng7 екипът на ng специално обърна внимание на това. Така че, ако надстроите приложението си до ng 7, не е нужно да се притеснявате за това. Reflect-metadata ще бъдат премахнати автоматично в производството, но както обикновено остават в режим JIT.

След като направите производствена компилация, винаги ли проверявате размера на пакета? Забравете за това, в ng7 вашето приложение ще предупреди, ако ограничението за размер на пакета ще премине 2MB и ще получите грешка, ако премине 5MB и можете също да конфигурирате тези ограничения на размера в 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

Надграждане на ng

И така, вълнувате ли се да надстроите приложението си от 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.