Erstellen Ihres ersten Angular-SPA-Projekts in AEM introduction

[Zum Veröffentlichen aus AEM Sites unter Verwendung der Edge Delivery Services klicken Sie hier.]{class="badge positive" title="Veröffentlichen aus AEM mit Edge Delivery Services"}

Willkommen zu diesem mehrteiligen Tutorial. Es richtet sich an Entwicklerinnen und Entwickler, die die Funktion SPA-Editor von Adobe Experience Manager (AEM) noch nicht verwendet haben. Dieses Tutorial führt durch die Implementierung einer Angular-Anwendung für eine fiktive Lifestyle-Marke namens WKND. Die Angular-App wurde für die Bereitstellung mit dem SPA-Editor von AEM entwickelt, der Angular-Komponenten mit AEM-Komponenten verknüpft. Die fertiggestellte SPA wird in AEM bereitgestellt und kann mit herkömmlichen Inline-Bearbeitungswerkzeugen von AEM dynamisch bearbeitet werden.

SPA-Implementierung von WKND

Info

In diesem mehrteiligen Tutorial lernen Entwicklerinnen und Entwickler, wie eine Angular-Anwendung implementiert wird, sodass sie mit dem SPA-Editor von AEM funktioniert. In einem realen Szenario werden die Entwicklungsaktivitäten nach Personengruppen aufgeschlüsselt, wobei häufig auf Personen aus den Bereichen Frontend- und Backend-Entwicklung Bezug genommen wird. Wir glauben, dass es für alle Beteiligten eines SPA-Editor-Projekts in AEM von Vorteil ist, dieses Tutorial abzuschließen.

Das Tutorial wurde für die Verwendung mit AEM as a Cloud Service erstellt und ist abwärtskompatibel mit AEM 6.5.4+ und AEM 6.4.8+. Die SPA wird mithilfe von Folgendem implementiert:

Planen Sie 1-2 Stunden ein, um die einzelnen Teile des Tutorials zu durchlaufen.

Neuester Code

Den gesamten Tutorial-Code finden Sie auf GitHub.

Die aktuelle Code-Basis ist in Form von herunterladbaren AEM-Paketen verfügbar.

Voraussetzungen

Bevor Sie mit diesem Tutorial beginnen, benötigen Sie Folgendes:

Es ist zwar nicht erforderlich, jedoch von Vorteil, über ein grundlegendes Verständnis der Entwicklung herkömmlicher AEM-Sites-Komponenten zu verfügen.

Lokale Entwicklungsumgebung local-dev-environment

Für die Durchführung dieses Tutorials ist eine lokale Entwicklungsumgebung erforderlich. Screenshots und Videos werden mit dem AEM as a Cloud Service-SDK erfasst, das in einer macOS-Umgebung mit Visual Studio Code als IDE ausgeführt wird. Befehle und Code sollten unabhängig vom lokalen Betriebssystem sein, sofern nicht anders angegeben.

Nächste Schritte next-steps

Möchten Sie loslegen? Beginnen Sie das Tutorial, indem Sie zum Kapitel SPA-Editor-Projekt navigieren und lernen, wie Sie ein SPA-Editor-fähiges Projekt mithilfe des AEM-Projektarchetyps erstellen.

Abwärtskompatibilität compatibility

Der Projekt-Code für dieses Tutorial wurde für AEM as a Cloud Service erstellt. Damit der Projekt-Code abwärtskompatibel zu 6.5.4+ und 6.4.8+ ist, wurden mehrere Änderungen vorgenommen.

Die Version v6.4.4 von UberJar wurde als Abhängigkeit einbezogen:

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

Ein zusätzliches Maven-Profil mit dem Namen classic wurde hinzugefügt, um den Build zu ändern, sodass er auch mit AEM 6.x-Umgebungen funktioniert:

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

Das Profil classic ist standardmäßig deaktiviert. Wenn Sie das Tutorial mit AEM 6.x durchlaufen, fügen Sie das Profil classic hinzu, wenn ein Maven-Build ausgeführt werden soll:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Verwenden Sie beim Generieren eines neuen Projekts für eine AEM-Implementierung immer die neueste Version des AEM-Projektarchetyps und aktualisieren Sie aemVersion entsprechend der gewünschten AEM-Version.