Բովանդակություն
- 01. Գործարկել տարբերակի ստուգում
- 02. Տեղադրեք անկյունային
- 03. Ստեղծեք ծրագրի կմախք
- 04. Ամրակման դիֆերենցիալ բեռնում
- 05. ... և տես արդյունքները
- 06. Ձվադրեք վեբ աշխատող
- 07. Ուսումնասիրեք ծածկագիրը
- 08. Տեղադրեք փայտամած
- 09. Մի անհանգստացեք կոնստրուկտորի բացակայության համար
- 10. Կատարել կոմպիլյացիայի փոքր վազք
- 11. ... և գտնել արդյունքը
- 12. Գործի անցեք
- 13. Ուսումնասիրեք Այվին
- 14. Փորձեք փոփոխված նգ մշակումը
- 15. Վայելեք բարելավված միգրացիան
- 16. Ուսումնասիրեք աշխատանքային տարածքի վերահսկողությունը
- 17. Արագացնել գործընթացը
- 18. Խուսափեք մահացած քայլելուց
- 19. Նայեք փոփոխությունների մատյանին
Angular 8-ը Google- ի Angular- ի վերջին տարբերակն է `շրջապատող լավագույն JavaScript շրջանակներից մեկը: Այս հոդվածում մենք կներկայացնենք այն, ինչը հատուկ է անկյունային 8-ի համար, և ձեզ ցույց կտանք, թե ինչպես սկսել: Նախ ՝ համառոտ հայացք նետել այն ամենին, ինչ կատարվել է մինչ այժմ շրջանակի հետ
Angular- ի ներդրումը հանգեցրեց ոստայնի զարգացման պարադիգմային փոփոխության. Չնայած գրադարանների մեծ մասը սահմանափակվում էր համեմատաբար սահմանափակ ճարտարապետական ազդեցություն ունեցող մշակողներին աջակցություն ցուցաբերելով, Angular- ի մշակողների թիմը գնաց այլ ուղղությամբ: Նրանց արտադրանքը ձեզ ստիպում է օգտագործել որոշակի ճարտարապետություն ՝ շեղումներից ՝ սկսած դժվարից մինչև կոմերցիոն անիմաստ: Իրականում, անկյունային կոդերի մեծ մասը անցնում է համեմատաբար բարդ տրանսֆիլյացիայի գործիքների միջով, նախքան դրանք երբևէ հարվածեն զննարկչին:
Angular- ի հսկայական հաջողության շնորհիվ, ինչպես Google Inc- ի ներսում, այնպես էլ դրանից դուրս, զարգացումը, մեծ հաշվով, կայունացել է: Սա նշանակում է, որ կոդերի կոտրման փոփոխությունները քիչ են, մինչդեռ կիսամյակային արդիականացումները կենտրոնացած են ցանցի զննման լանդշաֆտի փոփոխություններին հարմարեցնելու վրա:
Օրինակ, անկյունային 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- ի գործիքագիծը տեղակայված է հրամանի տողի անվամբ նգ, Այն կարող է տեղադրվել հայտնի NPM- ի միջոցով:
tamhan @ TAMHAN18: ~ $ sudo npm տեղադրել - g @ angular / cli tamhan @ TAMHAN18: ~ $ նգ տարբերակ
Beգուշացեք պատասխանել ստորև նկարում ներկայացված հարցին:
Տարբերակի մասին տեղեկատվությունը գործիքից դուրս բերելը բավականին բարդ է. Շարահյուսությունը ոչ միայն եզակի է, այլ արդյունքը նաև խոսուն է (տես ստորև նկարը):
03. Ստեղծեք ծրագրի կմախք
նգ առաջացնում է անկյունային փայտամածը մեզ համար: Հաջորդ քայլերում մենք ուզում ենք ավելացնել երթուղայնացում և օգտագործել Sass- ը CSS- ի փոխակերպման համար: Եթե տեղակայումը ինչ-ինչ պատճառներով ձախողվի, դատարկեք աշխատանքային գրացուցակը և վերագործարկեք նգ գերօգտագործողի իրավունքներով:
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng նոր աշխատանքային փորձ
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- ին մուտք գործել բնիկ կիրառությունների վերջին սահման ՝ առաջադրանքների զանգվածաբար զուգահեռ մշակում: Անկյունային 8-ի միջոցով վեբ աշխատողը կարող է ստեղծվել հենց դրա հարմարավետությունից նգ հրամանի տողի օգտակարություն:
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng առաջացնում է վեբ աշխատող myworker ՍՏԵ tsconfig.worker.json (212 բայթ) ՍՏԵ src / app / myworker.worker.ts (157 բայթ) UPDATE tsconfig.app.json (236 բայթ) ) UPDATE angular.json (3640 բայթ)
07. Ուսումնասիրեք ծածկագիրը
նգԵլքը, ամենայն հավանականությամբ, առաջին հայացքից վախեցնող է թվում: Ֆայլը բացելը src / հավելված / myworker.worker.ts կոդի ընտրությամբ խմբագիրն է բացահայտում այն կոդ, որը դուք պետք է լավ իմանաք դրանցից WebWorker հստակեցում Սկզբունքորեն, աշխատողը ստանում է հաղորդագրություններ և մշակում դրանք ըստ անհրաժեշտության:
/// հղում lib = "վեբ աշխատող" /> addEventListener ('հաղորդագրություն', ({տվյալներ}) => {հաստատման պատասխան = "աշխատողի պատասխան $ {տվյալների}"; postMessage (պատասխան);});
08. Տեղադրեք փայտամած
Անկյունային կիրառությունները բաղկացած են բաղադրիչներից: Մեր վեբ աշխատակցին աշխատանքից հեռացնելը լավագույնս կատարվում է ներսում AppComponent, որն ընդլայնվում է ՝ ներառելով լսարանի համար լսող OnInit- ը իրադարձություն Առայժմ այն միայն արտանետելու է կարգավիճակի վերաբերյալ տեղեկատվություն:
ներմուծել {Component, OnInit} '' @ angular / core '- ից; @Component ({...}) Արտահանման դաս AppComponent- ը իրականացնում է OnInit {title = 'workertest'; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Մի անհանգստացեք կոնստրուկտորի բացակայության համար
TypeScript- ի փորձառու մշակողները իրենց հարց են տալիս, թե ինչու մեր ծածկագիրը չի օգտագործում ծրագրավորման լեզվի կողմից տրամադրված կոնստրուկտորը: Դրա պատճառն այն է, որ ngOnInit- ը կյանքի ցիկլի իրադարձություն է, որը կրակվում է ամեն անգամ, երբ տեղի է ունենում սկզբնականացման իրադարձություն - դա կարիք չունի փոխկապակցված լինել դասի կոչման հետ:
10. Կատարել կոմպիլյացիայի փոքր վազք
Inամանակի այս պահին ծրագիրը պատրաստ է գործարկման: Մենք դա կկատարենք սերվերից ՝ ներսից նգ, որը կարելի է կանչել serve հրամանի միջոցով: Այս մոտեցման կոկիկ ասպեկտը այն է, որ ծրագիրը հայտնաբերում է փոփոխությունները և վերակազմավորում նախագիծը թռիչքի ժամանակ:
tamhan @ TAMHAN18: ang / angularspace / workertest $ sudo ng ծառայել
Նայեք նկարին ՝ սա գործողության մեջ տեսնելու համար ստորև ներկայացված նկարում:
11. ... և գտնել արդյունքը
ng ծառայել putputs- ը իր տեղական վեբ սերվերի հասցեն, որը սովորաբար լինում է http: // localhost: 4200 /, Բացեք վեբ էջը և բացեք մշակողի գործիքները ՝ տեսնելու կարգավիճակի արդյունքը: Հիշեք, որ մխիթարել. բլոգ տվյալները դուրս է բերում զննարկչի մխիթարիչ և թողնում է NodeJS ատյանի վահանակը անձեռնմխելի:
12. Գործի անցեք
Inամանակի այս պահին մենք ստեղծում ենք աշխատողի օրինակ և տրամադրում ենք նրան հաղորդագրություն: Դրանից հետո դրա արդյունքները ցուցադրվում են զննարկիչի վահանակում:
if (typeof Worker! == 'undefined') {// Ստեղծեք նոր աշխատող աշխատող = նոր աշխատող ('./ myworker.worker', {type: 'module'}); working.onmessage = ({data}) => {console.log (’էջը ստացել է հաղորդագրություն ՝ $ {data }’); }; աշխատող. postMessage ('բարև'); } else {console.log («Ոչ մի աշխատողի աջակցություն չկա»); }
13. Ուսումնասիրեք Այվին
Angular- ի ապագա տարբերակները կօգտագործեն ավելի առաջադեմ կազմող, ինչը կհանգեցնի նույնիսկ ավելի փոքր դիտումների: Չնայած արտադրանքը դեռ ավարտված չէ, այն կարող է ձվադրվել բաղեղի հնարավորություն ունեցող կմախք նոր ivy- նախագիծ - envy-ivy, Այլընտրանքորեն փոխեք կազմողի կարգավորումները, ինչպես ցույց է տրված հատվածում:
"angularCompilerOptions": {"enableIvy": true}
Նախազգուշացման խոսք. Ivy- ն բերում է զարմանալի չափերի կրճատման, բայց դա անվճար չէ: Ապրանքը դեռ պետք է կայունանա, ուստի խորհուրդ չի տրվում օգտագործել այն արտադրական միջավայրում:
14. Փորձեք փոփոխված նգ մշակումը
Angular’s- ը նգ հրամանի տողի գործիքը որոշ ժամանակ օգտագործում էր մանկական գրերը ներքին կարգով: Անկյունային 8-ով ավելի, քան այն բանի համար, որ այժմ կարող եք նաև օգտագործել այս հնարավորությունը `ձեր սեփական առաջադրանքները գործարկելու համար, քանի որ ձեր դիմումը հավաքվում և կազմվում է:
"ճարտարապետ": {"կառուցել": {"կառուցող": "@ angular-devkit / build-angular: զննարկիչ",
Մեկ կոկիկ կիրառումը նգ սցենարները ենթադրում են ծրագրերի ուղղակիորեն վերբեռնում ամպային ծառայություններում: Git պահոցը տրամադրում է օգտակար սցենար, որը վերբեռնում է ձեր աշխատանքը Firebase հաշվում:
15. Վայելեք բարելավված միգրացիան
Angular 1.x- ից հեռու գտնվող ծրագրավորողները, որոնք հայտնի են նաև որպես AngularJS, ունեցել են բավականին մեծ խնդիրներ, որոնք ստիպում են նավիգատոր աշխատել ճիշտ «համակցված» ծրագրերում: Տեղադրության նոր միասնական ծառայությունը նպատակ ունի սահուն դարձնել այս գործընթացը:
16. Ուսումնասիրեք աշխատանքային տարածքի վերահսկողությունը
Խոշոր նախագծերը օգտվում են աշխատանքային տարածքի կառուցվածքը դինամիկ փոխելու հնարավորությունից: Դա արվում է Անկյունային 8.0-ում ներկայացված նոր Workspace API- ի միջոցով. Այս քայլը ուղեկցող հատվածը տրամադրում է վարքի արագ ակնարկ:
async ֆունկցիան ցույց է տալիս () {const host = աշխատանքային տարածքներ: createWorkspaceHost (նոր NodeJsSyncHost ()); const աշխատանքային տարածք = սպասում են աշխատանքային տարածքներին: readWorkspace (’path / to / workspace / Directory /’, host); կառուցվածքային նախագիծ = աշխատանքային տարածք: նախագծեր: ստանալ ('my-app'); const buildTarget = նախագիծ. նպատակներ: ստանալ (’կառուցել’); buildTarget.options.optimization = ճիշտ; սպասեք workspaces.writeWorkspace (աշխատանքային տարածք, հյուրընկալող); }
17. Արագացնել գործընթացը
JavaScript կոդերի մեծ հիմքերի կառուցումը հոգնեցուցիչ է: AngularJS- ի ապագա տարբերակները կօգտագործեն Google- ի Bazel կառուցման համակարգը `գործընթացը արագացնելու համար. Ցավոք, գրելու պահին այն պատրաստ չէր պրայմայմին:
18. Խուսափեք մահացած քայլելուց
Նույնիսկ եթե Google- ը ծայրաստիճան հոգ է տանում կոդ չկոտրելու մասին, որոշ գործառույթներ պարզապես պետք է հեռացվեն, քանի որ դրանք այլևս անհրաժեշտ չեն: Ստուգեք այս մաշվածության ցուցակը ՝ ավելին իմանալու այն հատկությունների մասին, որոնք պետք է խուսափել:
19. Նայեք փոփոխությունների մատյանին
Ինչպես միշտ, մեկ հոդված երբեք չի կարող արդարացնել մի ամբողջ թողարկում: Բարեբախտաբար, այս փոփոխությունների գրանցամատյանը տրամադրում է բոլոր փոփոխությունների մանրամասն ցուցակ ՝ միայն այն դեպքում, երբ երբևէ ցանկություն կունենաք ստուգել ձեզ համար հատկապես հարազատ հատկության զարկերակը:
Բազմաթիվ ֆայլեր պատրաստ եք ձեր կայք վերբեռնելու համար: Պահուստավորեք դրանք ամպային ամենահուսալի պահեստում:
Այս հոդվածն ի սկզբանե տպագրվել է վեբ ձևավորման ստեղծագործական ամսագրում Վեբ դիզայներ.
