Задаволены
- 01. Запусціце праверку версіі
- 02. Усталюйце Angular
- 03. Стварыце каркас праекта
- 04. Дыферэнцыяльная нагрузка джгутоў
- 05. ... і паглядзіце вынікі
- 06. Ікру сеткавага работніка
- 07. Даследуйце код
- 08. Усталяваць рыштаванні
- 09. Не хвалюйцеся з-за адсутнасці канструктара
- 10. Выканайце невялікі прагон кампіляцыі
- 11. ... і знайсці выхад
- 12. Прыступайце да працы
- 13. Даследуйце Плюшч
- 14. Паспрабуйце мадыфікаваную апрацоўку нг
- 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 знаходзіцца ў службовай праграме каманднага радка з імем нг. Яго можна ўсталяваць праз вядомы NPM.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng версія
Будзьце асцярожныя, адкажыце на пытанне, паказанае на малюнку ніжэй.
Дастаць інфармацыю пра версію з інструмента даволі складана - не толькі сінтаксіс унікальны, але і выхад таксама шматслоўны (гл. Малюнак ніжэй).
03. Стварыце каркас праекта
нг стварае для нас вуглавыя рыштаванні. На наступных этапах мы хочам дадаць маршрутызацыю і выкарыстоўваць Sass для трансляцыі CSS. Калі па нейкай прычыне разгортванне не атрымалася, ачысціце працоўны каталог і перазапусціце нг з правамі суперпользователя.
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
Выклічце дрэва, каб убачыць вынікі - нг стварае некалькі версій розных файлаў кода (гл. малюнак ніжэй).
06. Ікру сеткавага работніка
Работнікі Інтэрнэту дазваляюць JavaScript увайсці ў апошні рубеж натыўных прыкладанняў: масавая паралельная апрацоўка задач. З Angular 8 можна стварыць сеткавага працаўніка, не выходзячы з нг ўтыліта каманднага радка.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng генераваць web-worker myworker СТВАРЫЦЬ tsconfig.worker.json (212 байт) СТВАРЫЦЬ src / app / myworker.worker.ts (157 байт) АБНАЎЛЕННЕ tsconfig.app.json (236 байт ) АБНОЎЛЕННЕ angular.json (3640 байт)
07. Даследуйце код
нгНа першы погляд прадукцыя можа выглядаць палохалай. Адкрыццё файла src / app / myworker.worker.ts у абраным рэдактары кодаў раскрываецца код, які вы павінны добра ведаць з WebWorker спецыфікацыя. У прынцыпе, рабочы атрымлівае паведамленні і апрацоўвае іх па меры неабходнасці.
/// спасылка lib = "webworker" /> addEventListener ('паведамленне', ({дадзеныя}) => {const response = `адказ работніка на $ {data}`; postMessage (адказ);});
08. Усталяваць рыштаванні
Вуглавыя дадаткі складаюцца з кампанентаў. Звальненне нашага сеткавага работніка лепш рабіць унутры AppComponent, які пашыраны, каб уключыць слухача для OnInit падзея. У цяперашні час ён будзе выдаваць толькі інфармацыю аб стане.
імпартаваць {Component, OnInit} з ’@ angular / core’; @Component ({..}}) Клас экспарту AppComponent рэалізуе OnInit {title = 'workertest'; ngOnInit () {console.log ("Кампанент прыкладання: OnInit ()"); }}
09. Не хвалюйцеся з-за адсутнасці канструктара
Дасведчаныя распрацоўшчыкі TypeScript задаюць сабе пытанне, чаму наш код не выкарыстоўвае канструктар, прадастаўлены мовай праграмавання. Прычына таму ў гэтым ngOnInit з'яўляецца падзеяй жыццёвага цыкла, якая запускаецца кожны раз, калі адбываецца падзея ініцыялізацыі - гэта не трэба суадносіць з выклікам класа.
10. Выканайце невялікі прагон кампіляцыі
На гэты момант праграма гатовая да запуску. Мы будзем выконваць яго з сервера ўнутры нг, які можна выклікаць з дапамогай каманды serve. Акуратным аспектам гэтага падыходу з'яўляецца тое, што праграма выяўляе змены і перакампілюе праект на хаду.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Зірніце на малюнак, каб убачыць гэта ў дзеянні на малюнку ніжэй.
11. ... і знайсці выхад
нг служыць putput уводзіць адрас свайго лакальнага вэб-сервера, які звычайна з'яўляецца 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. Паспрабуйце мадыфікаваную апрацоўку нг
Вуглавы нг Інструмент каманднага радка некаторы час выкарыстоўваў даччыныя сцэнарыі ўнутры. Вуглавыя 8 павялічваюць антэну ў тым, што зараз вы можаце таксама выкарыстоўваць гэты сродак для запуску ўласных задач, калі ваша прыкладанне збіраецца і кампілюецца.
"архітэктар": {"build": {"builder": "@ angular-devkit / build-angular: browser",
Адно акуратнае ўжыванне нг сцэнарыі прадугледжвае непасрэдную загрузку прыкладанняў у хмарныя сэрвісы. У сховішчы Git ёсць карысны сцэнар, які загружае вашу працу на ўліковы запіс Firebase.
15. Атрымлівайце асалоду ад палепшанай міграцыі
Распрацоўшчыкі, якія пераходзяць з Angular 1.x, таксама вядомага як AngularJS, мелі немалую колькасць праблем, звязаных з тым, каб навігатар працаваў прама ў камбінаваных дадатках. Новая ўніфікаваная служба вызначэння месцазнаходжання імкнецца зрабіць гэты працэс больш гладкім.
16. Даследуйце кіраванне рабочай прасторай
Буйныя праекты атрымліваюць выгаду ад магчымасці дынамічнага змены структуры працоўнай прасторы. Гэта робіцца з дапамогай новага API Workspace, уведзенага ў Angular 8.0 - фрагмент, які суправаджае гэты крок, забяспечвае хуткі агляд паводзін.
асінхронная функцыя demonstrate () {const host = працоўныя прасторы. createWorkspaceHost (новы NodeJsSyncHost ()); const працоўная прастора = чакаць працоўныя прасторы. readWorkspace (’шлях / да / працоўная прастора / каталог /’, хост); const project = workspace.projects. get ('my-app'); const buildTarget = project.targets. атрымаць (‘пабудаваць’); buildTarget.options.optimization = праўда; чакаць workspaces.writeWorkspace (рабочая вобласць, хост); }
17. Паскарэнне працэсу
Стварэнне вялікіх баз кодаў JavaScript становіцца стомным. Будучыя версіі AngularJS будуць выкарыстоўваць сістэму зборкі Bazel ад Google для паскарэння працэсу - на жаль, на момант напісання артыкула ён не быў гатовы да прайм-тайму.
18. Пазбягайце хадзячых мерцвякоў
Нягледзячы на тое, што Google вельмі стараецца не зламаць код, некаторыя функцыі проста трэба выдаліць, бо яны больш не патрэбныя. Праверце гэты спіс амартызацый, каб даведацца больш пра асаблівасці, якіх варта пазбягаць.
19. Паглядзіце журнал змен
Як заўсёды, адзін артыкул ніколі не можа апраўдаць увесь выпуск. На шчасце, гэты часопіс змяненняў змяшчае падрабязны спіс усіх змен - на той выпадак, калі вам захочацца праверыць пульс асабліва дарагой вам функцыі.
Ёсць шмат файлаў, гатовых для загрузкі на ваш сайт? Рэзервовае капіраванне іх у самым надзейным воблачным сховішчы.
Гэты артыкул быў першапачаткова апублікаваны ў часопісе творчага вэб-дызайну Вэб-дызайнер.
