Crea il tuo primo SPA Angular in AEM

Ti diamo il benvenuto 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 Angular per un brand di lifestyle fittizio, il WKND. L’app Angular è sviluppata e progettata per essere implementata con AEM editor di SPA, che mappa i componenti di Angular su componenti AEM. Il SPA completato, distribuito a AEM, può essere creato dinamicamente con i tradizionali strumenti di modifica in linea di AEM.

SPA finale implementato

Implementazione SPA WKND

Informazioni su

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

L’esercitazione è progettata per lavorare con AEM as a Cloud Service ed è compatibile con le versioni precedenti AEM 6.5.4+ e AEM 6.4.8+. L’SPA viene implementato utilizzando:

Stimare 1-2 ore per passare attraverso ciascuna parte dell’esercitazione.

Codice più recente

Tutto il codice dell'esercitazione si trova in GitHub.

La base di codice più recente è disponibile come pacchetti AEM scaricabili.

Prerequisiti

Prima di avviare questa esercitazione, è necessario quanto segue:

Sebbene non sia necessario, è utile avere una comprensione 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 AEM as a Cloud Service 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 stai aspettando?! Avvia l’esercitazione passando alla pagina Progetto editor SPA questo capitolo e scopri come generare un progetto abilitato per l’editor di SPA utilizzando AEM Project Archetype.

Compatibilità con le versioni precedenti

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

La 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>

La classic il profilo è disattivato per impostazione predefinita. Se segui l’esercitazione con AEM 6.x, aggiungi la classic ogni volta che ti viene richiesto di eseguire una build Maven:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

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

In questa pagina