Vuoi rendere il tuo sito Angular il più veloce e accessibile possibile? Sei nel posto giusto.
Che cos'è Angular?
Angular è un framework per la creazione di interfacce utente. Fornisce i componenti di base per aiutarti a configurare rapidamente un'applicazione scalabile e gestibile. Angular consente agli sviluppatori di creare applicazioni da web, mobile o desktop.
Cosa c'è in questa raccolta?
Questa raccolta si concentra su cinque aree principali per ottimizzare un'applicazione Angular:
- Migliorare le prestazioni della tua applicazione per aumentare le conversioni e il coinvolgimento degli utenti
- Migliorare l'affidabilità della tua applicazione nelle reti di scarsa qualità eseguendo la pre-memorizzazione nella cache degli asset con il service worker Angular
- Rendere la tua applicazione rilevabile per i motori di ricerca e i bot di social media utilizzando il prerendering e il rendering lato server
- Rendere l'applicazione installabile per offrire un'esperienza utente simile a quella di un'app per iOS/Android
- Migliorare l'accessibilità dell'applicazione per renderla utilizzabile e comprensibile per tutti gli utenti
Ogni post della raccolta descriverà le tecniche che puoi applicare direttamente alle tue applicazioni.
Cosa non c'è in questa raccolta?
Questa raccolta presuppone che tu abbia già familiarità con Angular e TypeScript. Se non ti senti ancora a tuo agio, consulta la documentazione di TypeScript e la guida introduttiva di Angular su angular.io.
Avvia un progetto
L'interfaccia a riga di comando (CLI) di Angular consente di configurare rapidamente una semplice applicazione Angular lato client. Questo post presenta una breve introduzione all'interfaccia a riga di comando, mentre altri post della raccolta mostrano come aggiungere funzionalità più avanzate, come il rendering lato server e il supporto del deployment.
Configura l'interfaccia a riga di comando
Per iniziare, installa l'interfaccia a riga di comando a livello globale e verifica di avere la versione più recente eseguendo questi comandi:
npm i -g @angular/cli
ng --version
Assicurati che l'ultimo comando restituisca la versione 8.0.3 o successiva.
In alternativa, se non vuoi installare l'interfaccia a riga di comando a livello globale, puoi installarla in locale ed eseguirla con il comando npx:
npm i @angular/cli
npx ng --version
Creare il progetto
Per creare un nuovo progetto, esegui:
ng new my-app
Questo comando creerà i file iniziali e la struttura di cartelle per l'applicazione e installerà i moduli del nodo necessari.
Una volta completata la procedura di configurazione, avvia l'applicazione eseguendo:
cd my-app
ng serve
Ora dovresti essere in grado di accedere alla tua applicazione all'indirizzo http://localhost:4200.
Passaggi successivi
Nel resto di questa raccolta imparerai a migliorare le prestazioni, l'accessibilità e la SEO della tua applicazione Angular. Gli argomenti trattati sono i seguenti:
- Suddivisione del codice a livello di route in Angular
- Budget delle prestazioni con l'interfaccia a riga di comando Angular
- Strategie di precaricamento delle route in Angular
- Ottimizzazione del rilevamento delle modifiche in Angular
- Virtualizza elenchi di grandi dimensioni con Angular CDK
- Pre-memorizzazione nella cache con il Service worker Angular
- Pre-rendering delle route con Angular CLI
- Rendering lato server con Angular Universal
- Aggiungi il manifest di un'app web con l'interfaccia a riga di comando Angular
- Controllo dell'accessibilità con codelyzer