Applicazioni a pagina singola

NOTA

Adobe consiglia di utilizzare l'editor SPA 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 a pagina singola (SPA) hanno raggiunto una 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 su 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, SPA appaiono più performanti rispetto ai siti Web tradizionali basati su pagine, perché in genere caricano una pagina HTML completa una sola volta (inclusi CSS, JS e contenuti di supporto per i font), e 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 Adobe PhoneGap viene utilizzato.

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

SPA in AEM app

Il framework di applicazione per pagina singola in AEM app consente di ottenere prestazioni elevate di un'app AngularJS, consentendo agli autori (o ad altro personale non tecnico) di creare e gestire il contenuto dell'app tramite l'editor touch, con trascinamento della selezione tradizionalmente riservato alla gestione dei siti Web. Avete già un sito costruito con AEM? Scoprirai che riutilizzare i tuoi contenuti, componenti, flussi di lavoro, risorse e autorizzazioni è semplice con AEM app.

Modulo applicazione AngularJS

AEM App gestisce 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 riportato sopra con l'implementazione dell'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?lang=it) è richiesto, deve essere gestito dal modello home/products.template e utilizzare il controller 'contentphonegapgeometrixxoutdoorsenhomeproducts'.

Il modello da caricare quando questa route è richiesta è specificato dalla proprietà templateUrl. Questo modello conterrà il codice HTML dei componenti AEM che sono stati 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?lang=it).

Controller pagina

Nelle parole di Angular, "un controller è una funzione di costruzione JavaScript utilizzata per ampliare l'ambito angolare." (source) Ogni pagina in un'app AEM viene automaticamente collegata a un controller che può essere incrementato da qualsiasi controller che specifica frameworkType di angular. Osservate il componente ng-text come un esempio (/libs/mobileapps/components/angular/ng-text?lang=it), 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 servizio $routeParams e poi massaggiarlo nella struttura di directory in cui sono memorizzati i nostri dati JSON. Affrontando lo sku id in questo modo, siamo in grado di fornire un singolo modello di prodotto che possa 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 amplia l'ambito con i dati estratti dalla chiamata $http 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 servizio Angular $http, ogni componente aspetterà pazientemente fino al completamento della richiesta e al completamento della promessa che ha creato.

Passaggi successivi

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

In questa pagina

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now