Saturs
- 01. Palaidiet versijas pārbaudi
- 02. Instalējiet leņķisko
- 03. Izveidojiet projekta skeletu
- 04. Siksnas diferenciālā slodze
- 05. ... un skatiet rezultātus
- 06. Nārsto tīmekļa darbinieku
- 07. Izpētiet kodu
- 08. Uzstādiet sastatnes
- 09. Neuztraucieties par konstruktora trūkumu
- 10. Izpildiet nelielu kompilēšanas skrējienu
- 11. ... un atrodiet izvadi
- 12. ķerties pie darba
- 13. Izpēti Ivy
- 14. Izmēģiniet modificētu ng apstrādi
- 15. Izbaudiet uzlabotu migrāciju
- 16. Izpētiet darbvietas vadību
- 17. Paātriniet procesu
- 18. Izvairieties no staigājošiem miroņiem
- 19. Apskatiet izmaiņu žurnālu
Angular 8 ir Google's Angular jaunākā versija - viens no labākajiem JavaScript ietvariem. Šajā rakstā mēs iepazīsimies ar to, kas ir īpašs Angular 8, un parādīsim, kā sākt. Pirmkārt, īss atskats uz līdz šim notikušo.
Angular ievads noveda pie paradigmas maiņas tīmekļa izstrādē: lai gan lielākā daļa bibliotēku aprobežojās ar atbalsta sniegšanu izstrādātājiem ar relatīvi ierobežotu arhitektūras ietekmi, Angular izstrādātāju komanda gāja citā virzienā. Viņu produkts liek jums izmantot noteiktu arhitektūru, ar novirzēm sākot no sarežģītas līdz komerciāli bezjēdzīgai. Patiesībā lielākā daļa leņķiskā koda darbojas salīdzinoši sarežģītā transpilācijas rīkķēdē, pirms tas kādreiz nonāk pārlūkprogrammā.
Pateicoties milzīgajiem Angular panākumiem gan Google Inc iekšpusē, gan ārpus tās, attīstība kopumā ir stabilizējusies. Tas nozīmē, ka koda izmaiņu ir maz, savukārt pusgada jauninājumi ir vērsti uz ietvara pielāgošanu izmaiņām tīmekļa pārlūkošanas ainavā.
Piemēram, Angular 8 gadījumā tiek izvietots jauns JavaScript kompilators (lai arī joprojām eksperimentāli). Tas optimizē izveidoto saderības kodu, lai tas būtu ievērojami mazāks un ātrāks uz vecāku pārlūkprogrammu rēķina. Turklāt Web Worker atbalsts ir integrēts, lai palielinātu Angular apstrādes iespējas. Īsāk sakot, ir daudz ko redzēt - tāpēc ienirsim tieši iekšā.
Ja vēlaties veidot vietni bez koda, izmēģiniet kādu no šiem vienkāršajiem vietņu veidotājiem. Lai lietas ritētu vēl raitāk, nodrošiniet savu tīmekļa mitināšanas pakalpojumu pareizu.
01. Palaidiet versijas pārbaudi
Angular’s toolchain dzīvo NodeJS vidē. Šajā rakstā ir nepieciešama Node.js 10.9 vai labāka versija - ja atrodat vecāku versiju, apmeklējiet vietni Node.js un saņemiet jauninājumu. Zemāk redzamais kods parāda versijas statusu šajā mašīnā.
tamhan @ TAMHAN18: ~ $ mezgls -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Instalējiet leņķisko
Angular rīku ķēde atrodas komandrindas lietderībā ar nosaukumu ng. To var uzstādīt, izmantojot labi zināmo NPM.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng versija
Esiet uzmanīgs, atbildot uz jautājumu, kas parādīts zemāk esošajā attēlā.
Informāciju par versiju iegūt no rīka ir diezgan sarežģīta - sintakse ir ne tikai unikāla, bet arī izvade ir daudzveidīga (skat. Attēlu zemāk).
03. Izveidojiet projekta skeletu
ng ģenerē mums leņķiskās sastatnes. Veicot šādas darbības, mēs vēlamies pievienot maršrutēšanu un CSS transilācijai izmantot Sass. Ja izvietošana kāda iemesla dēļ neizdodas, iztukšojiet darba direktoriju un restartējiet ng ar lietotāja tiesībām.
tamhan @ TAMHAN18: ~ $ mkdir leņķa telpa tamhan @ TAMHAN18: ~ $ cd leņķa telpa / tamhan @ TAMHAN18: ~ / leņķa telpa
04. Siksnas diferenciālā slodze
Jaunajā Angular versijā tiek optimizēts atpakaļejošais savietojamības kods, lai samazinātu ietekmi - fails ar nosaukumu pārlūkprogrammu saraksts ļauj jums izlemt, kuras pārlūkprogrammas tiks atbalstītas. Atvērt pārlūkprogrammu saraksts un noņemiet vārdu nē IE 9 līdz IE11 priekšā.
. . . > 0.5% pēdējās 2 versijas Firefox ESR nav miris IE 9-11 # IE 9-11 atbalstam noņemiet “not”.
05. ... un skatiet rezultātus
Pasūtiet projekta kompilāciju, mainiet to izplatīšanas mapē un notīriet nevajadzīgos karšu failus.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Lai redzētu rezultātus, izsauciet koku - ng izveido vairākas dažādu kodu failu versijas (skat. attēlu zemāk).
06. Nārsto tīmekļa darbinieku
Tīmekļa darbinieki ļauj JavaScript iekļūt pēdējā vietējo lietojumprogrammu pierobežā: masveidīgi paralēla uzdevumu apstrāde. Izmantojot Angular 8, tīmekļa darbinieku var izveidot tieši no ērtas ng komandrindas lietderība.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng ģenerēt tīmekļa darbinieka myworker CREATE tsconfig.worker.json (212 baiti) CREATE src / app / myworker.worker.ts (157 baiti) UPDATE tsconfig.app.json (236 baiti) ) UPDATE angular.json (3640 baiti)
07. Izpētiet kodu
ngVisticamāk, no pirmā acu uzmetiena izskats būs biedējošs. Faila atvēršana src / app / myworker.worker.ts izvēlētajā koda redaktorā atklāj kodu, kas jums labi jāzina no WebWorker specifikācija. Principā darbinieks saņem ziņojumus un pēc vajadzības tos apstrādā.
/// reference lib = "webworker" /> addEventListener (’message’, ({data}) => {const response = `darbinieka atbilde uz $ {data}`; postMessage (atbilde);});
08. Uzstādiet sastatnes
Leņķiskie pielietojumi sastāv no komponentiem. Mūsu tīmekļa darbinieka atlaišanu vislabāk var izdarīt AppComponent, kas ir paplašināts, iekļaujot klausītāju OnInit notikumu. Pagaidām tas izstādīs tikai informāciju par statusu.
importēt {Component, OnInit} no ‘@ angular / core’; @Component ({...}) Eksporta klase AppComponent ievieš OnInit {title = ’workertest’; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Neuztraucieties par konstruktora trūkumu
Pieredzējuši TypeScript izstrādātāji jautā sev, kāpēc mūsu kods neizmanto konstruktoru, ko nodrošina programmēšanas valoda. Iemesls tam ir tāds ngOnInit ir dzīves cikla notikums, kas tiek aktivizēts ikreiz, kad notiek inicializācijas notikums - tas nav jāsaista ar klases izsaukumu.
10. Izpildiet nelielu kompilēšanas skrējienu
Šajā brīdī programma ir gatava darbam. Mēs to izpildīsim no servera iekšpusē ng, kuru var izsaukt, izmantojot komandu serve. Veiksmīgs šīs pieejas aspekts ir tas, ka programma lidojuma laikā nosaka izmaiņas un pārkompilē projektu.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Apskatiet attēlu, lai redzētu, kā tas darbojas zemāk esošajā attēlā.
11. ... un atrodiet izvadi
kalpo putput vietējā tīmekļa servera adresi, kas parasti ir http: // localhost: 4200 /. Atveriet tīmekļa lapu un atveriet izstrādātāja rīkus, lai redzētu statusa izvadi. Paturiet to prātā console.log izvada datus pārlūka konsolē un atstāj NodeJS instances konsoli neskartu.
12. ķerties pie darba
Šajā brīdī mēs izveidojam darbinieka eksemplāru un sniedzam viņam ziņojumu. Pēc tam tā rezultāti tiek parādīti pārlūka konsolē.
if (Typeof Worker! == ’undefined’) {// Izveidot jaunu konst strādnieku = new Worker (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (’lapa ieguva ziņojumu: $ {data }’); }; worker.postMessage (’labdien’); } else {console.log ("Nav darbinieku atbalsta"); }
13. Izpēti Ivy
Nākamajās Angular versijās tiks izmantots modernāks kompilators, kas radīs vēl mazākus skatus. Kamēr produkts vēl nav pabeigts, ar ivy skeletu var nārstot, izmantojot jauns ievu projekts - iespējot efeja. Varat arī mainīt kompilatora iestatījumus, kā parādīts fragmentā.
"angularCompilerOptions": {"enableIvy": true}
Brīdinājuma vārds: efeja izraisa pārsteidzošus izmēru samazinājumus, taču tā nav brīva. Produktam vēl jāstabilizējas, tāpēc nav ieteicams to izmantot produktīvā vidē.
14. Izmēģiniet modificētu ng apstrādi
Leņķa ng komandrindas rīks kādu laiku iekšēji izmantoja bērnu skriptus. Angular 8 palielina ante, jo tagad jūs varat arī izmantot šo iespēju, lai veiktu savus uzdevumus, kad jūsu lietojumprogramma ir apkopota un apkopota.
"arhitekts": {"būvēt": {"celtnieks": "@ angular-devkit / build-angular: pārlūks",
Viens veikls lietojums ng skripti ietver tiešu lietojumprogrammu augšupielādi mākoņa pakalpojumos. Git krātuvē ir pieejams noderīgs skripts, kas jūsu darbu augšupielādē Firebase kontā.
15. Izbaudiet uzlabotu migrāciju
Izstrādātājiem, kas migrē prom no Angular 1.x, kas pazīstams arī kā AngularJS, ir bijusi diezgan liela daļa problēmu, lai navigators darbotos pareizi kombinētās lietojumprogrammās. Jaunā vienotā atrašanās vietas pakalpojuma mērķis ir padarīt šo procesu vienmērīgāku.
16. Izpētiet darbvietas vadību
Lieli projekti gūst labumu no iespējas dinamiski mainīt darbvietas struktūru. Tas tiek darīts, izmantojot jauno Workspace API, kas ieviests Angular 8.0 - šai darbībai pievienotais fragments sniedz ātru pārskatu par uzvedību.
async funkcija demonstrē () {const host = darbvietas. createWorkspaceHost (jauns NodeJsSyncHost ()); const darbvieta = gaidīt darbvietas. readWorkspace (’ceļš / uz / darbvietu / direktoriju /’, resursdators); const project = darbvieta.projects. get (’mana lietotne’); const buildTarget = project.targets. get (’būvēt’); buildTarget.options.optimization = true; gaidīt darbvietas.writeWorkspace (darbvieta, resursdators); }
17. Paātriniet procesu
Lielu JavaScript kodu bāzes izveidošana kļūst garlaicīga. Nākamajās AngularJS versijās procesa paātrināšanai tiks izmantota Google Bazel veidošanas sistēma - diemžēl rakstīšanas laikā tā vēl nebija gatava darbam.
18. Izvairieties no staigājošiem miroņiem
Lai gan Google ļoti rūpējas, lai kods netiktu sadalīts, dažas funkcijas vienkārši ir jānoņem, jo tās vairs nav vajadzīgas. Pārbaudiet šo nolietojumu sarakstu, lai uzzinātu vairāk par funkcijām, no kurām jāizvairās.
19. Apskatiet izmaiņu žurnālu
Kā vienmēr, viens raksts nekad nevar būt taisnīgs visai publikācijai. Par laimi, šis izmaiņu žurnāls sniedz detalizētu visu izmaiņu sarakstu - tikai gadījumā, ja kādreiz vēlaties izbaudīt sev īpaši dārgas funkcijas pulsu.
Vai jums ir daudz failu, kas ir gatavi augšupielādei jūsu vietnē? Dublējiet tos visuzticamākajā mākoņu krātuvē.
Šis raksts sākotnēji tika publicēts radošā tīmekļa dizaina žurnālā Mājas lapu dizaineris.
