Skapa din första Angular SPA i AEM introduction

Välkommen till en självstudiekurs i flera delar som utformats för utvecklare som inte har använt funktionen SPA Editor i Adobe Experience Manager (AEM). Den här självstudiekursen går igenom implementeringen av en Angular-applikation för ett fiktivt livsstilsmärke, WKND. Angular-appen har utvecklats och utformats för att användas med AEM SPA Editor, som mappar Angular-komponenter till AEM-komponenter. Den kompletta SPA-lösningen, som används i AEM, kan redigeras dynamiskt med AEM traditionella textbundna redigeringsverktyg.

WKND SPA-implementering

Om

Målet med den här självstudiekursen är att lära en utvecklare hur man implementerar ett Angular-program så att det fungerar med SPA-redigeringsfunktionen i AEM. I ett verkligt scenario bryts utvecklingsaktiviteterna ned per person, ofta med en Front End-utvecklare och en Back End-utvecklare. Vi anser att det är bra att alla utvecklare som arbetar med ett AEM SPA Editor-projekt slutför kursen.

Självstudiekursen är utformad för att fungera med AEM as a Cloud Service och är bakåtkompatibel med AEM 6.5.4+ och AEM 6.4.8+. SPA implementeras med:

Beräkna 1-2 timmar för att komma igenom varje del av självstudiekursen.

Senaste kod

All självstudiekod finns på GitHub.

Den senaste kodbasen är tillgänglig som hämtningsbara AEM-paket.

Förutsättningar

Innan du startar den här självstudiekursen behöver du följande:

Även om det inte krävs är det bra att ha en grundläggande förståelse för utveckling av traditionella AEM Sites-komponenter.

Lokal utvecklingsmiljö local-dev-environment

En lokal utvecklingsmiljö krävs för att slutföra den här självstudiekursen. Skärmbilder och video hämtas med AEM as a Cloud Service SDK som körs i en Mac OS-miljö med Visual Studio Code som IDE. Kommandon och kod ska vara oberoende av det lokala operativsystemet, om inget annat anges.

Nästa steg next-steps

Vad väntar du på?! Starta självstudiekursen genom att gå till kapitlet SPA Editor Project och lära dig hur du genererar ett SPA Editor-aktiverat projekt med AEM Project Archetype.

Bakåtkompatibilitet compatibility

Projektkoden för den här självstudiekursen har skapats för AEM as a Cloud Service. För att göra projektkoden bakåtkompatibel för 6.5.4+ och 6.4.8+ har flera ändringar gjorts.

UberJar v6.4.4 har inkluderats som ett beroende:

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

En ytterligare Maven-profil med namnet classic har lagts till för att ändra byggprocessen till AEM 6.x-miljöer:

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

Profilen classic är inaktiverad som standard. Om du följer självstudiekursen med AEM 6.x ska du lägga till profilen classic när du får instruktioner om att utföra en Maven-version:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

När du genererar ett nytt projekt för en AEM-implementering ska du alltid använda den senaste versionen av AEM Project Archetype och uppdatera aemVersion så att den är avsedd för din version av AEM.