Uw eerste Angular SPA in AEM maken

Welkom bij een meerdelige zelfstudie die is ontworpen voor ontwikkelaars die nog niet vertrouwd zijn met de SPA Editor in Adobe Experience Manager (AEM). In deze zelfstudie wordt de implementatie besproken van een Angular-aanvraag voor een fictieve levensstijl, de WKND. De Angular-app wordt ontwikkeld en ontworpen voor implementatie met AEM SPA Editor, die Angular-componenten aan AEM componenten toewijst. De voltooide SPA, die aan AEM worden opgesteld, kan dynamisch met traditionele in-line het uitgeven hulpmiddelen van AEM worden ontworpen.

Laatste SPA geïmplementeerd

Implementatie van WKND-SPA

Info

Het doel voor deze meerdelige zelfstudie is om een ontwikkelaar te leren hoe te om een toepassing van de Angular uit te voeren om met de eigenschap van de SPARedacteur van AEM te werken. In een echt scenario worden de ontwikkelingsactiviteiten uitgesplitst per persoon, waarbij vaak sprake is van een Front End-ontwikkelaar en Ontwikkelaar Terug. Wij geloven het voor om het even welke ontwikkelaar die aan een AEM SPARedacteur project zal worden betrokken om deze zelfstudie te voltooien.

De zelfstudie is ontworpen om te werken met AEM as a Cloud Service en is achterwaarts compatibel met AEM 6.5.4+ en AEM 6.4.8+. De SPA wordt geïmplementeerd met:

Schat 1-2 uur om elk onderdeel van de zelfstudie te doorlopen.

Laatste code

Alle zelfstudiecode is te vinden op GitHub.

De meest recente codebasis is beschikbaar als downloadbare AEM Pakketten.

Vereisten

Voordat u deze zelfstudie start, hebt u het volgende nodig:

Hoewel niet vereist, is het nuttig om een basisbegrip te hebben van ontwikkeling van traditionele AEM Sites-componenten.

Lokale ontwikkelomgeving

Er is een lokale ontwikkelomgeving nodig om deze zelfstudie te voltooien. Screenshots en video worden vastgelegd met de AEM as a Cloud Service SDK die wordt uitgevoerd in een Mac OS-omgeving met Visual Studio-code als IDE. Opdrachten en code moeten onafhankelijk zijn van het lokale besturingssysteem, tenzij anders aangegeven.

Volgende stappen

Waar wacht u op?! De zelfstudie starten door naar de SPA Editor-project hoofdstuk en leer hoe te om een SPARedacteur toegelaten project te produceren gebruikend het AEM Archieftype van het Project.

Achterwaartse compatibiliteit

De projectcode voor deze zelfstudie is gemaakt voor AEM as a Cloud Service. Om de projectcode achterwaarts compatibel te maken voor 6.5.4+ en 6.4.8+ er zijn verscheidene wijzigingen aangebracht .

De UberJar v6.4.4 is opgenomen als een afhankelijkheid:

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

Een extra Maven-profiel, genaamd classic is toegevoegd om de build aan te passen aan AEM 6.x-omgevingen:

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

De classic profiel is standaard uitgeschakeld. Als u de zelfstudie met AEM 6.x volgt, voegt u de classic profiel wanneer de instructie wordt gegeven om een Maven-build uit te voeren:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Wanneer het produceren van een nieuw project voor een AEM implementatie altijd de recentste versie van gebruiken Projectarchetype AEM en de aemVersion om uw bedoelde versie van AEM te richten.

Op deze pagina