Erstellen Ihres ersten Angular-SPA-Projekts in AEM

Letzte Aktualisierung: 2023-10-19
  • Themen:
  • SPA Editor
    Weitere Informationen zu diesem Thema
  • Erstellt für:
  • Beginner
    Developer

Zum Veröffentlichen aus AEM Sites unter Verwendung der Edge Delivery Services klicken Sie hier.

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.

Endgültige SPA implementiert

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

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.

HINWEIS

Nächste Schritte

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

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.

Vorherige Seite
Next page

Auf dieser Seite