Nilalaman
- 01. Patakbuhin ang isang tseke sa bersyon
- 02. I-install ang Angular
- 03. Lumikha ng isang balangkas ng proyekto
- 04. Pag-load ng kaugalian ng harness
- 05. ... at tingnan ang mga resulta
- 06. Nagbubunga ng isang manggagawa sa web
- 07. Galugarin ang code
- 08. I-set up ang plantsa
- 09. Huwag mag-alala tungkol sa kakulangan ng tagapagbuo
- 10. Isagawa ang isang maliit na compile run
- 11. ... at hanapin ang output
- 12. Pumasok sa trabaho
- 13. Galugarin si Ivy
- 14. Subukang binago ang pagproseso
- 15. Masisiyahan sa pinabuting paglipat
- 16. Tuklasin ang kontrol sa workspace
- 17. Mapabilis ang proseso
- 18. Iwasan ang patay na naglalakad
- 19. Tingnan ang log ng pagbabago
Ang Angular 8 ay ang pinakabagong bersyon ng Angular ng Google - isa sa pinakamahusay na mga balangkas ng JavaScript sa paligid. Sa artikulong ito, tatakbo namin kung ano ang espesyal tungkol sa Angular 8, at ipapakita sa iyo kung paano magsimula. Una, isang maikling pagbabalik tanaw sa kung ano ang nangyari sa balangkas sa ngayon.
Ang pagpapakilala ni Angular ay humantong sa isang pagbabago ng paradaym sa pag-unlad ng web: habang ang karamihan sa mga aklatan ay nililimitahan ang kanilang sarili sa pagbibigay ng suporta sa mga developer na may limitadong epekto sa arkitektura, ang pangkat ng developer ng Angular ay nagpunta sa ibang direksyon. Pinipilit ka ng kanilang produkto na gumamit ng isang tukoy na arkitektura, na may mga paglihis mula sa mahirap hanggang sa walang katuturang komersyal. Sa katunayan, ang karamihan sa Angular code ay tumatakbo sa pamamagitan ng isang medyo kumplikadong toolbar ng pagbabago bago ito tumama sa browser.
Dahil sa napakalawak na tagumpay ng Angular, kapwa sa loob at labas ng Google Inc, ang pag-unlad ay - sa pamamagitan at malaki - ay nagpapatatag. Nangangahulugan ito na ang paglabag sa mga pagbabago sa code ay kakaunti, habang ang mga semi-taunang pag-upgrade ay nakatuon sa pagbagay ng balangkas sa mga pagbabago sa web browsing landscape.
Sa kaso ng Angular 8, halimbawa, isang bagong tagabuo ng JavaScript ang na-deploy (kahit na eksperimento pa rin). Ini-optimize nito ang nabuong code ng pagiging tugma upang maging mas maliit at mas mabilis sa kapinsalaan ng mga mas lumang browser. Bukod dito, ang suporta ng Web Worker ay isinama upang madagdagan ang kakayahan sa pagproseso ng Angular. Sa madaling salita, maraming makikita - kaya't sumisid tayo kaagad.
Kung mas gugustuhin mong magdisenyo ng isang site nang walang code, subukan ang isa sa mga madaling tagabuo ng website na ito. At upang mas maging maayos ang pagpapatakbo ng mga bagay, tama ang iyong serbisyo sa web hosting.
01. Patakbuhin ang isang tseke sa bersyon
Ang toolbar ng Angular ay nakatira sa loob ng kapaligiran ng NodeJS. Tulad ng pagsusulat na ito, kinakailangan ang Node.js 10.9 o mas mahusay - kung nakita mo ang iyong sarili sa isang mas matandang bersyon, bisitahin ang website ng Node.js at makakuha ng isang pag-upgrade. Ipinapakita ng code sa ibaba ang katayuan ng bersyon sa machine na ito.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. I-install ang Angular
Ang toolbar ng Angular ay naninirahan sa isang utos ng linya ng utos na pinangalanan ng. Maaari itong mai-install sa pamamagitan ng kilalang NPM.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / kli tamhan @ TAMHAN18: ~ $ ng bersyon
Mag-ingat na sagutin ang tanong na ipinakita sa imahe sa ibaba.
Ang pagkuha ng impormasyon ng bersyon mula sa tool ay medyo mahirap - hindi lamang natatangi ang syntax, ngunit ang output ay verbose din (tingnan ang imahe sa ibaba).
03. Lumikha ng isang balangkas ng proyekto
ng bumubuo ng Angular scaffolding para sa amin. Sa mga sumusunod na hakbang, nais naming magdagdag ng pagruruta, at gamitin ang Sass para sa transpilation ng CSS. Kung nabigo ang pag-deploy sa ilang kadahilanan, alisan ng laman ang gumaganang direktoryo, at i-restart ng na may mga karapatang superuser.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng new workertest
04. Pag-load ng kaugalian ng harness
Ang bagong bersyon ng Angular ay na-optimize ang paatras na code ng pagiging magkasama para sa pinababang epekto - isang file na tinawag browser list hinahayaan kang magpasya kung aling mga browser ang susuportahan. Buksan browser list at alisin ang salita hindi sa harap ng IE 9 hanggang IE11.
. . . > 0.5% huling 2 bersyon ng Firefox ESR hindi namatay IE 9-11 # Para sa suporta ng IE 9-11, alisin ang hindi ’.
05. ... at tingnan ang mga resulta
Mag-order ng isang compile ng proyekto, baguhin sa folder ng pamamahagi at i-purge ang mga hindi kinakailangang mga file ng mapa.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Panawagan ang puno upang makita ang mga resulta - ng lumilikha ng maraming mga bersyon ng iba't ibang mga file ng code (tingnan ang imahe sa ibaba).
06. Nagbubunga ng isang manggagawa sa web
Hinayaan ng mga manggagawa sa web na ipasok ng JavaScript ang huling hangganan ng mga katutubong application: napakalaking parallel na pagproseso ng mga gawain. Sa Angular 8, ang isang manggagawa sa web ay maaaring malikha mula mismo sa ginhawa ng ng utos ng utos ng utos.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng generate web-worker myworker CREATE tsconfig.worker.json (212 bytes) CREATE src / app / myworker.worker.ts (157 bytes) I-UPDATE tsconfig.app.json (236 bytes ) I-UPDATE angular.json (3640 bytes)
07. Galugarin ang code
ngAng output ay malamang na magmukhang nakakatakot sa unang tingin. Pagbukas ng file src / app / myworker.worker.ts sa isang code editor ng pagpipilian ay nagpapakita ng code na dapat mong malaman ng mabuti mula sa WebWorker detalye Sa prinsipyo, ang manggagawa ay tumatanggap ng mga mensahe at pinoproseso ang mga ito kung kinakailangan.
/// reference lib = "webworker" /> addEventListener (’message’, ({data}) => {const response = `tugon ng manggagawa sa $ {data}`; postMessage (tugon);});
08. I-set up ang plantsa
Angular na mga application ay binubuo ng mga bahagi. Ang pagpapaputok sa aming manggagawa sa web ay pinakamahusay na ginagawa sa loob ng AppComponent, na pinalawak upang isama ang isang tagapakinig para sa OnInit pangyayari Sa ngayon, maglalabas lamang ito ng impormasyon sa katayuan.
i-import ang {Component, OnInit} mula sa '@ angular / core'; @Component ({..}) Klase sa pag-export ang AppComponent ay nagpapatupad ng OnInit {title = ’workertest’; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Huwag mag-alala tungkol sa kakulangan ng tagapagbuo
Ang mga nakaranasang tagabuo ng TypeScript ay nagtanong sa kanilang sarili kung bakit hindi ginagamit ng aming code ang tagapagbuo na ibinigay ng wikang nagprogram. Ang dahilan para diyan ay iyon ngOnInit ay isang pangyayari sa lifecycle na napaputok tuwing magaganap ang isang kaganapan sa initialisation - hindi ito kailangang maiugnay sa pag-uusap sa klase.
10. Isagawa ang isang maliit na compile run
Sa puntong ito ng oras, ang programa ay handa nang patakbuhin. Isasagawa namin ito mula sa server sa loob ng ng, na maaaring makuha sa pamamagitan ng command na maghatid. Ang isang maayos na aspeto ng pamamaraang ito ay na ang programa ay nakakakita ng mga pagbabago at muling nagkakasama ng proyekto nang mabilis.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Tingnan ang pigura upang makita ito sa pagkilos sa imahe sa ibaba.
11. ... at hanapin ang output
ng maglingkod inilalagay ang address ng lokal na web server, na karaniwang http: // localhost: 4200 /. Buksan ang web page at buksan ang mga tool ng developer upang makita ang output output. Tandaan mo yan console.log naglalabas ng data sa browser console at iniiwan ang console ng halimbawa ng NodeJS na hindi nagalaw.
12. Pumasok sa trabaho
Sa puntong ito ng oras, lumilikha kami ng isang halimbawa ng manggagawa at binibigyan namin ito ng isang mensahe. Ang mga resulta nito ay ipinapakita sa browser console.
kung (typeof Worker! == 'hindi natukoy') {// Lumikha ng isang bagong const worker = bagong Worker ('./ myworker.worker', {type: 'module'}); worker.onmessage = ({data}) => {console.log (’nakuha ng pahina ang mensahe: $ {data }’); }; manggagawa.postMessage ('hello'); } iba pa {console.log ("Walang suporta sa manggagawa"); }
13. Galugarin si Ivy
Ang mga hinaharap na bersyon ng Angular ay gagamit ng isang mas advanced na tagatala, na humahantong sa kahit na mas maliit na mga view. Habang ang produkto ay hindi pa natatapos, ang isang skeleton na pinagana ng ivy ay maaaring maglaan sa pamamagitan ng ng bagong ivy-project - paganahin-ivy. Bilang kahalili, baguhin ang mga setting ng tagatala tulad ng ipinakita sa snippet.
"angularCompilerOptions": {"enableIvy": true}
Isang salita ng babala: Ang Ivy ay humahantong sa kamangha-manghang mga pagbawas sa laki, ngunit hindi ito libre. Ang produkto ay hindi pa nagpapatatag, kaya't ang paggamit nito sa mga produktibong kapaligiran ay hindi inirerekomenda.
14. Subukang binago ang pagproseso
Angular's ng ang tool ng command line na ginamit sa loob ng mga script ng bata sa loob ng ilang oras. Angular 8 up ang ante sa maaari mo na rin, ngayon, gamitin ang pasilidad na ito upang patakbuhin ang iyong sariling mga gawain habang ang iyong aplikasyon ay binuo at naipon.
"arkitekto": {"build": {"builder": "@ angular-devkit / build-angular: browser",
Isang maayos na aplikasyon ng ng Ang mga script ay nagsasangkot ng direktang pag-upload ng mga application sa mga serbisyong cloud. Nagbibigay ang repository ng Git ng isang kapaki-pakinabang na script na nag-a-upload ng iyong trabaho sa isang Firebase account.
15. Masisiyahan sa pinabuting paglipat
Ang mga nag-develop na lumilipat mula sa Angular 1.x, na kilala rin bilang AngularJS, ay nagkaroon ng patas na bahagi ng mga isyu sa pagkuha ng navigator na gumana mismo sa mga pinagsamang application. Nilalayon ng bagong Pinag-isang Serbisyo ng Lokasyon na gawing mas maayos ang prosesong ito.
16. Tuklasin ang kontrol sa workspace
Ang mga malalaking proyekto ay nakikinabang mula sa kakayahang baguhin ang istraktura ng workspace nang pabago-bago. Ginagawa ito sa pamamagitan ng bagong Workspace API na ipinakilala sa Angular 8.0 - ang snippet na kasama ang hakbang na ito ay nagbibigay ng isang mabilis na pangkalahatang ideya ng pag-uugali.
Ipinapakita ng pagpapaandar ng async () {const host = workspaces. createWorkspaceHost (bagong NodeJsSyncHost ()); const workspace = naghihintay sa mga workspace. readWorkspace (’path / to / workspace / direktoryo /’, host); const project = workspace.projects. kumuha ('my-app'); const buildTarget = proyekto.targets. kumuha ('build'); buildTarget.options.optimization = totoo; naghihintay sa mga workspace.writeWorkspace (workspace, host); }
17. Mapabilis ang proseso
Nakakapagod ang pagbuo ng malalaking mga code ng JavaScript code. Ang mga hinaharap na bersyon ng AngularJS ay gagamit ng Bazel build system ng Google upang mapabilis ang proseso - nakalulungkot, sa oras ng pagsulat ay hindi ito handa para sa primetime.
18. Iwasan ang patay na naglalakad
Kahit na ang Google ay nag-iingat ng matindi upang hindi masira ang code, ang ilang mga tampok ay kailangang alisin lamang dahil hindi na ito kinakailangan. Suriin ang listahan ng mga pagpapababang ito upang malaman ang tungkol sa mga tampok na dapat na iwasan.
19. Tingnan ang log ng pagbabago
Tulad ng dati, ang isang artikulo ay hindi kailanman maaaring gumawa ng hustisya sa isang buong pagpapalaya. Sa kasamaang palad, ang log ng pagbabago na ito ay nagbibigay ng isang detalyadong listahan ng lahat ng mga pagbabago - kung sakaling naramdaman mong suriin ang pulso ng isang tampok lalo na ang mahal ko.
Handa na ba ang maraming mga file para ma-upload sa iyong site? I-back up ang mga ito sa pinaka maaasahang imbakan ng ulap.
Ang artikulong ito ay orihinal na na-publish sa magazine ng disenyo ng malikhaing web Taga-disenyo ng web.
