Maak je eerste Angular SPA in AEM introduction

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

Onthaal aan een multi-part leerprogramma dat voor ontwikkelaars nieuw aan de eigenschap van de Redacteur van het KUUROORD in Adobe Experience Manager (AEM) wordt ontworpen. In deze zelfstudie wordt de implementatie besproken van een Angular-toepassing voor een fictief levensstijlmerk, de WKND. De Angular-app is ontwikkeld en ontworpen voor implementatie met de AEM SPA Editor, die Angular-componenten toewijst aan AEM-componenten. De voltooide SPA, die aan AEM wordt opgesteld, kan dynamisch worden ontworpen met traditionele in-line het uitgeven hulpmiddelen van AEM.

WKND de Implementatie van het KUUROORD

Info

Het doel voor dit meerdelige leerprogramma is een ontwikkelaar te leren hoe te om een toepassing van Angular uit te voeren om met de eigenschap van de Redacteur van het KUUROORD 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 Redacteur van AEM SPA 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+. Het SPA wordt uitgevoerd gebruikend:

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 Pakketten van AEM.

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 hoofdstuk van het Project van de Redacteur van het KUUROORDte navigeren en te leren hoe te om een Redacteur van het KUUROORD toegelaten project te produceren gebruikend het Archetype van het Project van 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 de 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 implementatie van AEM gebruikt altijd de recentste versie van Archetype van het Project van AEMen werkt aemVersion bij om uw voorgenomen versie van AEM te richten.