Show Menu
ARGOMENTI×

Guida introduttiva alle app SPA in AEM - Angular

Le applicazioni SPA (Single Page Applications) possono offrire esperienze coinvolgenti agli utenti di siti Web. Gli sviluppatori desiderano essere in grado di creare siti utilizzando i framework SPA e gli autori desiderano modificare i contenuti all'interno AEM per un sito creato utilizzando i framework SPA.
La funzione di authoring SPA offre una soluzione completa per supportare gli SPA in AEM. Questo articolo presenta un'applicazione SPA semplificata sul framework Angular, spiega come viene assemblato, consentendo di iniziare rapidamente a utilizzare la propria SPA.
Questo articolo si basa sulla cornice angolare. Per il documento corrispondente per il framework React, consulta Guida introduttiva alle app AEM - React .
SPA Editor è la soluzione consigliata per i progetti che richiedono il rendering lato client basato su SPA (ad esempio React o Angular).

Introduzione

Questo articolo riassume il funzionamento di base di una semplice SPA e il minimo che devi sapere per far funzionare il tuo.
Per maggiori dettagli sul funzionamento degli SPA in AEM, consulta i documenti seguenti:
Per poter creare contenuti all’interno di un’app SPA, questi devono essere memorizzati in AEM ed essere esposti dal modello di contenuto.
Una SPA sviluppata al di fuori di AEM non sarà autorizzata se non rispetta il contratto per i modelli di contenuto.
Questo documento illustra la struttura di un'app SPA semplificata e illustra il suo funzionamento, in modo da poter applicare questa comprensione all'app SPA.

Dipendenze, configurazione e generazione

Oltre alla dipendenza Angular prevista, il campione SPA può sfruttare librerie aggiuntive per rendere più efficiente la creazione dell'SPA.

Dipendenze

Il package.json file definisce i requisiti del pacchetto SPA complessivo. Le dipendenze AEM minime richieste sono elencate di seguito.
"dependencies": {
  "@adobe/aem-angular-editable-components": "~1.0.3",
  "@adobe/aem-spa-component-mapping": "~1.0.5",
  "@adobe/aem-spa-page-model-manager": "~1.0.3"
}

La funzione aem-clientlib-generator viene utilizzata per rendere automatica la creazione di librerie client nel processo di creazione.
"aem-clientlib-generator": "^1.4.1",
Maggiori dettagli sono disponibili su GitHub qui .
La versione minima della aem-clientlib-generator richiesta è 1.4.1.
Il file aem-clientlib-generator è configurato nel clientlib.config.js modo seguente.
module.exports = {
    // default working directory (can be changed per 'cwd' in every asset option)
    context: __dirname,

    // path to the clientlib root folder (output)
    clientLibRoot: "./../content/jcr_root/apps/my-angular-app/clientlibs",

    libs: {
        name: "my-angular-app",
        allowProxy: true,
        categories: ["my-angular-app"],
        embed: ["my-angular-app.responsivegrid"],
        jsProcessor: ["min:gcc"],
        serializationFormat: "xml",
        assets: {
            js: [
                "dist/**/*.js"
            ],
            css: [
                "dist/**/*.css"
            ]
        }
    }
};

Creazione di

In realtà, la creazione dell'app si basa su Webpack per la traslazione oltre al generatore aem-clientlib-generator per la creazione automatica della libreria client. Il comando build sarà quindi simile a:
"build": "ng build --build-optimizer=false && clientlib",
Una volta creato, il pacchetto può essere caricato in un'istanza AEM.

AEM Project Archetype

Qualsiasi progetto AEM dovrebbe sfruttare il AEM Project Archetype , che supporta i progetti SPA utilizzando React o Angular e sfrutta l’SDK SPA.

Struttura dell'applicazione

L'inclusione delle dipendenze e la creazione dell'app come descritto in precedenza vi lasceranno con un pacchetto SPA funzionante che potete caricare nell'istanza AEM.
La sezione successiva di questo documento illustra la struttura di un'app in AEM, i file importanti che guidano l'applicazione e il modo in cui lavorano insieme.
Un componente immagine semplificato viene utilizzato come esempio, ma tutti i componenti dell’applicazione si basano sullo stesso concetto.

app.module.ts

