Applicazioni a pagina singola single-page-applications

Le applicazioni a pagina singola (SPA) hanno raggiunto la massa critica, ampiamente considerate come il modello più efficace per creare esperienze senza soluzione di continuità con la tecnologia web. Seguendo un modello di applicazione a pagina singola, puoi creare un’applicazione che funziona in modo identico a un’app desktop o mobile, ma che raggiunge una moltitudine di piattaforme per dispositivi e fattori di forma grazie alla sua base negli standard web aperti.

In generale, le applicazioni a pagina singola appaiono più performanti dei siti web tradizionali basati su pagina perché in genere caricano una pagina HTML completa una sola (inclusi CSS, JS e il contenuto dei caratteri di supporto), quindi caricano solo ciò che è necessario ogni volta che si verifica un cambiamento di stato nell’app. Ciò che è necessario per questo cambiamento di stato può variare in base al set di tecnologie scelte, ma in genere include un singolo frammento HTML per sostituire la “visualizzazione” esistente e l’esecuzione di un blocco di codice JS per collegare la nuova visualizzazione ed eseguire qualsiasi rendering di modelli lato client che potrebbe essere necessario. La velocità di questo cambiamento di stato può essere ulteriormente migliorata supportando i meccanismi di caching dei modelli o anche l’accesso offline al contenuto dei modelli se si utilizza Adobe PhoneGap.

AEM 6.1 supporta la creazione e la gestione di applicazioni a pagina singola tramite le app AEM. Questo articolo fornisce un’introduzione ai concetti alla base dell’applicazione a pagina singola e a come utilizzano AngularJS per portare il tuo marchio in App Store e Google Play.

Applicazioni SPA nelle app AEM spa-in-aem-apps

Il framework delle applicazioni a pagina singola nelle app AEM offre prestazioni elevate per un’app AngularJS, consentendo agli autori (o ad altro personale non tecnico) di creare e gestire i contenuti dell’app tramite l’ambiente di editor drag-and-drop ottimizzato per il tocco, tradizionalmente riservato alla gestione dei siti web. Hai già creato un sito con AEM? Con le app AEM è facile riutilizzare contenuti, componenti, flussi di lavoro, risorse e autorizzazioni.

Modulo applicativo AngularJS angularjs-application-module

Le app AEM gestiscono gran parte della configurazione AngularJS, inclusa la creazione del modulo di livello superiore dell’app. Per impostazione predefinita, questo modulo è denominato “AEMAngularApp” e lo script responsabile della sua generazione è reperibile (e sovrapposto) in /libs/mobileapps/components/angular/ng-page/angular-app-module.js.jsp.

Parte dell’inizializzazione dell’app consiste nello specificare da quali moduli AngularJS dipende l’app. L’elenco dei moduli utilizzati dall’app è specificato da uno script che si trova in /libs/mobileapps/components/angular/ng-page/angular-module-list.js.jsp e può essere sovrapposto dal componente pagina delle tue app per richiamare eventuali moduli AngularJS aggiuntivi richiesti dall’app. Ad esempio, confronta lo script precedente con l’implementazione di Geometrixx (che si trova in /apps/geometrixx-outdoors-app/components/angular/ng-geometrixx-page/angular-module-list.js.jsp).

Per supportare la navigazione tra gli stati distinti nell’app, lo script angular-app-module scorre tutte le pagine discendenti della pagina dell’app principale per generare un set di “route” e configura ogni percorso nel servizio $routeProvider di Angular. Ad esempio, osserva lo script angular-app-module generato dall’esempio dell’app Geometrixx Outdoors: (il collegamento richiede un’istanza locale) http://localhost:4502/content/phonegap/conference-app/en/home.angular-app-module.js

Accedendo all’app AEMAngularApp generata, trovi una serie di route specificate come segue:

$routeProvider
.when('/content/phonegap/geometrixx-outdoors/en/home/products/:id', {
    templateUrl: 'home/products.template.html',
    controller: 'contentphonegapgeometrixxoutdoorsenhomeproducts'
})

L’esempio precedente illustra in particolare un esempio di passaggio di un parametro come parte del percorso. In questo esempio, indica che quando viene richiesto un percorso che soddisfa il modello specificato (/content/phonegap/geometrixx-outdoors/en/home/products/:id), deve essere gestito dal modello home/products.template.html e utilizzare il controller ‘contentphonegapgeometrixxoutdoorsenhomeproducts’.

Il modello da caricare quando viene richiesta questa route è specificato dalla proprietà templateUrl. Questo modello contiene il HTML dei componenti AEM inclusi nella pagina e tutte le direttive AngularJS necessarie per collegare il lato client dell’applicazione. Per un esempio di direttiva AngularJS in un componente Geometrixx, consulta la riga 45 del file template.jsp del carosello di scorrimento (/apps/geometrixx-outdoors-app/components/swipe-carousel/template.jsp).

Controller di pagina page-controllers

Nelle parole di Angular, “un controller è una funzione di costruzione di JavaScript utilizzata per potenziare l’ambito di Angular”. (source) Ogni pagina in un’app AEM viene collegata automaticamente a un controller che può essere potenziato da qualsiasi controller che specifica un frameworkType di angular. Osserva il componente ng-text come esempio (/libs/mobileapps/components/angular/ng-text), incluso il nodo cq:template che si assicura che ogni volta che questo componente viene aggiunto a una pagina, includa questa importante proprietà.

Per un esempio più complesso di controller, apri lo script ng-template-page controller.jsp (in /apps/geometrixx-outdoors-app/components/angular/ng-template-page). Di particolare interesse è il codice JavaScript generato al momento dell’esecuzione, che esegue il rendering come segue:

// Controller for page 'products'
.controller('contentphonegapgeometrixxoutdoorsenhomeproducts', ['$scope', '$http', '$routeParams',
    function($scope, $http, $routeParams) {
        var sku = $routeParams.id;
        var productPath = '/' + sku.substring(0, 2) + '/' + sku.substring(0, 4) + '/' + sku;
        var data = $http.get('home/products' + productPath + '.angular.json' + cacheKiller);

        /* ng-product component controller (path: content-par/ng-product) */
        data.then(function(response) {
            $scope.contentparngproduct = response.data["content-par/ng-product"].items;
        });

        /* ng-image component controller (path: content-par/ng-product/ng-image) */
        data.then(function(response) {
            $scope.contentparngproductngimage = response.data["content-par/ng-product/ng-image"].items;
        });
    }
])

Nell’esempio precedente, il parametro del servizio $routeParams viene preso e quindi massaggiato nella struttura di directory in cui sono memorizzati i dati JSON. Gestendo lo SKU id in questo modo, è possibile fornire un unico modello di prodotto in grado di eseguire il rendering dei dati del prodotto per migliaia di prodotti potenzialmente distinti. Si tratta di un modello molto più scalabile che richiede un percorso individuale per ogni elemento in un database di prodotti (potenzialmente) di grandi dimensioni.

Ci sono anche due componenti in azione qui: ng-product potenzia l’ambito con i dati estratti dalla chiamata $http precedente. In questa pagina è inoltre presente un’immagine ng che a sua volta potenzia l’ambito con il valore che recupera dalla risposta. In virtù del servizio $http di Angular, ogni componente attende pazientemente il completamento della richiesta e il completamento della promessa creata.

Passaggi successivi the-next-steps

Dopo aver appreso le applicazioni a pagina singola, consulta Sviluppo di app con PhoneGap CLI.