Skapa din första Angular SPA i AEM introduction

Välkommen till en självstudiekurs i flera delar som är utformad för utvecklare som inte använt SPA 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.

Slutlig SPA implementerad

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 delas utvecklingsverksamheterna upp efter personlighet, ofta med en Front End-utvecklare och 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.

The senaste kodbas finns som hämtningsbara AEM.

Förutsättningar

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

Även om det inte är nödvändigt är det bra att ha en grundläggande förståelse för utveckla 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.

NOTE
Är du inte AEM as a Cloud Service? Kolla in följa guiden för att konfigurera en lokal utvecklingsmiljö med AEM as a Cloud Service SDK.
Har du inte använt AEM 6.5 tidigare? Kolla in följa guiden för att konfigurera en lokal utvecklingsmiljö.

Nästa steg next-steps

Vad väntar du på?! Starta självstudiekursen genom att gå till SPA och lär dig hur du skapar ett projekt som SPA redigeraren har aktiverat med hjälp av 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+ flera ändringar har gjorts.

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

Ytterligare en Maven-profil med namnet classic har lagts till för att modifiera bygget för AEM 6.x-miljöer:

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

The classic profilen är inaktiverad som standard. Om du följer självstudiekursen med AEM 6.x ska du lägga till classic profil när den instrueras att utföra en Maven-byggnad:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

När du skapar ett nytt projekt för en AEM implementering ska du alltid använda den senaste versionen av AEM Project Archettype och uppdatera aemVersion för att anpassa er till den avsedda versionen av AEM.

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4