Il punto di ingresso nell'SPA è il app.module.ts file mostrato qui semplificato per concentrarsi sul contenuto importante.
// app.module.ts
import { BrowserModule, BrowserTransferStateModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { SpaAngularEditableComponentsModule } from '@adobe/aem-angular-editable-components';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [ BrowserModule.withServerTransition({ appId: 'my-angular-app' }),
    SpaAngularEditableComponentsModule,
    AppRoutingModule,
    BrowserTransferStateModule ],
  providers: ...,
  declarations: [ ... ],
  entryComponents: [ ... ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Il app.module.ts file è il punto di partenza dell'app e contiene la configurazione di progetto iniziale e viene utilizzato AppComponent per avviare l'app.

Istanziazione statica

Quando un’istanza del componente viene creata in modo statico utilizzando il modello di componente, il valore deve essere passato dal modello alle proprietà del componente. I valori del modello vengono passati come attributi per essere successivamente disponibili come proprietà del componente.

app.component.ts

Una volta app.module.ts avviati AppComponent , l'app può quindi essere inizializzata, come illustrato in una versione semplificata per concentrarsi sul contenuto importante.
// app.component.ts
import { Component } from '@angular/core';
import { ModelManager } from '@adobe/aem-spa-page-model-manager';
import { Constants } from "@adobe/aem-angular-editable-components";

@Component({
  selector: 'app-root',
  template: `
    <router-outlet></router-outlet>
  `
})

export class AppComponent {
  items;
  itemsOrder;
  path;

  constructor() {
    ModelManager.initialize().then(this.updateData.bind(this));
  }

  private updateData(model) {
    this.path = model[Constants.PATH_PROP];
    this.items = model[Constants.ITEMS_PROP];
    this.itemsOrder = model[Constants.ITEMS_ORDER_PROP];
  }
}

main-content.component.ts

Elaborando la pagina, app.component.ts le chiamate main-content.component.ts elencate in questa sezione vengono semplificate.
import { Component } from '@angular/core';
import { ModelManagerService }     from '../model-manager.service';
import { ActivatedRoute } from '@angular/router';
import { Constants } from "@adobe/aem-angular-editable-components";

@Component({
  selector: 'app-main',
  template: `
    <aem-page class="structure-page" [attr.data-cq-page-path]="path" [cqPath]="path" [cqItems]="items" [cqItemsOrder]="itemsOrder" ></aem-page>
  `
})

export class MainContentComponent {
  items;
  itemsOrder;
  path;

  constructor( private route: ActivatedRoute,
    private modelManagerService: ModelManagerService) {
    this.modelManagerService.getData({ path: this.route.snapshot.data.path }).then((data) => {
      this.path = data[Constants.PATH_PROP];
      this.items = data[Constants.ITEMS_PROP];
      this.itemsOrder = data[Constants.ITEMS_ORDER_PROP];
    });
  }
}

Consente di MainComponent acquisire la rappresentazione JSON del modello di pagina ed elaborare il contenuto da racchiudere/decorare ogni elemento della pagina. Per maggiori informazioni, Page consulta il documento SPA Blueprint .

image.component.ts

Il componente Page è composto da componenti. Con l’assimilazione del JSON, il gruppo Page può elaborare tali componenti, come image.component.ts illustrato di seguito.
/// image.component.ts
import { Component, Input } from '@angular/core';

const ImageEditConfig = {

    emptyLabel: 'Image',

    isEmpty: function(cqModel) {
        return !cqModel || !cqModel.src || cqModel.src.trim().length < 1;
    }
};

@Component({
  selector: 'app-image',
  templateUrl: './image.component.html',
})

export class ImageComponent {
  @Input() src: string;
  @Input() alt: string;
  @Input() title: string;
}

MapTo('my-angular-app/components/image')(ImageComponent, ImageEditConfig);

L'idea centrale di SPA in AEM è la mappatura dei componenti SPA ai componenti AEM e l'aggiornamento del componente quando il contenuto viene modificato (e viceversa). Per un riepilogo di questo modello di comunicazione, consulta Panoramica sull’editor SPA.
MapTo('my-angular-app/components/image')(Image, ImageEditConfig);
Il MapTo metodo mappa il componente SPA sul componente AEM. Supporta l'uso di una singola stringa o di una matrice di stringhe.
ImageEditConfig è un oggetto di configurazione che contribuisce a abilitare le funzionalità di authoring di un componente fornendo i metadati necessari affinché l’editor generi i segnaposto
In assenza di contenuto, le etichette vengono fornite come segnaposto per rappresentare il contenuto vuoto.

Proprietà trasmesse dinamicamente

I dati provenienti dal modello vengono passati in modo dinamico come proprietà del componente.

image.component.html

Infine, l’immagine può essere riprodotta in image.component.html .
// image.component.html
<img [src]="src" [alt]="alt" [title]="title"/>

Condivisione delle informazioni tra i componenti SPA

È necessario che i componenti all’interno di un’applicazione a pagina singola condividano informazioni. Ci sono diversi modi consigliati di fare questo, elencati come segue in ordine crescente di complessità.
  • Opzione 1: Centralizzate la logica e la trasmissione ai componenti necessari, ad esempio utilizzando una classe util come soluzione orientata agli oggetti.
  • Opzione 2: Condividere gli stati dei componenti utilizzando una libreria di stati come NgRx.
  • Opzione 3: Sfruttare la gerarchia di oggetti personalizzando ed estendendo il componente contenitore.

Passaggi successivi

Per una guida passo-passo alla creazione di un vostro SPA, consultate la Guida introduttiva all’editor SPA AEM - Esercitazione sugli eventi WKND.
Per ulteriori informazioni su come organizzarsi per sviluppare SPA per AEM vedere l'articolo Sviluppo di SPA per AEM .
Per ulteriori dettagli sulla mappatura del modello dinamico a componente e sul suo funzionamento all'interno degli SPA in AEM, consultate l'articolo Mappatura dinamica da modello a componente per SPA .
Se desideri implementare gli SPA in AEM per un framework diverso da React o Angular o vuoi semplicemente approfondire il funzionamento dell’SDK SPA per AEM, consulta l’articolo SPA Blueprint .