Contenuto
- 01. Esegui un controllo della versione
- 02. Installa Angular
- 03. Crea uno scheletro di progetto
- 04. Caricamento differenziale del cablaggio
- 05. ... e guarda i risultati
- 06. Genera un web worker
- 07. Esplora il codice
- 08. Montare le impalcature
- 09. Non preoccuparti per la mancanza di costruttore
- 10. Eseguire una piccola esecuzione di compilazione
- 11. ... e trova l'output
- 12. Mettiti al lavoro
- 13. Esplora Ivy
- 14. Provare l'elaborazione ng modificata
- 15. Goditi una migrazione migliorata
- 16. Esplora il controllo dell'area di lavoro
- 17. Accelera il processo
- 18. Evita i morti viventi
- 19. Guarda il registro delle modifiche
Angular 8 è l'ultima versione di Angular di Google, uno dei migliori framework JavaScript in circolazione. In questo articolo, esamineremo le particolarità di Angular 8 e ti mostreremo come iniziare. Innanzitutto, un breve sguardo a ciò che è accaduto finora con il framework.
L'introduzione di Angular ha portato a un cambio di paradigma nello sviluppo web: mentre la maggior parte delle biblioteche si è limitata a fornire supporto agli sviluppatori con un impatto architettonico relativamente limitato, il team di sviluppatori di Angular è andato nella direzione opposta. Il loro prodotto ti costringe a utilizzare un'architettura specifica, con deviazioni che vanno da difficili a commercialmente inutili. In effetti, la maggior parte del codice Angular passa attraverso una toolchain di transpilation relativamente complessa prima che raggiunga il browser.
Grazie all'immenso successo di Angular, sia all'interno che all'esterno di Google Inc, lo sviluppo si è - nel complesso - stabilizzato. Ciò significa che le modifiche al codice di violazione sono poche, mentre gli aggiornamenti semestrali si concentrano sull'adattamento del framework ai cambiamenti nel panorama della navigazione web.
Nel caso di Angular 8, ad esempio, viene distribuito un nuovo compilatore JavaScript (anche se ancora sperimentalmente). Ottimizza il codice di compatibilità generato per essere significativamente più piccolo e più veloce a scapito dei browser meno recenti. Inoltre, il supporto Web Worker è integrato per aumentare la capacità di elaborazione di Angular. In breve, c'è molto da vedere, quindi tuffiamoci subito.
Se preferisci progettare un sito senza codice, prova uno di questi semplici costruttori di siti web. E per rendere le cose ancora più fluide, crea il tuo servizio di web hosting corretto.
01. Esegui un controllo della versione
La toolchain di Angular risiede all'interno dell'ambiente NodeJS. Al momento della stesura di questo documento, è necessario Node.js 10.9 o superiore: se ti trovi su una versione precedente, visita il sito Web Node.js e ottieni un aggiornamento. Il codice seguente mostra lo stato della versione su questa macchina.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Installa Angular
La toolchain di Angular risiede in un'utilità della riga di comando denominata ng. Può essere installato tramite il noto NPM.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angular / cli tamhan @ TAMHAN18: ~ $ ng versione
Fai attenzione a rispondere alla domanda mostrata nell'immagine qui sotto.
Ottenere informazioni sulla versione dallo strumento è piuttosto difficile: non solo la sintassi è unica, ma anche l'output è dettagliato (vedi immagine sotto).
03. Crea uno scheletro di progetto
ng genera per noi il ponteggio angolare. Nei passaggi seguenti, vogliamo aggiungere il routing e utilizzare Sass per la transpilazione CSS. Se la distribuzione non riesce per qualche motivo, svuotare la directory di lavoro e riavviare ng con diritti di superutente.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng new workertest
04. Caricamento differenziale del cablaggio
La nuova versione di Angular ottimizza il codice di compatibilità con le versioni precedenti per un impatto ridotto: un file chiamato elenco browser ti consente di decidere quali browser devono essere supportati. Aperto elenco browser e rimuovi la parola non davanti a IE 9 a IE11.
. . . > 0,5% ultime 2 versioni Firefox ESR non morto IE 9-11 # Per il supporto di IE 9-11, rimuovere "non".
05. ... e guarda i risultati
Ordinare una compilazione del progetto, passare alla cartella di distribuzione ed eliminare i file di mappa non necessari.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Richiama l'albero per vedere i risultati - ng crea più versioni di vari file di codice (vedi immagine sotto).
06. Genera un web worker
I web worker consentono a JavaScript di entrare nell'ultima frontiera delle applicazioni native: l'elaborazione massiccia parallela delle attività. Con Angular 8, è possibile creare un web worker direttamente dalla comodità di ng utilità della riga di comando.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng generate web-worker mioworker CREATE tsconfig.worker.json (212 bytes) CREATE src / app / myworker.worker.ts (157 bytes) UPDATE tsconfig.app.json (236 bytes ) AGGIORNAMENTO angular.json (3640 byte)
07. Esplora il codice
ngÈ probabile che a prima vista l'output sembri intimidatorio. Apertura del file src / app / myworker.worker.ts in un editor di codice di scelta rivela codice che dovresti conoscere bene dal WebWorker specifica. In linea di principio, il lavoratore riceve i messaggi e li elabora secondo necessità.
/// reference lib = "webworker" /> addEventListener (’message’, ({data}) => {const response = `worker response to $ {data}`; postMessage (response);});
08. Montare le impalcature
Le applicazioni angolari sono costituite da componenti. Licenziare il nostro web worker è meglio farlo all'interno di AppComponent, che viene espanso per includere un listener per OnInit evento. Per ora, emetterà solo informazioni sullo stato.
import {Component, OnInit} da "@ angular / core"; @Component ({...}) La classe di esportazione AppComponent implementa OnInit {title = 'workertest'; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Non preoccuparti per la mancanza di costruttore
Gli sviluppatori esperti di TypeScript si chiedono perché il nostro codice non utilizza il costruttore fornito dal linguaggio di programmazione. La ragione è che ngOnInit è un evento del ciclo di vita che viene attivato ogni volta che si verifica un evento di inizializzazione - questo non ha bisogno di essere correlato alla chiamata di classe.
10. Eseguire una piccola esecuzione di compilazione
A questo punto, il programma è pronto per essere eseguito. Lo eseguiremo dal server all'interno di ng, che può essere richiamato tramite il comando serve. Un aspetto interessante di questo approccio è che il programma rileva le modifiche e ricompila il progetto al volo.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng serve
Dai un'occhiata alla figura per vederlo in azione nell'immagine qui sotto.
11. ... e trova l'output
servire inserisce l'indirizzo del proprio server web locale, che di solito è http: // localhost: 4200 /. Apri la pagina web e apri gli strumenti per sviluppatori per vedere l'output dello stato. Tieni presente che console.log invia i dati alla console del browser e lascia intatta la console dell'istanza NodeJS.
12. Mettiti al lavoro
A questo punto, creiamo un'istanza del lavoratore e gli forniamo un messaggio. I suoi risultati vengono quindi visualizzati nella console del browser.
if (typeof Worker! == ’undefined’) {// Crea un nuovo const worker = new Worker (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (’page got message: $ {data }’); }; worker.postMessage (’hello’); } else {console.log ("Nessun supporto per i lavoratori"); }
13. Esplora Ivy
Le versioni future di Angular useranno un compilatore più avanzato, portando a visualizzazioni ancora più piccole. Sebbene il prodotto non sia ancora finito, uno scheletro abilitato all'edera può essere generato tramite ng new ivy-project - enable-ivy. In alternativa, modifica le impostazioni del compilatore come mostrato nello snippet.
"angularCompilerOptions": {"enableIvy": true}
Un avvertimento: Ivy porta a riduzioni di taglia incredibili, ma non è gratuito. Il prodotto deve ancora stabilizzarsi, quindi non è consigliabile utilizzarlo in ambienti produttivi.
14. Provare l'elaborazione ng modificata
Angular's ng lo strumento da riga di comando ha utilizzato internamente gli script figlio per un po 'di tempo. Angular 8 aumenta la posta in quanto ora puoi anche utilizzare questa funzione per eseguire le tue attività mentre la tua applicazione viene assemblata e compilata.
"architect": {"build": {"builder": "@ angular-devkit / build-angular: browser",
Un'ottima applicazione di ng script implica il caricamento diretto delle applicazioni sui servizi cloud. Il repository Git fornisce uno script utile che carica il tuo lavoro su un account Firebase.
15. Goditi una migrazione migliorata
Gli sviluppatori che migrano da Angular 1.x, noto anche come AngularJS, hanno avuto una buona parte di problemi nel far funzionare correttamente il navigatore in applicazioni "combinate". Il nuovo servizio di localizzazione unificato mira a rendere questo processo più agevole.
16. Esplora il controllo dell'area di lavoro
I progetti di grandi dimensioni traggono vantaggio dalla possibilità di modificare dinamicamente la struttura dello spazio di lavoro. Questo viene fatto tramite la nuova API Workspace introdotta in Angular 8.0: lo snippet che accompagna questo passaggio fornisce una rapida panoramica del comportamento.
funzione async demo () {const host = workspaces. createWorkspaceHost (new NodeJsSyncHost ()); const workspace = attende gli spazi di lavoro. readWorkspace ('path / to / workspace / directory /', host); const project = workspace.projects. get (’my-app’); const buildTarget = project.targets. get (’build’); buildTarget.options.optimization = true; attende workspaces.writeWorkspace (area di lavoro, host); }
17. Accelera il processo
La creazione di grandi basi di codice JavaScript diventa noiosa. Le versioni future di AngularJS utilizzeranno il sistema di compilazione Bazel di Google per accelerare il processo, purtroppo al momento della scrittura non era pronto per la prima serata.
18. Evita i morti viventi
Anche se Google fa molta attenzione a non rompere il codice, alcune funzionalità devono semplicemente essere rimosse poiché non sono più necessarie. Controlla questo elenco di svalutazioni per saperne di più sulle funzionalità che dovrebbero essere evitate.
19. Guarda il registro delle modifiche
Come sempre, un articolo non può mai rendere giustizia a un'intera pubblicazione. Fortunatamente, questo registro delle modifiche fornisce un elenco dettagliato di tutte le modifiche, nel caso in cui tu abbia voglia di controllare il polso di una funzione a te particolarmente cara.
Hai molti file pronti per il caricamento sul tuo sito? Esegui il backup nell'archivio cloud più affidabile.
Questo articolo è stato originariamente pubblicato nella rivista di web design creativo Web designer.
