Guida introduttiva alle applicazioni a pagina singola in AEM - Angular
- Si applica a:
- Experience Manager 6.5
Creato per:
- Sviluppatore
Le applicazioni a pagina singola (SPA) possono offrire esperienze coinvolgenti agli utenti di siti web. Gli sviluppatori desiderano essere in grado di creare siti utilizzando framework SPA e gli autori desiderano modificare facilmente i contenuti all’interno di AEM per un sito creato utilizzando framework SPA.
La funzione di authoring di applicazioni a pagina singola offre una soluzione completa per il supporto di applicazioni a pagina singola in AEM. Questo articolo presenta un’applicazione SPA semplificata sul framework Angular, spiega come viene creata e come iniziare subito a utilizzare un’applicazione SPA personale.
NOTA
IMPORTANTE- Editor universale per la modifica visiva di contenuti headless.
- Editor frammenti di contenuto per la modifica di contenuti headless basata su modulo.
Introduzione
Questo articolo riassume il funzionamento di base di una semplice applicazione a pagina singola e il minimo che è necessario sapere per eseguire l’operazione.
Per ulteriori dettagli sul funzionamento delle applicazioni a pagina singola in AEM, consulta i seguenti documenti:
NOTEQuesto documento illustra la struttura di un’applicazione a pagina singola semplificata e il suo funzionamento, consentendoti di applicare questa conoscenza all’applicazione a pagina singola.
Dipendenze, configurazione e generazione
Oltre alla dipendenza prevista da Angular, l’applicazione a pagina singola di esempio può utilizzare librerie aggiuntive per rendere più efficiente la creazione dell’applicazione a pagina singola.
Dipendenze
Il file package.json definisce i requisiti del pacchetto SPA complessivo. Le dipendenze minime richieste da AEM sono elencate qui.
"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"
}
aem-clientlib-generator viene utilizzato per rendere automatica la creazione di librerie client come parte del processo di compilazione.
"aem-clientlib-generator": "^1.4.1",
Ulteriori dettagli su aem-clientlib-generator sono disponibili su GitHub.
CAUTIONaem-clientlib-generator richiesta è 1.4.1.aem-clientlib-generator è configurato nel file clientlib.config.js come segue.
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"
]
}
}
};
Generazione in corso
In realtà, la creazione dell'app utilizza Webpack per la transpilazione oltre a aem-clientlib-generator per la creazione automatica della libreria client. Pertanto, il comando build sarà simile al seguente:
"build": "ng build --build-optimizer=false && clientlib",
Una volta generato, il pacchetto può essere caricato in un’istanza di AEM.
Archetipo di progetto AEM
Qualsiasi progetto AEM deve utilizzare l’archetipo di progetto AEM, che supporta progetti SPA utilizzando React o Angular e sfrutta l’SDK di SPA.
Struttura dell'applicazione
Se includi le dipendenze e crei l’app come descritto in precedenza, riceverai un pacchetto di applicazioni a pagina singola funzionante che puoi caricare nell’istanza di AEM.
La sezione successiva di questo documento illustra come è strutturata un’applicazione a pagina singola in AEM, i file importanti che guidano l’applicazione e come funzionano insieme.
Un componente immagine semplificato viene utilizzato come esempio, ma tutti i componenti dell’applicazione sono basati sullo stesso concetto.
app.module.ts
Il punto di ingresso nell'applicazione a pagina singola è il file app.module.ts qui mostrato 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 file app.module.ts è il punto iniziale dell'app e contiene la configurazione iniziale del progetto e utilizza AppComponent per avviare l'app.
Creazione di istanze statiche
Quando il componente viene creato in modo statico utilizzando la maschera del componente, il valore deve essere passato dal modello alle proprietà del componente. I valori del modello vengono passati come attributi, per poi essere disponibili come proprietà dei componenti.
app.component.ts
Una volta avviato AppComponent, app.module.ts può inizializzare l'app, che viene qui mostrata 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 chiama main-content.component.ts elencato qui in una versione semplificata.
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];
});
}
}
MainComponent acquisisce la rappresentazione JSON del modello di pagina ed elabora il contenuto per racchiudere/decorare ogni elemento della pagina. Ulteriori dettagli su Page sono disponibili nel documento Blueprint SPA.
image.component.ts
Page è composto da componenti. Con il JSON acquisito, Page può elaborare tali componenti come image.component.ts, come mostrato qui.
/// 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 delle applicazioni a pagina singola in AEM è quella di mappare i componenti delle applicazioni a pagina singola ai componenti di AEM e di aggiornare il componente quando il contenuto viene modificato (e viceversa). Per un riepilogo di questo modello di comunicazione, vedere il documento Panoramica dell'editor SPA.
MapTo('my-angular-app/components/image')(Image, ImageEditConfig);
Il metodo MapTo associa il componente SPA al componente AEM. Supporta l’utilizzo di una singola stringa o di un array di stringhe.
ImageEditConfig è un oggetto di configurazione che contribuisce ad abilitare le funzionalità di creazione di un componente fornendo i metadati necessari all'editor per generare segnaposto
Se non è presente alcun contenuto, le etichette vengono fornite come segnaposto per rappresentare il contenuto vuoto.
Proprietà passate dinamicamente
I dati provenienti dal modello vengono passati dinamicamente come proprietà del componente.
image.component.html
Infine, è possibile eseguire il rendering dell'immagine in image.component.html.
// image.component.html
<img [src]="src" [alt]="alt" [title]="title"/>
Condivisione di informazioni tra i componenti SPA
La condivisione delle informazioni è regolarmente necessaria per i componenti di un’applicazione a pagina singola. Esistono diversi modi consigliati per farlo, elencati di seguito in ordine crescente di complessità.
- Opzione 1: Centralizza la logica e la trasmissione ai componenti necessari, ad esempio, utilizzando una classe util come soluzione puramente orientata agli oggetti.
- Opzione 2: condividere gli stati dei componenti utilizzando una libreria di stati come NgRx.
- Opzione 3: Sfrutta la gerarchia degli oggetti personalizzando ed estendendo il componente contenitore.
Passaggi successivi
Per una guida dettagliata alla creazione di un'applicazione a pagina singola personalizzata, vedi Guida introduttiva all'editor di applicazioni a pagina singola di AEM - Esercitazione eventi WKND.
Per ulteriori informazioni su come organizzare lo sviluppo di applicazioni a pagina singola per AEM, vedere l'articolo Sviluppo di applicazioni a pagina singola per AEM.
Per ulteriori dettagli sul mapping tra modello dinamico e componente e sul suo funzionamento all'interno delle applicazioni a pagina singola in AEM, vedere l'articolo Mapping tra modello dinamico e componente per applicazioni a pagina singola.
Se desideri implementare le applicazioni a pagina singola in AEM per un framework diverso da React o Angular o semplicemente approfondire il funzionamento di SPA SDK for AEM, consulta l'articolo Blueprint SPA.