Съдържание
- 01. Стартирайте проверка на версията
- 02. Инсталирайте Angular
- 03. Създайте скелет на проект
- 04. Диференциално натоварване на сбруята
- 05. ... и вижте резултатите
- 06. Хвърлете хайвер на уеб работник
- 07. Разгледайте кода
- 08. Настройте скеле
- 09. Не се притеснявайте от липсата на конструктор
- 10. Изпълнете малко изпълнение на компилация
- 11. ... и намерете изхода
- 12. Вземете се на работа
- 13. Разгледайте бръшлян
- 14. Опитайте модифицирана ng обработка
- 15. Насладете се на подобрена миграция
- 16. Изследвайте контрола на работното пространство
- 17. Ускорете процеса
- 18. Избягвайте ходещите мъртви
- 19. Погледнете дневника на промените
Angular 8 е най-новата версия на Angular на Google - една от най-добрите JavaScript рамки наоколо. В тази статия ще разгледаме особеностите на Angular 8 и ще ви покажем как да започнете. Първо, кратък преглед на случилото се с рамката до момента.
Въвеждането на Angular доведе до промяна на парадигмата в уеб разработването: докато повечето библиотеки се ограничиха до предоставяне на подкрепа на разработчици с относително ограничено архитектурно въздействие, екипът на разработчиците на Angular отиде в другата посока. Техният продукт ви принуждава да използвате специфична архитектура, като отклоненията варират от трудни до търговски безсмислени. Всъщност повечето Angular кодове преминават през сравнително сложна верига от инструменти за транслиране, преди някога да попадне в браузъра.
Поради огромния успех на Angular, както вътре, така и извън Google Inc, развитието като цяло се стабилизира. Това означава, че промените в кодовете са малко, докато полугодишните ъпгрейди са фокусирани върху адаптирането на рамката към промените в уеб браузъра.
В случая на Angular 8, например, се разполага нов компилатор на JavaScript (макар и все още експериментално). Той оптимизира генерирания код за съвместимост, за да бъде значително по-малък и по-бърз за сметка на по-старите браузъри. Освен това, поддръжката на Web Worker е интегрирана, за да увеличи способността за обработка на Angular. Накратко, има какво да се види - така че нека се потопим направо.
Ако предпочитате да проектирате сайт без код, опитайте един от тези лесни конструктори на уебсайтове. И за да направите нещата още по-гладки, направете правилната услуга за уеб хостинг.
01. Стартирайте проверка на версията
Веригата инструменти на Angular живее в средата NodeJS. Към момента на писането е необходим Node.js 10.9 или по-добър - ако попаднете на по-стара версия, посетете уеб сайта на Node.js и вземете надстройка. Кодът по-долу показва състоянието на версията на тази машина.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Инсталирайте Angular
Веригата инструменти на Angular се намира в помощната програма за команден ред с име ng. Може да се инсталира чрез добре познатия NPM.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng версия
Внимавайте да отговорите на въпроса, показан на изображението по-долу.
Извличането на информация за версията от инструмента е доста трудно - не само синтаксисът е уникален, но и изходът е многословен (вижте изображението по-долу).
03. Създайте скелет на проект
ng генерира ъгловото скеле за нас. В следващите стъпки искаме да добавим маршрутизация и да използваме Sass за CSS транпилация. Ако внедряването се провали по някаква причина, изпразнете работната директория и рестартирайте ng с права на суперпотребител.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng new workertest
04. Диференциално натоварване на сбруята
Новата версия на Angular оптимизира кода за съвместимост с обратна връзка за намалено въздействие - файл, наречен браузър списък ви позволява да решите кои браузъри да се поддържат. Отворете браузър списък и премахнете думата не пред IE 9 до IE11.
. . . > 0,5% последните 2 версии Firefox ESR не е мъртъв IE 9-11 # За поддръжка на IE 9-11 премахнете ‘not’.
05. ... и вижте резултатите
Поръчайте компилация на проекта, променете в папката за разпространение и изчистете ненужните картографски файлове.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Извикайте дървото, за да видите резултатите - ng създава множество версии на различни кодови файлове (вижте изображението по-долу).
06. Хвърлете хайвер на уеб работник
Работниците в мрежата позволяват на JavaScript да влезе в последната граница на родните приложения: масивна паралелна обработка на задачите. С Angular 8, уеб работник може да бъде създаден от комфорта на ng помощна програма на командния ред.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng генериране на web-worker myworker СЪЗДАЙ tsconfig.worker.json (212 байта) CREATE src / app / myworker.worker.ts (157 байта) АКТУАЛИЗИРАТЕ tsconfig.app.json (236 байта ) АКТУАЛИЗИРАНЕ angular.json (3640 байта)
07. Разгледайте кода
ngПродукцията на пръв поглед вероятно ще изглежда плашеща. Отваряне на файла src / app / myworker.worker.ts в избран редактор на код разкрива код, който трябва да знаете добре от WebWorker спецификация. По принцип работникът получава съобщения и ги обработва при необходимост.
/// справка lib = "webworker" /> addEventListener (’message’, ({data}) => {const response = `отговор на работника на $ {data}`; postMessage (response);});
08. Настройте скеле
Ъгловите приложения се състоят от компоненти. Изключването на нашия уеб работник е най-добре да се направи в AppComponent, който е разширен, за да включва слушател за OnInit събитие. Засега ще излъчва само информация за състоянието.
импортиране на {Component, OnInit} от ‘@ angular / core’; @Component ({..}}) Клас за експортиране AppComponent реализира OnInit {title = ’workertest’; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Не се притеснявайте от липсата на конструктор
Опитните разработчици на TypeScript се питат защо нашият код не използва конструктора, предоставен от езика за програмиране. Причината за това е тази ngOnInit е събитие от жизнения цикъл, което се задейства винаги, когато се осъществи инициализация - това не е необходимо да бъде свързано с извикване на клас.
10. Изпълнете малко изпълнение на компилация
Към този момент програмата е готова за стартиране. Ще го изпълним от сървъра вътре в ng, които могат да бъдат извикани чрез командата за обслужване. Чудесен аспект на този подход е, че програмата открива промени и прекомпилира проекта в движение.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Погледнете фигурата, за да видите това в действие на изображението по-долу.
11. ... и намерете изхода
ng сервирайте putputs въвежда адреса на своя локален уеб сървър, който обикновено е http: // localhost: 4200 /. Отворете уеб страницата и отворете инструментите за разработчици, за да видите изхода за състоянието. Имайте предвид това console.log извежда данни към конзолата на браузъра и оставя конзолата на екземпляра NodeJS недокосната.
12. Вземете се на работа
В този момент от време създаваме екземпляр на работника и му предоставяме съобщение. След това резултатите се показват в конзолата на браузъра.
if (typeof Worker! == ’undefined’) {// Създаване на нов const worker = new Worker (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (’страницата има съобщение: $ {data }’); }; worker.postMessage (‘здравей’); } else {console.log ("Няма поддръжка на работници"); }
13. Разгледайте бръшлян
Бъдещите версии на Angular ще използват по-усъвършенстван компилатор, което ще доведе до още по-малки изгледи. Докато продуктът все още не е завършен, скелет с активиран бръшлян може да бъде създаден чрез ng new ivy-project - enable-ivy. Друга възможност е да промените настройките на компилатора, както е показано във фрагмента.
"angularCompilerOptions": {"enableIvy": true}
Предупреждение: Бръшлянът води до невероятно намаляване на размера, но не е безплатен. Продуктът все още не се стабилизира, така че не се препоръчва използването му в продуктивна среда.
14. Опитайте модифицирана ng обработка
Angular’s ng инструментът на командния ред за известно време използва вътрешни скриптове за деца. Angular 8 увеличава антето, тъй като сега можете също да използвате това средство, за да стартирате свои собствени задачи, докато вашето приложение е сглобено и компилирано.
"архитект": {"изграждане": {"строител": "@ angular-devkit / build-angular: браузър",
Едно чисто приложение на ng скриптове включва директно качване на приложения в облачни услуги. Хранилището Git предоставя полезен скрипт, който качва работата ви в акаунт във Firebase.
15. Насладете се на подобрена миграция
Разработчиците, мигриращи от Angular 1.x, известен също като AngularJS, са имали справедлив дял от проблемите, с които навигаторът работи правилно в „комбинирани“ приложения. Новата унифицирана услуга за местоположение има за цел да направи този процес по-плавен.
16. Изследвайте контрола на работното пространство
Големите проекти се възползват от възможността да променят динамично структурата на работното пространство. Това става чрез новия API на Workspace, въведен в Angular 8.0 - фрагментът, придружаващ тази стъпка, осигурява бърз преглед на поведението.
async функция демонстрира () {const хост = работни пространства. createWorkspaceHost (нов NodeJsSyncHost ()); const работно пространство = изчаквайте работни пространства. readWorkspace (’path / to / workspace / directory /’, host); const project = workspace.projects. get (‘my-app’); const buildTarget = project.targets. get (’build’); buildTarget.options.optimization = true; изчаквайте workspaces.writeWorkspace (работно пространство, хост); }
17. Ускорете процеса
Изграждането на големи бази на JavaScript кодове става досадно. Бъдещите версии на AngularJS ще използват системата за изграждане на Bazel на Google, за да ускорят процеса - за съжаление, по време на писането тя не беше готова за праймтайм.
18. Избягвайте ходещите мъртви
Въпреки че Google полага изключително внимание да не нарушава кода, някои функции просто трябва да бъдат премахнати, тъй като вече не са необходими. Проверете този списък с амортизации, за да научите повече за функциите, които трябва да се избягват.
19. Погледнете дневника на промените
Както винаги, една статия никога не може да оправдае цялото издание. За щастие този дневник на промените предоставя подробен списък на всички промени - само в случай, че някога ви се прииска да проверите пулса на особено скъпа за вас функция.
Имате много файлове, готови за качване на вашия сайт? Архивирайте ги в най-надеждното облачно хранилище.
Тази статия първоначално е публикувана в списание за уеб дизайн Уеб дизайнер.
