Përmbajtje
- 01. Bëni një kontroll të versionit
- 02. Instaloni Angular
- 03. Krijoni një skelet të projektit
- 04. Ngarkesa diferenciale e parzmore
- 05. ... dhe shikoni rezultatet
- 06. Pjellë një punëtor në internet
- 07. Eksploroni kodin
- 08. Vendosni skelat
- 09. Mos u shqetësoni për mungesën e konstruktorit
- 10. Ekzekutoni një ekzekutim të vogël të përpilimit
- 11. ... dhe gjeni rezultatin
- 12. Kaloni në punë
- 13. Eksploroni Ivy
- 14. Provoni përpunimin e modifikuar të ng
- 15. Gëzoni migrim të përmirësuar
- 16. Eksploroni kontrollin e hapësirës së punës
- 17. Përshpejtoni procesin
- 18. Shmangni të vdekurit që ecin
- 19. Shikoni regjistrin e ndryshimeve
Angular 8 është versioni i fundit i Google's Angular - një nga kornizat më të mira JavaScript përreth. Në këtë artikull, ne do të shqyrtojmë atë që është e veçantë për Angular 8 dhe do t'ju tregojmë se si të filloni. Së pari, një vështrim i shkurtër i asaj që ka ndodhur me kornizën e deritanishme.
Prezantimi i Angular çoi në një zhvendosje të paradigmës në zhvillimin e internetit: ndërsa shumica e bibliotekave u kufizuan në sigurimin e mbështetjes për zhvilluesit me ndikim relativisht të kufizuar arkitektonik, ekipi i zhvilluesve të Angular shkoi në drejtim tjetër. Produkti i tyre ju detyron të përdorni një arkitekturë specifike, me devijime që variojnë nga të vështirat në komerciale të pakuptimta. Në fakt, shumica e kodit Angular kalon nëpër një zinxhir mjetesh relativisht komplekse transpilimi përpara se të godasë ndonjëherë në shfletuesin.
Për shkak të suksesit të jashtëzakonshëm të Angular, si brenda ashtu edhe jashtë Google Inc, zhvillimi - në përgjithësi - është stabilizuar. Kjo do të thotë që ndryshimet në thyerjen e kodit janë të pakta, ndërsa azhurnimet gjashtëmujore janë përqendruar në përshtatjen e kornizës ndaj ndryshimeve në peisazhin e shfletimit të internetit.
Në rastin e Angular 8, për shembull, një përpilues i ri JavaScript është vendosur (megjithëse ende eksperimentalisht). Optimizon kodin e gjeneruar të pajtueshmërisë për të qenë dukshëm më i vogël dhe më i shpejtë në kurriz të shfletuesve të vjetër. Për më tepër, mbështetja e Web Worker është e integruar për të rritur aftësinë e përpunimit të Angular. Me pak fjalë, ka shumë për të parë - kështu që le të zhytemi brenda.
Nëse preferoni të krijoni një faqe pa kod, provoni një nga këta krijues të thjeshtë të faqeve të internetit. Dhe për t'i bërë gjërat të funksionojnë edhe më të qetë, merrni shërbimin tuaj të duhur të hostimit në internet.
01. Bëni një kontroll të versionit
Zinxhiri i veglave të Angular jeton brenda mjedisit NodeJS. Deri në këtë shkrim, nevojitet Node.js 10.9 ose më e mirë - nëse e gjeni veten në një version më të vjetër, vizitoni faqen e internetit të Node.js dhe merrni një azhurnim. Kodi më poshtë tregon statusin e versionit në këtë makinë.
tamhan @ TAMHAN18: n $ nyja -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Instaloni Angular
Zinxhiri i veglave të Angular qëndron në një program të komandës me emrin ng. Mund të instalohet përmes NPM-së së mirënjohur.
tamhan @ TAMHAN18: install $ sudo npm instaloj -g @ angular / cli tamhan @ TAMHAN18: version $ ng version
Kini kujdes t'i përgjigjeni pyetjes së treguar në imazhin më poshtë.
Marrja e informacionit të versionit nga mjeti është mjaft e vështirë - jo vetëm që sintaksa është unike, por rezultati është gjithashtu i shprehur (shih figurën më poshtë).
03. Krijoni një skelet të projektit
ng gjeneron skelat këndore për ne. Në hapat e mëposhtëm, ne duam të shtojmë rutimin dhe të përdorim Sass për transpilimin e CSS. Nëse vendosja dështon për ndonjë arsye, zbrazni direktorinë e punës dhe rifilloni ng me të drejtat e superpërdoruesit.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng ri provë pune
04. Ngarkesa diferenciale e parzmore
Versioni i ri i Angular optimizon kodin e pajtueshmërisë së prapambetur për ndikim të reduktuar - një skedar i quajtur lista e shfletuesve ju lejon të vendosni se cilët shfletues do të mbështeten. E hapur lista e shfletuesve dhe hiqni fjalën jo përpara IE 9 në IE11.
. . . > 0,5% 2 versionet e fundit Firefox ESR nuk ka vdekur IE 9-11 # Për mbështetjen e IE 9-11, hiqni 'jo'.
05. ... dhe shikoni rezultatet
Renditni një përpilim të projektit, ndryshoni në dosjen e shpërndarjes dhe pastroni skedarët e nevojshëm të hartës.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng ndërtuar tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Përfshini pemën për të parë rezultatet - ng krijon versione të shumta të skedarëve të ndryshëm të kodit (shih figurën më poshtë).
06. Pjellë një punëtor në internet
Punonjësit e uebit lejojnë që JavaScript të hyjë në kufirin e fundit të aplikacioneve vendase: përpunimi masivisht paralel i detyrave. Me Angular 8, një punonjës në internet mund të krijohet menjëherë nga komoditeti i ng dobia e linjës komanduese.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo shqip gjeneron punonjës në internet myworker CREATE tsconfig.worker.json (212 bytes) CREATE src / app / myworker.worker.ts (157 bytes) UPDATE tsconfig.app.json (236 bytes ) UPDATE angular.json (3640 bajt)
07. Eksploroni kodin
ngProdhimi ka të ngjarë të duket frikësues në shikim të parë. Hapja e dosjes src / app / myworker.worker.ts në një redaktues kodi të zgjedhur zbulon kodin të cilin duhet ta njihni mirë nga WebWorker Specifikim. Në parim, punëtori merr mesazhe dhe i përpunon ato sipas nevojës.
/// referencë lib = "webworker" /> addEventListener ('mesazh', ({data}) => {const përgjigje = "përgjigje e punëtorit në $ {data}"; postMessage (përgjigje);});
08. Vendosni skelat
Aplikimet këndore përbëhen nga përbërës. Largimi nga puna i punonjësit tonë të internetit bëhet më mirë brenda Komponenti i aplikacionit, e cila është zgjeruar për të përfshirë një dëgjues të OnInit ngjarje Tani për tani, ai do të lëshojë vetëm informacione mbi statusin.
importoni {Komponentin, OnInit} nga '@ angular / core'; @Component ({...}) Klasa e eksportit AppComponent zbaton OnInit {title = 'workertest'; ngOnInit () {console.log ("Komponenti i aplikacionit: OnInit ()"); }}
09. Mos u shqetësoni për mungesën e konstruktorit
Zhvilluesit me përvojë të TypeScript pyesin veten pse kodi ynë nuk përdor konstruktorin e dhënë nga gjuha e programimit. Arsyeja për këtë është se ngOnInit është një ngjarje e ciklit të jetës që pushohet nga puna sa herë që ndodh një ngjarje e inicimit - kjo nuk ka nevojë të ndërlidhet me thirrjen e klasës.
10. Ekzekutoni një ekzekutim të vogël të përpilimit
Në këtë moment në kohë, programi është gati për t'u ekzekutuar. Ne do ta ekzekutojmë atë nga serveri brenda ng, e cila mund të thirret përmes komandës serve. Një aspekt i zoti i kësaj qasjeje është që programi të zbulojë ndryshimet dhe të përpilojë sërish projektin.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo Këngë
Shikoni figurën për ta parë këtë në veprim në imazhin më poshtë.
11. ... dhe gjeni rezultatin
ng shërbej putputs adresën e serverit të saj lokal të internetit, e cila është zakonisht http: // localhost: 4200 /. Hapni faqen në internet dhe hapni mjetet e zhvilluesit për të parë rezultatet e statusit. Mbani në mend se tastierë.log nxjerr të dhëna në konsolën e shfletuesit dhe e lë të paprekur konsolën e instancës NodeJS.
12. Kaloni në punë
Në këtë moment në kohë, ne krijojmë një shembull të punëtorit dhe i sigurojmë asaj një mesazh. Rezultatet e tij tregohen më pas në tastierën e shfletuesit.
if (typeof Worker! == 'undefined') {// Krijo një punëtor të ri const = Punëtor i ri ('./ myworker.worker', {type: 'module'}); working.onmessage = ({data}) => {console.log ('faqja mori mesazhin: $ {data }'); }; punëtor.postMessage ('përshëndetje'); } else {console.log ("Asnjë mbështetje punëtori"); }
13. Eksploroni Ivy
Versionet e ardhshme të Angular do të përdorin një përpilues më të përparuar, duke çuar në pamje edhe më të vogla. Ndërsa produkti nuk ka mbaruar ende, një skelet i lejuar për dredhkë mund të pjellë përmes ng projekt i ri dredhkë - mundësoj-dredhkë. Përndryshe, ndryshoni cilësimet e përpiluesit siç tregohet në fragment.
"angularCompilerOptions": {"enableIvy": e vërtetë}
Një fjalë paralajmëruese: Ivy çon në zvogëlime të mahnitshme të madhësisë, por nuk është falas. Produkti ende nuk është stabilizuar, kështu që përdorimi i tij në mjedise produktive nuk rekomandohet.
14. Provoni përpunimin e modifikuar të ng
Angular's ng mjeti i rreshtit të komandës përdor skriptet e fëmijëve për ca kohë. Angular 8 ups ante në atë që tani mund, gjithashtu, të përdorni këtë strukturë për të ekzekutuar detyrat tuaja ndërsa kërkesa juaj është mbledhur dhe përpiluar.
"arkitekti": {"ndërtimi": {"ndërtuesi": "@ angular-devkit / ndërtimi-këndor: shfletuesi",
Një aplikim i zoti i ng skripte përfshin ngarkimin e drejtpërdrejtë të aplikacioneve në shërbimet cloud. Depoja e Git ofron një skenar të dobishëm që ngarkon punën tuaj në një llogari Firebase.
15. Gëzoni migrim të përmirësuar
Zhvilluesit që migrojnë larg Angular 1.x, i njohur gjithashtu si AngularJS, kanë pasur një pjesë të drejtë të çështjeve që e bëjnë navigatorin të punojë drejt në aplikacionet 'e kombinuara'. Shërbimi i ri i Unifikuar i Vendndodhjes synon ta bëjë këtë proces më të butë.
16. Eksploroni kontrollin e hapësirës së punës
Projektet e mëdha përfitojnë nga aftësia për të ndryshuar strukturën e hapësirës së punës në mënyrë dinamike. Kjo bëhet përmes API-së së re të Hapësirës së Punëve të prezantuar në Angular 8.0 - copa që shoqëron këtë hap ofron një pasqyrë të shpejtë të sjelljes.
funksioni async demonstroj () {const host = hapësira pune. krijoniWorkspaceHost (NodeJsSyncHost i ri ()); hapësira e punës së konstituar = pret hapësirat e punës. readWorkspace ('rruga / tek / hapësira e punës / direktoria /', host); projekti const = hapësira e punës.projektet. merrni ('aplikacioni im'); const buildTarget = projekti. targetet. merrni ('ndërtoni'); buildTarget.options.optimization = e vërtetë; pres hapësirat e punës.writeWorkspace (hapësira e punës, host); }
17. Përshpejtoni procesin
Ndërtimi i bazave të mëdha të kodit JavaScript bëhet i lodhshëm. Versionet e ardhshme të AngularJS do të përdorin sistemin e ndërtimit Google të Bazel për të përshpejtuar procesin - fatkeqësisht, në kohën e shkrimit nuk ishte gati për kohën paraprake.
18. Shmangni të vdekurit që ecin
Edhe pse Google kujdeset jashtëzakonisht shumë për të mos thyer kodin, disa veçori thjesht duhet të hiqen pasi nuk janë më të nevojshme. Kontrolloni këtë listë të amortizimeve për të mësuar më shumë rreth veçorive të cilat duhet të shmangen.
19. Shikoni regjistrin e ndryshimeve
Si gjithmonë, një artikull nuk mund të bëjë kurrë drejtësi për një botim të tërë. Për fat të mirë, ky regjistër ndryshimesh ofron një listë të detajuar të të gjitha ndryshimeve - vetëm në rast se ndiheni ndonjëherë sikur kontrolloni pulsin e një veçorie veçanërisht të dashur për ju.
A keni shumë skedarë gati për ngarkim në faqen tuaj? Rezervoni ato në hapësirën ruajtëse më të besueshme.
Ky artikull u botua fillimisht në revistën krijuese të krijimit të uebit Projektues Uebi.
