Skapa din första Angular SPA i AEM introduction

[Klicka här om du vill publicera från AEM Sites med Edge Delivery Services.]{class="badge positive" title="Publish från AEM till Edge Delivery Services"}

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 för ett fiktivt livsstilsmärke, WKND. Appen Angular har utvecklats och utformats för att användas med AEM SPA Editor, som mappar Angular-komponenter till AEM. Den färdiga SPA, som används för AEM, kan redigeras dynamiskt med AEM traditionella textbundna redigeringsverktyg.

WKND-SPA

Om

Målet med den här självstudiekursen är att lära en utvecklare hur man implementerar en Angular som fungerar med SPA redigeringsfunktion 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 redigeringsprojekt kan slutföra den här självstudiekursen.

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.

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 skapar ett projekt som är aktiverat för SPA redigeraren med hjälp av den AEM projekttypen.

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 bygget 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 lägger du till profilen classic när du får instruktioner om att utföra en Maven-konstruktion:

$ 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 målversionen av AEM används.