Uw eerste Angular SPA in AEM maken introduction

[​ voor het publiceren van AEM Sites die Edge Delivery Services gebruiken, klik hier.]{class="badge positive" title="Publish van AEM naar Edge Delivery Services"}

Onthaal aan een meerdelige zelfstudie die voor ontwikkelaars wordt ontworpen nieuw aan de SPA eigenschap van de Redacteur 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 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.

WKND SPA Implementatie

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 real-world scenario worden de ontwikkelingsactiviteiten onderverdeeld door persona, vaak het impliceren van de ontwikkelaar van het Voorste Eind van a ​ ​en a Achterste ontwikkelaar van het Eind. 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.

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

schat 1-2 uren om door elk deel van het leerprogramma te krijgen.

Laatste code

Al leerprogramma code kan op GitHubworden gevonden.

De recentste codebasisis beschikbaar als downloadbare AEM Pakketten.

Vereisten

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

terwijl niet vereist, is het nuttig om een basisbegrip van het ontwikkelen van traditionele componenten van AEM Siteste hebben.

Lokale ontwikkelomgeving local-dev-environment

Er is een lokale ontwikkelomgeving nodig om deze zelfstudie te voltooien. De schermafbeeldingen en de video worden gevangen gebruikend AEM as a Cloud Service SDK die op een milieu van Mac OS met Code van Visual Studioals winde loopt. Opdrachten en code moeten onafhankelijk zijn van het lokale besturingssysteem, tenzij anders aangegeven.

Volgende stappen next-steps

Waar wacht u op?! Begin het leerprogramma door aan het SPA hoofdstuk van het Project van de Redacteur te navigerenen te leren hoe te om een SPA Redacteur toegelaten project te produceren gebruikend het Archetype van het Project van de AEM.

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+ zijn verscheidene wijzigingen aangebracht.

UberJarv6.4.4 is inbegrepen als gebiedsdeel:

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

Er is een extra Maven-profiel met de naam classic 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>

Het profiel classic is standaard uitgeschakeld. Als u de zelfstudie met AEM 6.x volgt, voegt u het classic -profiel toe wanneer u de instructie hebt gekregen om een Maven-build uit te voeren:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Wanneer het produceren van een nieuw project voor een AEM implementatie altijd gebruik de recentste versie van AEM Archetype van het Projecten werk aemVersion bij om uw voorgenomen versie van AEM te richten.