Show Menu
ARGOMENTI×

Applicazioni a pagina singola

Adobe consiglia di utilizzare SPA Editor per i progetti che richiedono il rendering lato client basato sul framework dell'applicazione a pagina singola (ad es. React). Per saperne di più .
Le applicazioni SPA (Single Page Applications) hanno raggiunto una massa critica, ampiamente considerata come il modello più efficace per creare esperienze perfette con la tecnologia Web. Seguendo un pattern SPA, è possibile creare un'applicazione che funziona in modo identico a un'applicazione desktop o mobile, ma che raggiunge un gran numero di piattaforme di dispositivi e di fattori di forma a causa del suo fondamento in standard Web aperti.
In generale, gli SPA appaiono più efficaci dei siti Web basati sulle pagine tradizionali, perché in genere caricano una pagina HTML completa solo una volta (inclusi CSS, JS e contenuti di supporto per i font), quindi caricano solo ciò che è necessario ogni volta che si verifica una modifica di stato nell'app. Ciò che è necessario per questa modifica di stato può variare in base al set di tecnologie selezionate, ma in genere include un singolo frammento HTML per sostituire la "vista" esistente, e l'esecuzione di un blocco di codice JS per collegare la nuova vista ed eseguire il rendering di modelli lato client che potrebbe essere necessario. La velocità di questa modifica dello stato può essere ulteriormente migliorata grazie al supporto dei meccanismi di memorizzazione nella cache dei modelli, o anche tramite l'accesso offline ai contenuti dei modelli se si utilizza Adobe PhoneGap.
AEM 6.1 supporta la creazione e la gestione di app SPA tramite AEM Apps. Questo articolo fornisce un'introduzione ai concetti alla base dell'SPA e come sfruttano AngularJS per portare il tuo marchio nell'App Store e in Google Play.

SPA nelle app AEM

Il framework di applicazione per pagina singola nelle app AEM consente di ottenere prestazioni elevate per un'app AngularJS, consentendo agli autori (o ad altro personale non tecnico) di creare e gestire il contenuto dell'app tramite l'editor touch, tradizionalmente riservato alla gestione di siti Web. È già stato creato un sito con AEM? Le app AEM semplificano il riutilizzo di contenuti, componenti, flussi di lavoro, risorse e autorizzazioni.

Modulo applicazione AngularJS

Le app AEM gestiscono gran parte della configurazione AngularJS per voi, inclusa la configurazione del modulo di livello principale dell'app. Per impostazione predefinita, questo modulo è denominato 'AEMAngularApp' e lo script responsabile della generazione del modulo è disponibile (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 ubicato in /libs/mobileapps/components/angular/ng-page/angular-module-list.js.jsp e può essere sovrapposto dal componente pagina delle app per inserire eventuali altri moduli AngularJS richiesti dall'app. Ad esempio, confrontate lo script precedente con l’implementazione di Geometrixx (disponibile all’indirizzo /apps/geometrixx-outdoors-app/components/angular/ng-geometrixx-page/angular-module-list.js.jsp).
Per supportare la navigazione tra stati distinti nell'app, lo script modulo-app-angolare esegue un'iterazione in 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 nella pratica, osservate lo script del modulo angolare-app generato dall’esempio di 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 all'AEMAngularApp generata, troverai 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 di cui sopra 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 (/content/phonegap/geometrixx-outdoors/en/home/products/:id) è richiesto, deve essere gestito dal modello home/products.template e utilizzare il controller 'contentphonegapgeometrixxoutdoorsenhomeproducts'.
Il modello da caricare quando questa route viene richiesta è specificato dalla proprietà templateUrl. Questo modello conterrà il codice HTML dei componenti AEM inclusi nella pagina, nonché eventuali direttive AngularJS necessarie per il cablaggio del lato client dell’applicazione. Per un esempio di direttiva AngularJS in un componente Geometrixx, osservate la riga 45 del template.jsp di swipe-carosello (/apps/geometrixx-outdoors-app/components/swipe-carousel/template.jsp).

Controllori pagina

Nelle parole di Angular, "un controller è una funzione di costruzione JavaScript utilizzata per ampliare l'ambito angolare." ( sorgente ) Ogni pagina in un’app AEM viene automaticamente collegata a un controller che può essere incrementato da qualsiasi controller che specifica un frameworkType di angular . Osservate il componente ng-text come un esempio (/libs/mobileapps/components/angular/ng-text), incluso il nodo cq:template che verifica che ogni volta che questo componente viene aggiunto a una pagina includa questa importante proprietà.
Per un esempio di controller più complesso, aprite 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 al momento dell'esecuzione, che viene riprodotto 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, noterete che stiamo prendendo un parametro dal $routeParams servizio e poi lo massaggiamo 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ò rappresentare i dati del prodotto per migliaia di prodotti potenzialmente distinti. Si tratta di un modello molto più scalabile che richiede un percorso singolo per ogni elemento in un database di prodotti (potenzialmente) di massa.
Sono inoltre disponibili due componenti: ng-product aumenta l’ambito con i dati estratti dalla $http chiamata precedente. In questa pagina è presente anche un'immagine ng che a sua volta amplia l'ambito con il valore recuperato dalla risposta. In virtù del $http servizio di Angular, ogni componente aspetterà pazientemente fino al completamento della richiesta e alla realizzazione della promessa che ha creato.

Passaggi successivi

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