Creazione del primo SPA Angular in AEM

Benvenuti in un tutorial in più parti progettato per gli sviluppatori che non hanno mai utilizzato Editor SPA in Adobe Experience Manager (AEM). Questo tutorial illustra l’implementazione di un’applicazione di Angular per un brand di lifestyle fittizio, WKND. L’app Angular è sviluppata e progettata per essere implementata con l’Editor SPA dell’AEM, che mappa i componenti Angular ai componenti AEM. L’SPA completo, implementato nell’AEM, può essere creato in modo dinamico con i tradizionali strumenti di modifica in linea dell’AEM.

SPA finale implementato

Implementazione SPA WKND

Informazioni su

L’obiettivo di questo tutorial in più parti è insegnare a uno sviluppatore come implementare un’applicazione di Angular per lavorare con la funzione dell’editor SPA dell’AEM. In uno scenario reale le attività di sviluppo vengono suddivise per persona, spesso coinvolgendo un Sviluppatore front-end e un Sviluppatore back-end. Crediamo che sia utile per qualsiasi sviluppatore coinvolto in un progetto dell’Editor SPA dell’AEM completare questa esercitazione.

L’esercitazione è progettata per funzionare con AEM as a Cloud Service ed è retrocompatibile con AEM 6.5.4+ e AEM 6.4.8+. L’SPA viene attuato utilizzando:

Si stima che 1-2 ore passino attraverso ogni parte dell'esercitazione.

Codice più recente

Tutto il codice del tutorial è disponibile su GitHub.

Il base di codice più recente è disponibile come pacchetto AEM scaricabile.

Prerequisiti

Prima di iniziare questa esercitazione, è necessario disporre dei seguenti elementi:

Anche se non obbligatorio, è utile avere una conoscenza di base di sviluppo di componenti AEM Sites tradizionali.

Ambiente di sviluppo locale

Per completare questa esercitazione è necessario un ambiente di sviluppo locale. Le schermate e i video vengono acquisiti utilizzando l’SDK as a Cloud Service per l’AEM in esecuzione in un ambiente Mac OS con Codice di Visual Studio come IDE. I comandi e il codice devono essere indipendenti dal sistema operativo locale, salvo diversa indicazione.

NOTA

Passaggi successivi

Cosa state aspettando?! Avvia l’esercitazione passando al Progetto editor SPA e scopri come generare un progetto abilitato per l’editor SPA utilizzando l’archetipo di progetto AEM.

Compatibilità con le versioni precedenti

Il codice del progetto per questa esercitazione è stato creato per AEM as a Cloud Service. Per rendere il codice del progetto compatibile con le versioni precedenti per 6.5.4+ e 6.4.8+ sono state apportate diverse modifiche.

Il UberJar v6.4.4 è stato incluso come dipendenza:

<!-- Adobe AEM 6.x Dependencies -->
<dependency>
    <groupId>com.adobe.aem</groupId>
    <artifactId>uber-jar</artifactId>
    <version>6.4.4</version>
    <classifier>apis</classifier>
    <scope>provided</scope>
</dependency>

Un profilo Maven aggiuntivo, denominato classic È stato aggiunto per modificare la build per gli ambienti AEM 6.x di destinazione:

  <!-- AEM 6.x Profile to include Core Components-->
    <profile>
        <id>classic</id>
        <activation>
            <activeByDefault>false</activeByDefault>
        </activation>
        <build>
        ...
    </profile>

Il classic Il profilo è disabilitato per impostazione predefinita. Se segui il tutorial con AEM 6.x, aggiungi classic profilo ogni volta che viene richiesto di eseguire una build Maven:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Quando generi un nuovo progetto per un’implementazione AEM, utilizza sempre la versione più recente del Archetipo progetto AEM e aggiorna aemVersion per eseguire il targeting della versione desiderata di AEM.

In questa pagina