Sadržaj
- 01. Pokrenite provjeru verzije
- 02. Instalirajte Angular
- 03. Stvorite kostur projekta
- 04. Opterećenje diferencijala kabelskog svežnja
- 05. ... i pogledajte rezultate
- 06. Mrijest web radnika
- 07. Istražite kod
- 08. Postavite skelu
- 09. Ne brinite zbog nedostatka konstruktora
- 10. Izvršite mali pogon kompajliranja
- 11. ... i pronađite izlaz
- 12. Krenite na posao
- 13. Istražite Ivy
- 14. Pokušajte s modificiranom ng obradom
- 15. Uživajte u poboljšanoj migraciji
- 16. Istražite kontrolu radnog prostora
- 17. Ubrzati postupak
- 18. Izbjegavajte hodajuće mrtve
- 19. Pogledajte dnevnik promjena
Angular 8 je najnovija verzija Googleova Angular-a - jednog od najboljih JavaScript okvira. U ovom ćemo članku proći kroz ono što je posebno u Angular 8 i pokazati vam kako započeti. Prvo, kratki osvrt na ono što se dosad dogodilo s okvirom.
Uvod Angulala doveo je do promjene paradigme u web razvoju: dok se većina knjižnica ograničila na pružanje podrške programerima s relativno ograničenim arhitektonskim utjecajem, tim programera Angulala krenuo je u drugom smjeru. Njihov vas proizvod prisiljava da koristite određenu arhitekturu, s odstupanjima u rasponu od teških do komercijalno besmislenih. Zapravo, većina kutnog koda prolazi kroz relativno složen alatni lanac za prevođenje prije nego što ikad pogodi preglednik.
Zahvaljujući golemom uspjehu tvrtke Angular, kako unutar tako i izvan Google Inc, razvoj se, u velikoj mjeri, stabilizirao. To znači da je malo promjena kodova, dok su polugodišnje nadogradnje usmjerene na prilagođavanje okvira promjenama u okruženju pregledavanja weba.
Na primjer, u slučaju Angular 8, instaliran je novi JavaScript kompajler (iako još uvijek eksperimentalno). Optimizira generirani kod kompatibilnosti da bude znatno manji i brži na štetu starijih preglednika. Nadalje, podrška za Web Worker integrirana je kako bi se povećala sposobnost obrade tvrtke Angular. Ukratko, puno se toga može vidjeti - zato zaronimo odmah unutra.
Ako biste radije dizajnirali web mjesto bez koda, isprobajte jednog od ovih jednostavnih alata za izradu web stranica. Da bi stvari tekle glatko, ispravite svoju uslugu web hostinga.
01. Pokrenite provjeru verzije
Lančani alatni sustav tvrtke Angular živi unutar NodeJS okruženja. Od pisanja ovog članka potreban je Node.js 10.9 ili noviji - ako se nađete na starijoj verziji, posjetite web mjesto Node.js i nabavite nadogradnju. Donji kod prikazuje status verzije na ovom stroju.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Instalirajte Angular
Lančani alatni kut smješten je u uslužnom programu naredbenog retka pod nazivom ng. Može se instalirati putem dobro poznatog NPM-a.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng verzija
Budite oprezni i odgovorite na pitanje prikazano na donjoj slici.
Izvaditi podatke o verziji iz alata prilično je teško - ne samo da je sintaksa jedinstvena, već je i ishod detaljan (vidi sliku dolje).
03. Stvorite kostur projekta
ng generira kutnu skelu za nas. U sljedećim koracima želimo dodati usmjeravanje i koristiti Sass za CSS transpilaciju. Ako implementacija iz nekog razloga ne uspije, ispraznite radni direktorij i ponovno pokrenite ng s pravima superkorisnika.
tamhan @ TAMHAN18: ~ $ mkdir kutni prostor tamhan @ TAMHAN18: ~ $ cd kutni prostor / tamhan @ TAMHAN18: ~ / angularspace $ ng novi radnički test
04. Opterećenje diferencijala kabelskog svežnja
Nova verzija Angulala optimizira povratni kod kompatibilnosti radi smanjenog utjecaja - datoteka zvana lista preglednika omogućuje vam odlučivanje koji preglednici će biti podržani. Otvorena lista preglednika i ukloni riječ ne ispred IE 9 do IE11.
. . . > 0,5% zadnje 2 verzije Firefox ESR nije mrtav IE 9-11 # Za podršku za IE 9-11 uklonite 'not'.
05. ... i pogledajte rezultate
Naručite kompajliranje projekta, promijenite ga u mapu za distribuciju i očistite nepotrebne datoteke s kartama.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Pozovite stablo da biste vidjeli rezultate - ng stvara više verzija različitih kodnih datoteka (vidi sliku dolje).
06. Mrijest web radnika
Web zaposlenici dopuštaju JavaScriptu da uđe u zadnju granicu nativnih aplikacija: masovno paralelna obrada zadataka. Uz Angular 8, web radnik može se stvoriti izravno iz udobnosti ng uslužni program naredbenog retka.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng generiraj web-worker myworker STVARI tsconfig.worker.json (212 bajtova) CREATE src / app / myworker.worker.ts (157 bajtova) AŽURIRAJ tsconfig.app.json (236 bajtova ) AŽURIRANJE angular.json (3640 bajtova)
07. Istražite kod
ngIzlaz će na prvi pogled izgledati zastrašujuće. Otvaranje datoteke src / app / myworker.worker.ts u odabranom uređivaču koda otkriva kod koji biste trebali dobro znati iz WebWorker specifikacija. U principu, radnik prima poruke i obrađuje ih po potrebi.
/// referenca lib = "webworker" /> addEventListener ('message', ({data}) => {const response = `odgovor radnika na $ {data}`; postMessage (response);});
08. Postavite skelu
Kutne primjene sastoje se od komponenata. Otpuštanje našeg web radnika najbolje je obaviti unutar AppComponent, koji je proširen tako da uključuje slušatelja za OnInit događaj. Za sada će emitirati samo informacije o statusu.
uvoz {Component, OnInit} iz '@ angular / core'; @Component ({...}) Klasa izvoza AppComponent implementira OnInit {title = 'workertest'; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Ne brinite zbog nedostatka konstruktora
Iskusni programeri TypeScript pitaju se zašto naš kod ne koristi konstruktor koji pruža programski jezik. Razlog tome je taj ngOnInit je događaj životnog ciklusa koji se aktivira kad god se dogodi događaj inicijalizacije - to ne treba povezati s pozivanjem klase.
10. Izvršite mali pogon kompajliranja
U ovom trenutku, program je spreman za pokretanje. Izvršit ćemo ga s poslužitelja unutar ng, koji se može pozvati putem naredbe serve. Ugodan aspekt ovog pristupa je taj što program otkriva promjene i ponovno kompajlira projekt u hodu.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Pogledajte sliku da biste to vidjeli na djelu na donjoj slici.
11. ... i pronađite izlaz
ng poslužiti putput daje adresu svog lokalnog web poslužitelja, što je obično http: // localhost: 4200 /. Otvorite web stranicu i otvorite alate za programere da biste vidjeli izlaz statusa. Imajte na umu da konzola.log izvodi podatke na konzolu preglednika i ostavlja netaknutu konzolu instance NodeJS.
12. Krenite na posao
U ovom trenutku izrađujemo primjerak radnika i pružamo mu poruku. Rezultati se zatim prikazuju na konzoli preglednika.
if (typeof Worker! == ’undefined’) {// Stvori novi const worker = new Worker (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (’stranica je dobila poruku: $ {data }’); }; worker.postMessage (‘zdravo’); } else {console.log ("Nema podrške za radnike"); }
13. Istražite Ivy
Buduće verzije Angulala koristit će napredniji kompajler, što dovodi do još manjih prikaza. Iako proizvod još nije gotov, preko njega se može izroditi kostur s bršljanom novi projekt bršljana - omogući-bršljan. Alternativno, promijenite postavke kompajlera kao što je prikazano u isječku.
"angularCompilerOptions": {"enableIvy": true}
Riječ upozorenja: Bršljan dovodi do nevjerojatnog smanjenja veličine, ali nije besplatan. Proizvod se još nije stabilizirao, pa se ne preporučuje njegova upotreba u produktivnim okruženjima.
14. Pokušajte s modificiranom ng obradom
Angular's ng Alat naredbenog retka neko je vrijeme interno koristio podređene skripte. Kutni 8 povećava ante u tome što sada, također, možete koristiti ovu mogućnost za pokretanje vlastitih zadataka dok se vaša aplikacija sastavlja i kompajlira.
"architect": {"build": {"builder": "@ angular-devkit / build-angular: browser",
Jedna uredna aplikacija ng skripte uključuje izravno učitavanje aplikacija na usluge u oblaku. Git spremište pruža korisnu skriptu koja vaš rad prenosi na Firebase račun.
15. Uživajte u poboljšanoj migraciji
Programeri koji migriraju s Angular 1.x-a, poznatog i kao AngularJS, imali su popriličan broj problema s pokretanjem navigatora kako bi radio ispravno u 'kombiniranim' aplikacijama. Nova Unified Location Service želi ovaj proces učiniti lakšim.
16. Istražite kontrolu radnog prostora
Veliki projekti imaju koristi od mogućnosti dinamičke promjene strukture radnog prostora. To se postiže putem novog API-ja Workspace predstavljenog u programu Angular 8.0 - isječak koji prati ovaj korak pruža brzi pregled ponašanja.
async funkcija demonstriraj () {const host = radni prostori. createWorkspaceHost (novi NodeJsSyncHost ()); const radni prostor = čekati radne prostore. readWorkspace (’put / do / radnog prostora / direktorija /’, domaćin); const projekt = radni prostor.projekti. get ('moja-aplikacija'); const buildTarget = project.targets. get ('graditi'); buildTarget.options.optimization = true; čekajte workspaces.writeWorkspace (radni prostor, host); }
17. Ubrzati postupak
Izgradnja velikih baza JavaScript koda postaje zamorna. Buduće verzije AngularJS služit će se Googleovim sustavom gradnje Bazel kako bi ubrzale postupak - nažalost, u vrijeme pisanja ovog članka nije bio spreman za prvo vrijeme.
18. Izbjegavajte hodajuće mrtve
Iako Google izuzetno pazi da ne razbije kôd, neke značajke jednostavno treba ukloniti jer više nisu potrebne. Provjerite ovaj popis amortizacija da biste saznali više o značajkama koje treba izbjegavati.
19. Pogledajte dnevnik promjena
Kao i uvijek, jedan članak nikada ne može pravdati cijelo izdanje. Srećom, ovaj zapisnik promjena pruža detaljan popis svih promjena - samo u slučaju da vam se ikada prohtije provjeriti puls vama posebno drage značajke.
Imate puno datoteka spremnih za prijenos na vaše web mjesto? Napravite ih sigurnosne kopije u najpouzdanijoj pohrani u oblaku.
Ovaj je članak izvorno objavljen u časopisu kreativnog web dizajna Web dizajner.
