Sisu
- 01. Käivitage versiooni kontroll
- 02. Paigaldage nurk
- 03. Loo projekti skelett
- 04. Rakmete diferentsiaalkoormus
- 05. ... ja vaadake tulemusi
- 06. Kuduge veebitöötaja
- 07. Uurige koodi
- 08. Pange üles tellingud
- 09. Ärge muretsege konstruktori puudumise pärast
- 10. Viige läbi väike kompileerimiskäik
- 11. ... ja leidke väljund
- 12. Tööle asumine
- 13. Avastage Ivy
- 14. Proovige muudetud töötlemist
- 15. Nautige paremat rännet
- 16. Tutvuge tööruumi juhtimisega
- 17. Kiirendage protsessi
- 18. Väldi kõndivaid surnuid
- 19. Vaadake muudatuste logi
Angular 8 on Google'i Angulari uusim versioon - üks parimatest JavaScripti raamistikest. Selles artiklis tutvustame Angular 8 eripära ja näitame, kuidas alustada. Esiteks lühike tagasivaade senisele raamistikuga juhtunule.
Angulari sissejuhatus viis veebiarenduses paradigmamuutuseni: kui enamik raamatukogudest piirdus suhteliselt piiratud arhitektuurimõjuga arendajatele toe pakkumisega, läks Angulari arendusmeeskond teises suunas. Nende toode sunnib teid kasutama konkreetset arhitektuuri, mille kõrvalekalded ulatuvad raskest kuni äriliselt mõttetuks. Tegelikult jookseb enamik nurgakoodist läbi suhteliselt keeruka transpilatsiooni tööriistaketi, enne kui see brauserisse jõuab.
Angulari tohutu edu tõttu nii Google Incis kui ka väljaspool seda on areng üldiselt stabiliseerunud. See tähendab, et koodimurdmist on vähe, poolaasta-aastased täiendused on aga suunatud raamistiku kohandamisele veebi sirvimismaastiku muutustega.
Näiteks Angular 8 puhul on kasutusele võetud uus JavaScripti kompilaator (ehkki endiselt eksperimentaalselt). See optimeerib genereeritud ühildumiskoodi oluliselt väiksemaks ja kiiremaks vanemate brauserite arvelt. Lisaks integreeritakse veebitöötaja tugi Angulari töötlemisvõime suurendamiseks. Lühidalt öeldes on palju vaadata - seega sukeldugem otse sisse.
Kui soovite kujundada saidi ilma koodita, proovige mõnda neist lihtsatest veebisaitide koostajatest. Ja et asi sujuks veelgi sujuvamalt, looge oma veebimajutusteenus õigesti.
01. Käivitage versiooni kontroll
Angulari tööriistakett elab keskkonnas NodeJS. Selle kirjutamise ajal on vaja Node.js 10.9 või uuemat versiooni - kui leiate end vanemast versioonist, külastage Node.js veebisaiti ja hankige täiendus. Allolev kood näitab selle masina versiooni olekut.
tamhan @ TAMHAN18: ~ $ sõlm -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Paigaldage nurk
Angulari tööriistakett asub käsurea utiliidis nimega ng. Seda saab paigaldada tuntud NPM-i kaudu.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ nurk / cli tamhan @ TAMHAN18: ~ $ ng versioon
Olge alloleval pildil näidatud küsimusele vastamisel ettevaatlik.
Versiooniteabe tööriistast välja saamine on üsna keeruline - mitte ainult süntaks pole ainulaadne, vaid ka väljund on mitmekülgne (vt allolevat pilti).
03. Loo projekti skelett
ng genereerib meie jaoks nurktellingud. Järgmistes sammudes soovime lisada marsruutimise ja kasutada CSS-i transpileerimiseks Sassi. Kui juurutamine peaks mingil põhjusel ebaõnnestuma, tühjendage töökataloog ja taaskäivitage ng superkasutaja õigustega.
tamhan @ TAMHAN18: ~ $ mkdir nurkruum tamhan @ TAMHAN18: ~ $ cd nurgaruum / tamhan @ TAMHAN18: ~ / nurgaruum $ ng uus tööproov
04. Rakmete diferentsiaalkoormus
Angulari uus versioon optimeerib tagurpidi ühilduvuse koodi vähendatud mõju - faili nimega brauserite loend võimaldab teil otsustada, milliseid brausereid toetatakse. Avatud brauserite loend ja eemaldage sõna mitte IE 9 kuni IE11 ees.
. . . > 0,5% viimast 2 versiooni Firefox ESR pole surnud IE 9-11 # IE 9-11 toe jaoks eemaldage ’not’.
05. ... ja vaadake tulemusi
Tellige projekti kompileerimine, muutke jaotuskataloogi ja puhastage mittevajalikud kaardifailid.
tamhan @ TAMHAN18: ~ / nurgaruum / töövõimalus $ sudo ng ehituse tamhan @ TAMHAN18: ~ / nurgaruum / töövõimekoht / kaugus / tööruumitesti $ ls
Tulemuste nägemiseks kutsuge puu - ng loob mitmesuguseid koodifaile mitu versiooni (vt allolevat pilti).
06. Kuduge veebitöötaja
Veebitöötajad lasevad JavaScripti siseneda kohalike rakenduste viimasele piirile: ülesannete massiliselt paralleelne töötlemine. Angular 8 abil saab veebitöötaja luua mugavalt ng käsurea utiliit.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng genereeri veebitöötaja minu töötaja 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. Uurige koodi
ngVäljund tundub esmapilgul tõenäoliselt hirmutav. Faili avamine src / app / myworker.worker.ts valitud koodiredaktoris ilmub kood, mida peaksite teadma Veebitöötaja spetsifikatsioon. Põhimõtteliselt võtab töötaja sõnumeid vastu ja töötleb neid vastavalt vajadusele.
/// reference lib = "webworker" /> addEventListener (’sõnum’, ({data}) => {const response = `töötaja vastus teenusele $ {data}`; postMessage (vastus);});
08. Pange üles tellingud
Nurgarakendused koosnevad komponentidest. Meie veebitöötaja vallandamine on kõige parem Rakenduse komponent, mida laiendatakse ka kuulajale OnInit sündmus. Praegu väljastab see ainult olekuteavet.
importige {Component, OnInit} kaustast @ @ nurk / südamik; @Component ({...}) Ekspordiklass AppComponent rakendab OnInit {title = ’workertest’; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Ärge muretsege konstruktori puudumise pärast
Kogenud TypeScripti arendajad küsivad endalt, miks meie kood ei kasuta programmeerimiskeele pakutavat konstruktorit. Selle põhjus on see ngOnInit on elutsükli sündmus, mis vallandatakse alati, kui toimub initsialiseerimine - seda ei pea korrelatsioonis klassi kutsumisega.
10. Viige läbi väike kompileerimiskäik
Sel hetkel on programm käivitamiseks valmis. Me täidame selle serveris asuvas serveris ng, mida saab käivitada käsu serve kaudu. Selle lähenemisviisi korralik aspekt on see, et programm tuvastab muudatused ja kompileerib projekti käigu pealt.
tamhan @ TAMHAN18: ~ / nurgaruum / tööversioon $ sudo ng serve
Heitke pilk joonisele, et näha seda alloleval pildil toimimas.
11. ... ja leidke väljund
serveerima paneb oma kohaliku veebiserveri aadressi, mis tavaliselt on http: // localhost: 4200 /. Oleku väljundi nägemiseks avage veebileht ja arendaja tööriistad. Pidage seda meeles konsool.log väljastab andmed brauseri konsoolile ja jätab NodeJS-i eksemplari konsooli puutumata.
12. Tööle asumine
Sel hetkel loome töötaja eksemplari ja edastame talle sõnumi. Seejärel kuvatakse selle tulemused brauseri konsoolis.
if (Typeof Worker! == ’undefined’) {// Loo uus const töötaja = new Worker (’./ myworker.worker’, {type: ’moodul’}); worker.onmessage = ({data}) => {console.log (’leht sai teate: $ {data }’); }; töötaja.postMessage (’tere’); } else {console.log ("Töötajate tugi puudub"); }
13. Avastage Ivy
Angulari tulevastes versioonides kasutatakse täpsemat kompilaatorit, mis viib veelgi väiksemate vaadeteni. Kuigi toode pole veel valmis, saab luuderohu toega luustiku kudeda uus ivy-projekt - enable-ivy. Teise võimalusena saate kompilaatori seadeid muuta, nagu näidatud koodilõigus.
"angularCompilerOptions": {"enableIvy": true}
Hoiatus: Ivy viib hämmastavalt suuruse vähendamiseni, kuid see pole tasuta. Toode ei ole veel stabiliseerunud, seega pole seda tootlikes keskkondades soovitatav kasutada.
14. Proovige muudetud töötlemist
Nurgeline ng käsurea tööriist kasutas mõnda aega lapseskripte sisemiselt. Nurk 8 tõstab eelvaadet selles osas, et saate nüüd seda võimalust kasutada ka oma ülesannete täitmiseks, kui teie rakendus on kokku pandud ja kompileeritud.
"arhitekt": {"ehitamine": {"ehitaja": "@ angular-devkit / build-angular: brauser",
Üks korralik rakendus ng skriptid hõlmavad rakenduste otsest üleslaadimist pilveteenustesse. Giti hoidla pakub kasulikku skripti, mis laadib teie töö Firebase'i kontole üles.
15. Nautige paremat rännet
Arendajatelt, kes kolivad Angular 1.x-ist, mida nimetatakse ka AngularJS-iks, on olnud üsna suur osa probleemidest, kuidas navigeerija õigesti tööle panna kombineeritud rakendustes. Uue ühendatud asukohateenuse eesmärk on muuta see protsess sujuvamaks.
16. Tutvuge tööruumi juhtimisega
Suurtel projektidel on võimalus tööruumi struktuuri dünaamiliselt muuta. Seda tehakse Angular 8.0-s kasutusele võetud uue Workspace'i API kaudu - selle sammuga kaasnev koodilõik annab käitumisest kiire ülevaate.
asünkroonfunktsioon demonstreerib () {const host = tööruumid. createWorkspaceHost (uus NodeJsSyncHost ()); const tööruum = ootama tööruume. readWorkspace (’tee / tööruumi / kataloogi /’, host); const projekt = tööruum.projects. get (’minu-rakendus’); const buildTarget = projekt.sihtmärgid. saama (’ehitama’); buildTarget.options.optimization = true; ootama tööruume.writeWorkspace (tööruum, host); }
17. Kiirendage protsessi
Suurte JavaScripti koodibaaside ehitamine muutub tüütuks. AngularJSi tulevastes versioonides kasutatakse protsessi kiirendamiseks Google'i Bazeli koostamissüsteemi - kahjuks polnud see kirjutamise ajal veel valmis.
18. Väldi kõndivaid surnuid
Kuigi Google hoolitseb koodi rikkumise eest äärmiselt hoolikalt, tuleb mõned funktsioonid lihtsalt eemaldada, kuna neid pole enam vaja. Sellest amortisatsiooniloendist leiate lisateavet võimaluste kohta, mida tuleks vältida.
19. Vaadake muudatuste logi
Nagu alati, ei saa üks artikkel kunagi õigustada kogu väljaannet. Õnneks annab see muudatuste logi üksikasjaliku loetelu kõikidest muudatustest - igaks juhuks, kui soovite kunagi kontrollida endale eriti kallite funktsioonide pulssi.
Kas teil on palju faile oma saidile üleslaadimiseks valmis? Varundage need kõige usaldusväärsesse pilvemällu.
See artikkel ilmus algselt loomingulises veebidisaini ajakirjas Veebi disainer.
