Guida introduttiva alla SPA in AEM Utilizzo di Angular

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 SPA framework e gli autori desiderano modificare i contenuti all'interno di AEM per un sito creato utilizzando SPA framework.

La funzione di authoring SPA offre una soluzione completa per SPA di supporto in AEM. Questo articolo presenta un'applicazione SPA semplificata sul framework Angular, spiega come viene assemblato, consentendo di iniziare rapidamente a usare i propri SPA.

NOTA

Questo articolo si basa sulla cornice angolare. Per il documento corrispondente per il framework React, vedere Guida introduttiva alle SPA in AEM - React.

Introduzione

Questo articolo riassume il funzionamento di base di un semplice SPA e il minimo che devi sapere per far funzionare il tuo.

Per maggiori dettagli sul funzionamento SPA in AEM, consulta i documenti seguenti:

NOTA

Per poter creare contenuti all’interno di un SPA, i contenuti devono essere memorizzati in AEM ed essere esposti dal modello di contenuto.

Un SPA sviluppato al di fuori di AEM non sarà autorizzabile se non rispetta il contratto per il modello di contenuto.

Questo documento illustra la struttura di un SPA semplificato e illustra come funziona in modo da poter applicare questa comprensione ai propri SPA.

Dipendenze, configurazione e generazione

Oltre alla dipendenza Angular prevista, il SPA di esempio può sfruttare librerie aggiuntive per rendere più efficiente la creazione del SPA.

Dipendenze

Il file package.json 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"
}

aem-clientlib-generator è stata utilizzata per rendere automatica la creazione di librerie client come parte del processo di creazione.

"aem-clientlib-generator": "^1.4.1",

Per maggiori informazioni, vedere su GitHub qui.

La aem-clientlib-generator è configurata 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"
            ]
        }
    }
};

Creazione di

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 deve sfruttare il AEM Project Archetype, che supporta SPA progetti 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 SPA in AEM, i file importanti che guidano l'applicazione e la modalità di funzionamento dell'applicazione.

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 nel SPA è il file app.module.ts 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 file app.module.ts è il punto di partenza dell'app e contiene la configurazione di progetto iniziale e utilizza 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 che app.module.ts le barre di avvio AppComponent, possono inizializzare l'app, che viene visualizzata 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 effettua le chiamate main-content.component.ts elencate 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];
    });
  }
}

L' MainComponent acquisisce la rappresentazione JSON del modello di pagina ed elabora il contenuto per racchiudere/decorare ogni elemento della pagina. Ulteriori dettagli sulla Page si trovano nel documento SPA Blueprint.

image.component.ts

Il Page è composto da componenti. Con il JSON assimilato, il Page può elaborare quei componenti come image.component.ts come 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 SPA componenti a componenti AEM e l’aggiornamento del componente quando il contenuto viene modificato (e viceversa). Per un riepilogo di questo modello di comunicazione, vedere il documento SPA Editor Overview.

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

Il metodo MapTo mappa il componente SPA al 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 SPA componenti

È 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: Centralizzare 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: Sfruttare la gerarchia degli oggetti personalizzando ed estendendo il componente contenitore.

Passaggi successivi

  • La Guida introduttiva alle SPA in AEM con Reactmostra come viene creata una SPA di base per lavorare con l’Editor SPA in AEM con React.
  • SPA Editor Overviewfinder approfondisce il modello di comunicazione tra AEM e SPA.
  • WKND SPA Projects un'esercitazione passo-passo che implementa un semplice progetto SPA in AEM.
  • Mappatura da modello dinamico a componente per SPA spiega la mappatura dinamica da modello a componente e come funziona all’interno SPA in AEM.
  • SPA Blueprintè approfondisce il funzionamento dell’SDK SPA per AEM nel caso in cui desideri implementare SPA in AEM per un framework diverso da React o Angular o desideri semplicemente una comprensione più approfondita.

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