Efni.
- 01. Keyrðu útgáfuathugun
- 02. Settu upp hyrnd
- 03. Búðu til verkefnagrind
- 04. Mismunandi álag á beisli
- 05. ... og sjáðu niðurstöðurnar
- 06. Hrygna vefstarfsmann
- 07. Kannaðu kóðann
- 08. Settu upp vinnupalla
- 09. Ekki hafa áhyggjur af skorti á smiðnum
- 10. Framkvæmdu lítinn safnahlaup
- 11. ... og finndu framleiðsluna
- 12. Fara til vinnu
- 13. Kannaðu Ivy
- 14. Prófaðu breytta ng vinnslu
- 15. Njóttu bættra fólksflutninga
- 16. Kannaðu stjórnun vinnusvæðis
- 17. Flýttu ferlinu
- 18. Forðastu að ganga dauðir
- 19. Horfðu á breytingaskrána
Angular 8 er nýjasta útgáfan af Angular Google - einn besti JavaScript rammi í kring. Í þessari grein munum við fara yfir það sem er sérstakt við Angular 8 og sýna þér hvernig á að byrja. Í fyrsta lagi, stutt aftur af því sem gerðist með rammanum hingað til.
Kynning Angular leiddi til breytinga á hugmyndafræði í þróun vefsins: Þó að flest bókasöfn takmörkuðu sig við að veita stuðningsaðilum verktaki með tiltölulega takmörkuð byggingaráhrif fór verktaki teymis Angular í hina áttina. Varan þeirra neyðir þig til að nota tiltekinn arkitektúr, með fráviki allt frá erfiðu til tilgangslaust í viðskiptum. Reyndar rennur flestur Angular kóði í gegnum tiltölulega flókinn verkfæravirkni áður en hann lendir einhvern tíma í vafranum.
Vegna gífurlegrar velgengni Angular, bæði innan og utan Google Inc, hefur þróun - í stórum dráttum - náð jafnvægi. Þetta þýðir að brot á kóða eru fáar, en hálf árlegar uppfærslur beinast að því að laga umgjörðina að breytingum á vefskoðunarlandslaginu.
Í tilviki Angular 8, til dæmis, er nýr JavaScript þýðandi settur í notkun (að vísu enn tilraunir). Það bjartsýni mynda eindrægni kóða til að vera verulega minni og hraðari á kostnað eldri vafra. Ennfremur er stuðningur við Web Worker samþættur til að auka vinnslugetu Angular. Í stuttu máli er margt að sjá - svo við skulum kafa rétt inn.
Ef þú vilt frekar hanna síðu án kóða skaltu prófa einn af þessum auðveldu vefsíðuhöfundum. Og til að hlutirnir gangi ennþá mýkri skaltu fá vefþjónustuna þína rétt.
01. Keyrðu útgáfuathugun
Tækjakeðja Angular býr innan NodeJS umhverfisins. Þegar þetta er skrifað þarf Node.js 10.9 eða betri - ef þú lendir í eldri útgáfu farðu á vefsíðu Node.js og fáðu uppfærslu. Kóðinn hér að neðan sýnir útgáfu stöðu á þessari vél.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Settu upp hyrnd
Verkfæri keðju Angular er í stjórnlínutæki sem heitir ng. Hægt er að setja það upp með hinu þekkta NPM.
tamhan @ TAMHAN18: ~ $ sudo npm setja upp -g @ hyrnd / cli tamhan @ TAMHAN18: ~ $ ng útgáfa
Vertu varkár að svara spurningunni sem sést á myndinni hér að neðan.
Að fá upplýsingar um útgáfu úr tækinu er nokkuð erfitt - ekki aðeins er setningafræðin einstök, heldur er framleiðslan einnig orðrétt (sjá mynd hér að neðan).
03. Búðu til verkefnagrind
ng býr til Angular vinnupallinn fyrir okkur. Í eftirfarandi skrefum viljum við bæta við venja og nota Sass til CSS flutnings. Verði dreifingin mistekin af einhverjum ástæðum skaltu tæma vinnuskrána og endurræsa ng með réttindum ofurnotanda.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng nýtt vinnutæki
04. Mismunandi álag á beisli
Nýja útgáfan af Angular hagræðir afturábak samhæfileikakóða fyrir minni áhrif - skrá sem heitir vafralisti gerir þér kleift að ákveða hvaða vafrar eru studdir. Opið vafralisti og fjarlægðu orðið ekki fyrir framan IE 9 til IE11.
. . . > 0,5% síðustu 2 útgáfur Firefox ESR ekki dauður IE 9-11 # Fyrir IE 9-11 stuðning, fjarlægðu ‘ekki’.
05. ... og sjáðu niðurstöðurnar
Pantaðu samantekt verkefnisins, breyttu í dreifimöppuna og hreinsaðu óþarfa kortaskrár.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Kallaðu á tré til að sjá árangurinn - ng býr til margar útgáfur af ýmsum kóðaskrám (sjá mynd hér að neðan).
06. Hrygna vefstarfsmann
Vefstarfsmenn láta JavaScript komast inn í síðustu mörk innfæddra forrita: gegnheill samhliða vinnsla verkefna. Með Angular 8 er hægt að búa til starfsmann á vefnum beint úr þægindum ng stjórnlínutæki.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng búa til vefverkamann 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 bæti)
07. Kannaðu kóðann
ngFramleiðsla er líkleg til að líta ógnandi út við fyrstu sýn. Opnaðu skrána src / app / myworker.worker.ts í kóða ritstjóri að eigin vali sýnir kóða sem þú ættir að þekkja vel úr WebWorker forskrift. Í grundvallaratriðum fær starfsmaðurinn skilaboð og vinnur úr þeim eftir þörfum.
/// reference lib = "webworker" /> addEventListener (’message’, ({data}) => {const response = `svar starfsmanns við $ {data}`; postMessage (svar);});
08. Settu upp vinnupalla
Hyrnd forrit samanstanda af hlutum. Að reka vefstarfsmanninn okkar er best að gera innan AppComponent, sem er stækkað til að innihalda hlustanda fyrir OnInit atburður. Í bili mun það einungis gefa frá sér stöðuupplýsingar.
flytja inn {Component, OnInit} frá ‘@ angular / core’; @Component ({..}) Útflutningsflokkur AppComponent útfærir OnInit {title = ’workertest’; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Ekki hafa áhyggjur af skorti á smiðnum
Reyndir TypeScript forritarar spyrja sig hvers vegna kóðinn okkar noti ekki smiðinn sem forritunarmálið veitir. Ástæðan fyrir því er sú ngOnInit er lífshlaupsatburður sem rekinn er hvenær upphafsatburður á sér stað - þetta þarf ekki að vera í tengslum við bekk beiðni.
10. Framkvæmdu lítinn safnahlaup
Á þessum tímapunkti er forritið tilbúið til notkunar. Við munum framkvæma það frá netþjóninum inni í ng, sem hægt er að kalla fram með þjónustuskipuninni. Snyrtilegur þáttur í þessari nálgun er að forritið greinir breytingar og tekur saman verkefnið á flugu.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng þjóna
Skoðaðu myndina til að sjá þetta í aðgerð á myndinni hér að neðan.
11. ... og finndu framleiðsluna
ng þjóna setur inn heimilisfang staðbundins vefþjóns, sem venjulega er http: // localhost: 4200 /. Opnaðu vefsíðuna og opnaðu verktaki til að sjá stöðuna. Hafðu í huga það hugga.log sendir gögn út í vafra stjórnborðið og lætur stjórnborð NodeJS tilviksins ósnortið.
12. Fara til vinnu
Á þessum tímapunkti búum við til dæmi um starfsmanninn og færum honum skilaboð. Niðurstöður hennar eru síðan sýndar í vafranum.
if (typeof Worker! == ’undefined’) {// Búðu til nýjan starfsmann = nýjan starfsmann (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (’síða fékk skilaboð: $ {data }’); }; worker.postMessage (‘halló’); } annað {console.log („Enginn stuðningur starfsmanna“); }
13. Kannaðu Ivy
Framtíðarútgáfur af Angular munu nota fullkomnari þýðanda, sem leiðir til enn minni skoðana. Þó að varan sé ekki fullunnin enn þá er hægt að hrygna beinagrind sem hægt er að nota í efa ng nýtt Ivy-verkefni - virkja-Ivy. Að öðrum kosti, breyttu stillingum þýðanda eins og sýnt er í brotinu.
"angularCompilerOptions": {"enableIvy": satt}
Aðvörunarorð: Ivy leiðir til ótrúlegrar minnkunar á stærðum, en það er ekki ókeypis. Varan á enn eftir að koma á stöðugleika og því er ekki mælt með notkun hennar í afkastamiklu umhverfi.
14. Prófaðu breytta ng vinnslu
Angular’s ng stjórnlínutól notað barnaskript innanhúss í nokkurn tíma. Hyrndur 8 hækkar andrúmsloftið að því leyti að þú getur nú líka notað þessa aðstöðu til að keyra eigin verkefni þegar forritið er sett saman og sett saman.
"arkitekt": {"build": {"builder": "@ angular-devkit / build-angular: browser",
Eitt sniðugt forrit af ng forskriftir felur í sér að hlaða forritum beint inn í skýjaþjónustuna. Git geymslan veitir gagnlegt handrit sem hleður verkinu þínu inn á Firebase reikning.
15. Njóttu bættra fólksflutninga
Hönnuðir sem flytja í burtu frá Angular 1.x, einnig þekktur sem AngularJS, hafa haft töluverðan hlut af málum sem fá leiðsögumanninn til að vinna rétt í „sameinuðum“ forritum. Nýja Unified Location Service miðar að því að gera þetta ferli mýkri.
16. Kannaðu stjórnun vinnusvæðis
Stór verkefni njóta góðs af möguleikanum á að breyta uppbyggingu vinnusvæðisins. Þetta er gert með nýja Workspace API kynnt í Angular 8.0 - brotið sem fylgir þessu skrefi veitir fljótt yfirlit yfir hegðunina.
async virka sýna () {const host = vinnusvæði. createWorkspaceHost (nýr NodeJsSyncHost ()); const vinnusvæði = bíður vinnusvæða. readWorkspace (’path / to / workspace / directory /’, host); const project = workspace.projects. fá (‘my-app’); const buildTarget = project.targets. fá (’byggja’); buildTarget.options.optimization = satt; bíða eftir workspaces.writeWorkspace (vinnusvæði, gestgjafi); }
17. Flýttu ferlinu
Að byggja stóra JavaScript kóða undirstöður verður leiðinlegur. Framtíðarútgáfur af AngularJS munu nota Bazel byggingarkerfi Google til að flýta fyrir ferlinu - því miður þegar þetta var skrifað var það ekki tilbúið fyrir frumtíma.
18. Forðastu að ganga dauðir
Jafnvel þó að Google fari mjög varlega í að brjóta kóða, þá þarf einfaldlega að fjarlægja suma eiginleika þar sem þeirra er ekki lengur þörf. Athugaðu þennan afskriftalista til að læra meira um eiginleika sem ber að forðast.
19. Horfðu á breytingaskrána
Eins og alltaf getur ein grein aldrei fullnægt heilli útgáfu. Sem betur fer veitir þessi breytingaskrá nákvæman lista yfir allar breytingarnar - bara ef þér líður einhvern tíma eins og að athuga púlsinn á eiginleikum sem þér þykir sérstaklega vænt um.
Ertu með margar skrár tilbúnar til að hlaða inn á síðuna þína? Taktu öryggisafrit af þeim í áreiðanlegri skýjageymslu.
Þessi grein var upphaflega birt í skapandi tímariti um vefhönnun Vefhönnuður.
