Vuoi rendere il tuo sito Angular 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 configurare rapidamente un'applicazione scalabile e gestibile. Angular consente agli sviluppatori di creare applicazioni disponibili sul web, sui dispositivi mobili o sul desktop.
Contenuti di questa raccolta
Questa raccolta si concentra su cinque aree principali per ottimizzare un'applicazione Angular:
- Migliorare le prestazioni della tua applicazione per incrementare il coinvolgimento e la conversione degli utenti
- Migliorare l'affidabilità della tua applicazione sulle reti di scarsa qualità mediante la memorizzazione nella cache degli asset con il service worker Angular
- Rendere l'applicazione rilevabile per i motori di ricerca e i bot di social media tramite prerendering e 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 in modo che possa essere usata e comprensibile per tutti gli utenti
In ogni post della raccolta verranno descritte 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 Getting Started with Angular su angular.io.
Avvia un progetto
L'interfaccia a riga di comando (CLI) di Angular ti consente di configurare rapidamente una semplice applicazione Angular lato client. Questo post contiene 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 per il deployment.
Configura l'interfaccia a riga di comando
Per iniziare, installa l'interfaccia a riga di comando a livello globale e verifica di disporre della 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 successive.
In alternativa, se non vuoi installare l'interfaccia a riga di comando a livello globale, puoi installarla localmente ed eseguirla con il comando npx:
npm i @angular/cli
npx ng --version
Creare il progetto
Per creare una nuova esecuzione di progetto:
ng new my-app
Questo comando creerà i file e la struttura di cartelle iniziali per l'applicazione e installerà i moduli nodo necessari.
Una volta completata la procedura di configurazione, avvia l'applicazione eseguendo questo comando:
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 il rendimento, l'accessibilità e la SEO della tua applicazione Angular. Argomenti trattati:
- Suddivisione del codice a livello di route in Angular
- Budget delle prestazioni con l'interfaccia a riga di comando Angular
- Strategie di precaricamento del percorso in Angular
- Ottimizzazione del rilevamento delle modifiche in Angular
- Virtualizza elenchi di grandi dimensioni con il Angular CDK
- Precauzione con il Service Worker Angular
- Route di pre-rendering con interfaccia a riga di comando Angular
- 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 il codelyzer