Мазмун
- 01. Версияны текшерүүнү жүргүзүңүз
- 02. Бурчтук орнотуу
- 03. Долбоордун скелетин түзүңүз
- 04. Дифференциалдуу жүктөө
- 05. ... жана натыйжаларын көрө аласыз
- 06. Веб-кызматкердин жумурткасын ачуу
- 07. Кодду изилдеңиз
- 08. Тикенектерди орнотуңуз
- 09. Конструктордун жетишсиздигинен кабатыр болбоңуз
- 10. Кичинекей компиляция жүргүзүү
- 11. ... жана натыйжасын табуу
- 12. Жумушка кирүү
- 13. Айвиды изилдөө
- 14. Өзгөртүлгөн ng иштетип көрүңүз
- 15. Миграциянын жакшыртылышынан ырахат алыңыз
- 16. Жумуш мейкиндигин башкарууну изилдөө
- 17. Процессти тездетүү
- 18. Сөөктүн сөөгүнөн алыс болуңуз
- 19. Өзгөртүүлөрдүн журналын караңыз
Angular 8 - бул Google'дун бурчтук версиясынын акыркы версиясы - бул JavaScript алкагындагы эң мыкты алкактардын бири. Бул макалада биз Angular 8дин өзгөчөлүктөрүн карап чыгып, кантип баштоо керектигин көрсөтөбүз. Биринчиден, ушул кезге чейин алкакта эмне болгонун кыскача карап чыгыңыз.
Бурчтуктун киргизилиши вебдин өнүгүшүндөгү парадигманын өзгөрүшүнө алып келди: көпчүлүк китепканалар архитектуралык таасири салыштырмалуу чектелген иштеп чыгуучуларга колдоо көрсөтүү менен чектелсе, Angular компаниясынын иштеп чыгуучулар тобу башка багытты көздөштү. Алардын продуктусу белгилүү бир архитектураны колдонууга мажбурлайт, четтөөлөр кыйынчылыктан коммерциялык маанисизге чейин. Чындыгында, бурчтук коддун көпчүлүгү браузерге тийгенге чейин салыштырмалуу татаал транспиляция куралы аркылуу иштейт.
Google Incтин ичинде да, тышында да Angular компаниясынын эбегейсиз ийгилигинин аркасында өнүгүү жалпысынан турукташты. Бул коддун өзгөрүүлөрүнүн аз экендигин билдирет, ал эми жарым жылдык жаңыртуулар алкакты интернеттеги ландшафттын өзгөрүүсүнө ылайыкташтырууга багытталган.
Мисалы, Angular 8де жаңы JavaScript компилятору жайгаштырылган (эксперименталдык түрдө болсо дагы). Эски браузерлердин эсебинен түзүлгөн шайкештик кодун кыйла кичине жана тезирээк оптималдаштырат. Мындан тышкары, Веб 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's toolchain аталган буйрук сабы программасында жайгашкан нг. Аны белгилүү КЭУБ аркылуу орнотууга болот.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng версия
Төмөнкү сүрөттө көрсөтүлгөн суроого этият болуңуз.
Версия жөнүндө маалыматты куралдан алуу бир топ кыйынга турат - синтаксис уникалдуу гана болбостон, натыйжасы да кеңири (төмөндөгү сүрөттү караңыз).
03. Долбоордун скелетин түзүңүз
нг биз үчүн бурчтуу курулуштарды жаратат. Кийинки кадамдарда биз маршрутту кошуп, CSS трансплантациясы үчүн Sass колдонгубуз келет. Жайгаштыруу кандайдыр бир себептерден улам ишке ашпай калса, жумушчу каталогду бошотуп, кайра баштаңыз нг супер колдонуучунун укуктары менен.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng new workertest
04. Дифференциалдуу жүктөө
Бурчтуктун жаңы версиясы азайган таасир үчүн артка шайкештик кодун оптималдаштырат - деп аталган файл серепчилер тизмеси кайсы браузерлерди колдой тургандыгын чечүүгө мүмкүндүк берет. Ачуу серепчилер тизмеси жана сөздү алып салуу эмес 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 веб-жумушчу myworker түзүү CREATE tsconfig.worker.json (212 байт) CREATE src / app / myworker.worker.ts (157 байт) UPDATE tsconfig.app.json (236 байт) UPDATE angular.json (3640 байт)
07. Кодду изилдеңиз
нгЧыгышы, бир караганда, коркутуп-үркүткөндөй көрүнөт. Файл ачылууда src / app / myworker.worker.ts тандоо коду редакторунда сиз жакшы билишиңиз керек болгон кодду ачат WebWorker спецификация. Негизинен, жумушчу билдирүүлөрдү кабыл алат жана аларды зарылчылыкка жараша иштеп чыгат.
/// reference 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. Кичинекей компиляция жүргүзүү
Убакыттын ушул маалында программа иштөөгө даяр. Биз аны ичиндеги серверден аткарабыз нг, тейлөө буйругу аркылуу чалса болот. Бул ыкманын тыкан жагы, программа өзгөрүүлөрдү байкап, долбоорду тез арада компиляциялайт.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng service
Төмөндөгү сүрөттө муну иш жүзүндө көрүү үчүн сүрөттү карап чыгыңыз.
11. ... жана натыйжасын табуу
кызмат кылуу адатта жергиликтүү локалдык сервердин дарегин коет http: // localhost: 4200 /. Веб-баракчаны ачып, иштеп чыгуучунун куралдарын ачып, статустун чыгышын көрүңүз. Муну эсиңизден чыгарбаңыз console.log маалыматты браузердин консолуна чыгарып, NodeJS мисалынын консолун тийбестен калтырат.
12. Жумушка кирүү
Убакыттын ушул маалында биз жумушчунун мисалын түзүп, ага билдирүү беребиз. Анын натыйжалары браузердин консолунда көрсөтүлөт.
if (typeof Worker! == ’undefined’) {// Create new const worker = new Worker (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (’баракча билдирүү алды: $ {data }’); }; worker.postMessage ('салам'); } else {console.log ("Жумушчуларга колдоо жок"); }
13. Айвиды изилдөө
Келечектеги Angular нускалары жакшыртылган компиляторду колдонуп, андан да кичине көрүнүштөргө алып келет. Азырынча продукт бүтө элек болсо, чырмоок менен иштетилген скелет аркылуу урукталышы мүмкүн жаңы чырмоок-долбоор - иштетүү-чырмоок. Же болбосо, үзүндүдө көрсөтүлгөндөй, компилятордун орнотууларын өзгөртүңүз.
"angularCompilerOptions": {"enableIvy": true}
Эскертүү: Ivy укмуштай көлөмдүн кыскарышына алып келет, бирок бул бекер эмес. Продукт туруктуу боло элек, андыктан аны жемиштүү чөйрөдө колдонуу сунушталбайт.
14. Өзгөртүлгөн ng иштетип көрүңүз
Бурчтуу нг команда сабы куралы бир нече убакытка чейин баланын сценарийлерин колдонуп келген. Сиздин колдонмо чогултулган жана түзүлүп жатканда, сиз бурчтуу 8 бурчтуктун деңгээлин көтөрүп, ушул объектти колдонуп, өз милдеттериңизди аткара аласыз.
"архитектор": {"build": {"builder": "@ angular-devkit / build-angular: browser",
Бир тыкан колдонуу нг скрипттер тиркемелерди түздөн-түз булут кызматтарына жүктөөнү камтыйт. Git репозиторийинде Firebase аккаунтуна сиздин эмгегиңизди жүктөгөн пайдалуу скрипт бар.
15. Миграциянын жакшыртылышынан ырахат алыңыз
AngularJx деген ат менен белгилүү болгон Angular 1.xтен алыстап кеткен иштеп чыгуучулар, навигаторду 'айкалыштырылган' тиркемелерде туура иштешине байланыштуу көйгөйлөрдүн көпчүлүгүнө ээ болушту. Жаңы Бирдиктүү Жайгаштыруу Кызматы бул процессти жумшак кылууга багытталган.
16. Жумуш мейкиндигин башкарууну изилдөө
Ири долбоорлор иш мейкиндигинин структурасын динамикалык түрдө өзгөртүү мүмкүнчүлүгүнөн пайдаланышат. Бул бурчтук 8.0 киргизилген жаңы Workspace API аркылуу жүргүзүлөт - бул кадамды коштогон үзүндү жүрүм-турумга кыскача сереп берет.
async function demonstrate () {const host = жумушчу мейкиндиктер. createWorkspaceHost (жаңы NodeJsSyncHost ()); const жумушчу мейкиндиги = жумушчу орундарды күтөт. readWorkspace (’path / to / workspace / directory /’, хост); const project = жумушчу мейкиндик.projects. алуу ('менин колдонмо'); const buildTarget = project.targets. алуу ('куруу'); buildTarget.options.optimization = true; жумушчу орундарды күтүү.writeWorkspace (жумушчу мейкиндик, хост); }
17. Процессти тездетүү
Ири JavaScript код базаларын түзүү түйшүктүү болот. AngularJSдин келечектеги котормолорунда Google'дун Bazel куруу тутуму процессти тездетүү үчүн колдонулат - тилекке каршы, жазуу учурунда ал алгачкы убакытка даяр эмес болчу.
18. Сөөктүн сөөгүнөн алыс болуңуз
Google кодду бузбоого өзгөчө көңүл бурса дагы, айрым өзгөчөлүктөр керексиз болуп калгандыктан, аларды жок кылуу керек. Бул амортизациялар тизмесин текшериңиз, андан сактануу керек болгон өзгөчөлүктөр жөнүндө көбүрөөк маалымат алыңыз.
19. Өзгөртүүлөрдүн журналын караңыз
Адаттагыдай эле, бир макала эч качан бүтүндөй чыгарылышка адилеттик кыла албайт. Бактыга жараша, бул өзгөрүүлөр журналы бардык өзгөрүүлөрдүн деталдуу тизмесин камтыйт - сиз үчүн өзгөчө кымбат болгон бир өзгөчөлүктүн кагышын текшергиси келген учурларда.
Сайтыңызга жүктөөгө даяр болгон көптөгөн файлдар барбы? Булардын камын эң ишенимдүү булут сактагычта сактаңыз.
Бул макала алгач чыгармачыл веб-дизайн журналында жарыяланган Веб дизайнер.
