Applicazioni a pagina singola single-page-applications

Applicazioni a pagina singola (SPA) hanno raggiunto la massa critica, ampiamente considerata come il modello più efficace per creare esperienze senza soluzione di continuità con la tecnologia web. Seguendo un pattern di SPA, è possibile creare un’applicazione che esegue in modo identico un’applicazione desktop o mobile, ma che raggiunge una moltitudine di piattaforme di dispositivi e fattori di forma a causa della sua base in standard web aperti.

In generale, SPA appaiono più performanti dei siti web tradizionali basati su pagine, in quanto generalmente caricano una pagina HTML completa una volta (inclusi CSS, JS e il contenuto dei font di supporto) e quindi carica solo esattamente ciò che è necessario ogni volta che nell’app si verifica una modifica dello stato. Ciò che è necessario per questo cambiamento di stato può variare in base al set di tecnologie scelte, ma in genere include un singolo frammento di HTML per sostituire la "vista" esistente e l’esecuzione di un blocco di codice JS per collegare la nuova visualizzazione ed eseguire qualsiasi rendering del modello lato client che potrebbe essere necessario. La velocità di questa modifica dello stato può essere ulteriormente migliorata supportando i meccanismi di memorizzazione nella cache dei modelli o persino l'accesso offline al contenuto del modello se si utilizza Adobe PhoneGap.

AEM 6.1 sostiene la costruzione e la gestione di SPA tramite AEM Apps. Questo articolo fornisce un'introduzione ai concetti alla base del SPA e come essi sfruttano AngularJS per portare il tuo marchio su App Store e Google Play.

SPA nelle app AEM spa-in-aem-apps

Il framework di applicazione a pagina singola nelle app di AEM consente di ottenere prestazioni elevate in un’app AngularJS, consentendo agli autori (o altro personale non tecnico) di creare e gestire il contenuto dell’app tramite l’ambiente di editor touch e con trascinamento tradizionalmente riservato alla gestione dei siti web. Hai già creato un sito con AEM? Scoprirai che riutilizzare i contenuti, i componenti, i flussi di lavoro, le risorse e le autorizzazioni è facile con le app AEM.

Modulo applicazione AngularJS angularjs-application-module

AEM Apps gestisce gran parte della configurazione di AngularJS per te, inclusa la configurazione del modulo di livello superiore dell'app. Per impostazione predefinita questo modulo si chiama "AEMAngularApp" e lo script responsabile della sua generazione si trova (e sovrapposto) all’indirizzo /libs/mobileapps/components/angular/ng-page/angular-app-module.js.jsp.

Parte dell'inizializzazione dell'app prevede la specifica dei moduli AngularJS da cui dipende l'app. L’elenco dei moduli utilizzati dall’app è specificato da uno script situato in /libs/mobileapps/components/angular/ng-page/angular-module-list.js.jsp e può essere sovrapposto dal componente page 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 all’indirizzo /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 del modulo angular-app-module esegue un’iterazione tra tutte le pagine discendenti della pagina dell’app di livello principale per generare un set di "route" e configura ogni percorso nel servizio $routeProvider di Angular. Per un esempio di come si presenta in pratica, osserva lo script modulo-app-angular generato dall’app Geometrixx Outdoors: (il collegamento richiede un'istanza locale) http://localhost:4502/content/phonegap/conference-app/en/home.angular-app-module.js

Effettuando l’accesso a AEMAngularApp generata, troverai una serie di percorsi specificati 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 stiamo indicando che quando un percorso che soddisfa il pattern specificato (https://experienceleague.adobe.com/content/phonegap/geometrixx-outdoors/en/home/products/:id?lang=it) è richiesto, deve essere gestito dal modello home/products.template.html e utilizzare il controller 'contentphonegapgeometrixxoutdoorsenhomeproducts'.

Il modello da caricare quando si richiede questa route è specificato dalla proprietà templateUrl . Questo modello conterrà il HTML da AEM componenti inclusi nella pagina, nonché tutte le direttive AngularJS necessarie per il cablaggio del lato client dell’applicazione. Per un esempio di direttiva AngularJS in un componente Geometrixx, osserva la riga 45 del template.jsp di swipe-carosello (https://experienceleague.adobe.com/apps/geometrixx-outdoors-app/components/swipe-carousel/template.jsp?lang=it).

Titolari del trattamento delle pagine page-controllers

Nelle parole proprie dell'Angular, "un controller è una funzione di costruzione JavaScript utilizzata per potenziare l'ambito dell'Angular." (source) Ogni pagina di un'app AEM è collegata automaticamente a un controller che può essere incrementato da qualsiasi controller che specifica un frameworkType di angular. Osserva il componente ng-text come un esempio (https://experienceleague.adobe.com/libs/mobileapps/components/angular/ng-text?lang=it), incluso il nodo cq:template che assicura che ogni volta che questo componente viene aggiunto a una pagina includa questa importante proprietà.

Per un esempio di controller più complesso, apri lo script ng-template-page controller.jsp (che si trova in /apps/geometrixx-outdoors-app/components/angular/ng-template-page). Di particolare interesse è il codice javascript generato quando eseguito, 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, noterai che stiamo prendendo un parametro dal $routeParams e poi massaggiarlo nella struttura di directory in cui sono memorizzati i nostri dati JSON. Trattando lo sku id in questo modo, siamo in grado di fornire un singolo modello di prodotto che può eseguire il rendering dei dati del prodotto per migliaia di prodotti distinti potenzialmente. Si tratta di un modello molto più scalabile che richiede un percorso individuale per ogni elemento in un database di prodotti di massa (potenzialmente).

Ci sono anche due componenti al lavoro qui: ng-product aumenta l'ambito di applicazione con i dati estratti da quanto sopra $http chiama. C'è anche un'immagine ng in questa pagina che a sua volta aumenta anche l'ambito con il valore che recupera dalla risposta. In virtù del Angular $http ogni componente aspetterà pazientemente finché la richiesta non viene completata e la promessa creata viene soddisfatta.

Passaggi successivi the-next-steps

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