Беше просто сбогом на 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.