Creare una Single Page Application con AngularJS
Con l'avvento di AJAX e del web 2.0, il JavaScript ha preso sempre più piede nelle applicazioni web. Quest'esplosione nell'utilizzo di codice JavaScript ha portato alla luce la necessità di aggiungere funzionalità al linguaggio. Parte di queste funzionalità sono state aggiunte con le specifiche di EcmaScript 5 mentre un'altra parte verrà aggiunta quando verranno ufficialmente rilasciate le specifiche di EcmaScript 6 (si parla di giugno 2015 quindi ci siamo). Grazie a queste specifiche il JavaScript si è arricchito di tali funzionalità da permetterci di creare applicazioni che girano interamente sul client e che sfruttano il server solamente per scaricare frammenti di HTML, JavaScript e dati. Queste applicazioni prendono il nome di Single Page Application (SPA d'ora in poi).
Creare una SPA manualmente da zero non è una cosa banale perché il codice di infrastruttura da gestire, come vedremo, è notevole. Per questo motivo sono stati creati diversi framework per semplificare lo sviluppo di SPA; i framework più diffusi al momento sono AngularJS (di cui pareremo in questo articolo) e DurandalJS.
AngularJS è sicuramente il framework più diffuso in assoluto grazie alla sua notevole potenza e al fatto di essere un prodotto a marchio Google (sebbene non sia un prodotto ufficiale). Entrambi i framework supportano i browser meno moderni quindi sono ideali per sviluppare SPA che devono girare anche su browser più vecchi come IE8. Prima di entrare nel dettaglio di AngularJS, vediamo come funziona una SPA.
Funzionamento di una Single Page Application
Una SPA è composta da una pagina HTML che scarica i file JavaScript necessari all'applicazione. La pagina HTML contiene un tag (tipicamente un div) che diventa il contenitore dell'intera applicazione. A questo punto entrano in azione il codice JavaScript che scarica dal server un frammento di HTML corrispondente alla home page della nostra SPA.
Oltre al frammento HTML, viene scaricato anche il file JavaScript responsabile dell'interazione con la home page. A questo punto il frammento di HTML viene inserito nel div che agisce come contenitore quindi l'utente vede la sua home page (ovviamente il frammento di HTML scaricato non è un'intera pagina ma solo la parte visuale dell'HTML).
Nel momento in cui l'utente naviga verso un'altra pagina, la navigazione viene intercettata dal JavaScript che si occupa di recuperare il frammento di HTML e il codice JavaScript della pagina a cui l'utente sta navigando. Successivamente, il codice HTML contenuto nel frammento scaricato viene inserito all'interno del div contenitore rimpiazzando quello della home page.
Essendo questa navigazione interamente gestita da codice JavaScript, la pagina sul browser non viene mai completamente ricaricata ed è questo il motivo per cui questo tipo di applicazione viene definita Single Page Application.
Come si può capire dall'esempio appena proposto, il codice da scrivere per creare una SPA da zero è notevole in quanto ci dobbiamo occupare della gestione della navigazione, del cambiare il contenuto del div dopo ogni navigazione, dello scaricare i file HTML e JavaScript necessari e molto altro ancora. AngularJS viene in nostro soccorso astraendoci da tutti questi dettagli tecnici e permettendoci di lavorare esclusivamente sul codice che più ci interessa: quello di business.
Le SPA hanno ovviamente vantaggi e svantaggi. I più grossi vantaggi consistono nell'elevata usabilità e nelle elevate performance dell'applicazione. Poiché la maggior parte del codice gira sul client e la pagina non viene mai ricaricata grazie al fatto che tutte le richieste al server sono AJAX (ovviamente eccetto la prima), l'utente ha la sensazione di lavorare quasi con un'applicazione Windows. Inoltre, sempre poiché il codice gira in gran parte sul client, il server viene sollevato da molti compiti e quindi può evadere più richieste.
Il grosso svantaggio delle SPA consiste nell'enorme quantità di codice JavaScript da scrivere per mantenerle. Sebbene con un po' di organizzazione si possa scrivere codice JavaScript ordinato e manutenibile, lo sviluppo in JavaScript è complicato e soggetto a errori. Per chi non ha buone conoscenze di JavaScript, la curva di apprendimento per lo sviluppo di una SPA può essere molto elevata.
Le basi di AngularJS
AngularJS è composto da diverse funzionalità le cui principali sono elencate di seguito:
- View: rappresenta il frammento HTML che viene mostrato all'utente.
- Controller: rappresenta la classe che gestisce il comportamento di una view.
- Factory: rappresenta una factory per creare oggetti (utile per generare istanze di servizi).
- Modulo: rappresenta un contenitore che può avere al suo interno sia controller che factory che altre funzionalità di AngularJS.
- Routing: rappresenta il sistema che associa un url a una view e gestisce la navigazione e lo scaricamento dei frammenti di HTML dal server.
Creare una demo per AngularJS è molto semplice e non richiede un grande sforzo. Tuttavia, creare un'applicazione ben strutturata richiede invece alcuni passaggi. Il primo passo consiste nella creazione del modulo principale.
Creare un modulo
La prima cosa che dobbiamo creare in un'applicazione sviluppata con AngularJS è il modulo principale. Per creare un modulo dobbiamo usare la funzione module della classe angular. La funzione accetta in input una stringa, che rappresenta il nome del modulo, e un array di stringhe che rappresentano il nome di altri moduli da cui il modulo principale dipende e ritorna l'istanza del modulo (un oggetto di tipo angular). Il prossimo esempio mostra il codice necessario a creare il modulo principale.
(function () {
'use strict';
var app = angular.module('app', ['ngRoute', 'customers']);Il modulo principale è generalmente responsabile della configurazione del sistema di routing. Poiché il sistema di routing fa parte del modulo ngRoute, questo viene importato dal modulo principale. Andiamo ora a vedere come configurare il sistema di routing che rappresenta il secondo passo nella creazione di una SPA con AngularJS. Il modulo customer verrà discusso in seguito.
Configurare il sistema di routing
Il sistema di routing in AngularJS è in genere configurato nel modulo principale così da renderlo disponibile non appena l'applicazione parte. Per configurare il sistema di routing dobbiamo utilizzare il metodo config della classe angular. Questo metodo accetta in input il nome del servizio da configurare, che nel nostro caso è il $routeProvider, e la funzione che accetta in input l'istanza di $routeProvider e la configura.
Questa funzione utilizza il metodo when del $routeProvider che accetta in input una stringa contenente un url e un oggetto che specifica la view (proprietà templateUrl) e il controller (proprietà controller) da utilizzare, o un url a cui redirigere l'applicazione (proprietà redirectTo) quando si naviga verso l'url specificato come primo parametro. Nel prossimo snippet mettiamo in codice quanto spiegato finora.
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', { redirectTo: '/customers' });
$routeProvider.when('/customers',
{ templateUrl: 'app/customers/index.html', controller: 'customerList' });
$routeProvider.when('/customer/:id',
{ templateUrl: 'app/customers/details.html', controller: 'customerDetail' });
$routeProvider.otherwise('/');
}]);In questo codice ci sono due cose da approfondire ulteriormente.
La prima è l'url “/customer/:id". La sintassi :id specifica che quando si invoca questo url dobbiamo passare il parametro id e che questo parametro viene passato in input al controller customerDetail.
La seconda è il metodo otherwise. Questo metodo specifica quale url invocare se l'applicazione naviga verso un url sconosciuto cioè non configurato tramite il metodo when.
A questo punto il sistema di routing è configurato quindi la nostra applicazione è pronta per rispondere alla navigazione.
Contenuti dell'articolo
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Installare le Web App site extension tramite una pipeline di Azure DevOps
Creare un'applicazione React e configurare Tailwind CSS
Ottimizzazione dei block template in Angular 17
Come migrare da una form non tipizzata a una form tipizzata in Angular
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Proteggere le risorse Azure con private link e private endpoints
Disabilitare automaticamente un workflow di GitHub
Generare velocemente pagine CRUD in Blazor con QuickGrid
Migliorare l'organizzazione delle risorse con Azure Policy
Effettuare il binding di date in Blazor
Utilizzare i primary constructor di C# per inizializzare le proprietà
Gestire il colore CSS con HWB
Top Ten Articoli
- Realizzare una Progressive Web Application con Blazor e ASP.NET Core
di Giampaolo Tucci - Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
di Morgan Pizzini - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Le novità di Blazor in .NET 6.0
di Morgan Pizzini - Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - Le novità di ASP.NET Core 5
di Marco De Sanctis
Articoli via e-mail
Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!
In primo piano
I più letti di oggi
In evidenza
- Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
- Eseguire script pre e post esecuzione di un workflow di GitHub
- Creare una libreria CSS universale: Cards
- Migliorare l'organizzazione delle risorse con Azure Policy
- Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
- Leggere la posta usando il protocollo IMAP tramite la libreria MailKit
- Eseguire una ricerca avanzata per recuperare le issue di GitHub
- Creare una libreria CSS universale: Clip-path