Uw eerste Angular SPA in AEM maken introduction

[Klik hier als u vanuit AEM Sites wilt publiceren met Edge Delivery Services.]{class="badge positive" title="Publiceren van AEM naar Edge Delivery Services"}

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 is ontwikkeld en ontworpen om te worden geïmplementeerd 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.

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 een Front End-ontwikkelaar en Ontwikkelaar Terug. Wij geloven het voor om het even welke ontwikkelaar die bij een project van de SPA van de AEM betrokken is 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 local-dev-environment

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 next-steps

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 Project Archetype.

Achterwaartse compatibiliteit compatibility

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.