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.
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:
- Grundläggande kunskaper i HTML, CSS och JavaScript
- Grundläggande kunskap om Angular
- AEM as a Cloud Service SDK, AEM 6.5.4+ eller AEM 6.4.8+
- Java
- Apache Maven (3.3.9 eller senare)
- Node.js och npm
Ä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.
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.