Vuoi rendere il tuo sito Angular il più veloce e accessibile possibile? Questo è il 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 gestibile e scalabile. Angular consente agli sviluppatori di creare applicazioni per il web, i dispositivi mobili o i computer.
Cosa contiene questa raccolta?
Questa raccolta si concentra su cinque aree principali per l'ottimizzazione di un'applicazione Angular:
- Migliorare le prestazioni dell'applicazione per aumentare le conversioni e il coinvolgimento degli utenti
- Migliorare l'affidabilità dell'applicazione su reti scadenti pre-memorizzando nella cache gli asset con il service worker Angular
- Rendere l'applicazione rilevabile per i motori di ricerca e i bot dei 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
Ogni post della raccolta descriverà tecniche che puoi applicare direttamente alle tue applicazioni.
Cosa non è incluso in questa raccolta?
Questa raccolta presuppone che tu abbia già familiarità con Angular e TypeScript. Se non hai ancora dimestichezza con questi strumenti, consulta la documentazione di TypeScript e la guida Introduzione ad Angular su angular.io.
Inizia 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 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 l'ultima versione eseguendo questi comandi:
npm i -g @angular/cli
ng version
Assicurati che l'ultimo comando restituisca la versione 8.0.3 o una versione successiva.
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
Crea il progetto
Per creare un nuovo progetto, esegui:
ng new my-app
Questo comando creerà i file iniziali e la struttura delle cartelle per la tua applicazione e installerà i moduli Node necessari.
Una volta completato il processo 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 e la SEO della tua applicazione Angular. Ecco cosa è coperto:
- Suddivisione del codice a livello di route in Angular
- Budget delle prestazioni con l'interfaccia a riga di comando Angular
- Strategie di precaricamento dei percorsi in Angular
- Ottimizzazione del rilevamento delle modifiche in Angular
- Virtualizza elenchi di grandi dimensioni con Angular CDK
- Precaricamento con il service worker Angular
- Prerenderizza le route con l'interfaccia a riga di comando Angular
- Rendering lato server con Angular Universal
- Aggiungi un manifest dell'app web con l'interfaccia a riga di comando Angular