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 gestibile e scalabile. Angular consente agli sviluppatori di creare applicazioni che vengono eseguite sul web, su dispositivi mobili o su computer.
Che cosa contiene questa raccolta?
Questa raccolta si concentra su cinque aree principali per l'ottimizzazione di un'applicazione Angular:
- Migliorare il rendimento dell'applicazione per aumentare le conversioni e il coinvolgimento degli utenti
- Migliorare l'affidabilità dell'applicazione su reti con scarsa copertura memorizzando anticipatamente gli 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
Ogni post della raccolta descriverà le tecniche che puoi applicare direttamente alle tue applicazioni.
Cosa non è presente 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 consente di configurare rapidamente una semplice applicazione Angular lato client. Questo post contiene una breve introduzione alla CLI, mentre gli altri post della raccolta mostrano come aggiungere funzionalità più avanzate come il rendering lato server e il supporto per il deployment.
Configurare 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 localmente ed eseguirla con il comando npx:
npm i @angular/cli
npx ng --version
Crea il progetto
Per creare una nuova esecuzione del progetto:
ng new my-app
Questo comando crea i file e la struttura di cartelle iniziali per l'applicazione e installa i moduli Node di cui ha bisogno.
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 scoprirai come migliorare il rendimento e la SEO della tua applicazione Angular. Ecco cosa è incluso:
- 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
- Virtualizzare elenchi di grandi dimensioni con il CDK di Angular
- Memorizzazione nella cache anticipata con il service worker Angular
- Pre-rendering delle route con Angular CLI
- Rendering lato server con Angular Universal
- Aggiungere un manifest dell'app web con Angular CLI