Erstellen Ihres ersten Angular-SPA-Projekts in AEM

Willkommen bei einem mehrteiligen Tutorial, das für Entwickler entwickelt wurde, die mit der Funktion SPA Editor in Adobe Experience Manager (AEM) neu sind. Dieses Tutorial führt durch die Implementierung einer Angular-Anwendung für eine fiktive Lifestyle-Marke, die WKND. Das Angular-Programm wird entwickelt und für die Bereitstellung mit AEM SPA Editor entwickelt, der Angular-Komponenten AEM Komponenten zuordnet. Die abgeschlossene SPA, die in AEM bereitgestellt wird, kann mit herkömmlichen In-line-Bearbeitungswerkzeugen von AEM dynamisch erstellt werden.

Endgültige SPA implementiert

WKND SPA Implementierung

Info

Ziel dieses mehrteiligen Tutorials ist es, Entwicklern beizubringen, wie eine Angular-Anwendung implementiert wird, um mit der SPA Editor-Funktion von AEM zu arbeiten. In einem realen Szenario werden die Entwicklungsaktivitäten nach Persona aufgeschlüsselt, häufig unter Einbeziehung eines Frontend-Entwicklers und eines Back End-Entwicklers. Wir glauben, dass es für jeden Entwickler, der an einem AEM SPA Editor-Projekt beteiligt sein wird, von Vorteil ist, dieses Tutorial abzuschließen.

Das Tutorial wurde für die Verwendung mit AEM als Cloud Service entwickelt und ist rückwärtskompatibel mit AEM 6.5.4+ und AEM 6.4.8+. Die SPA wird mithilfe von implementiert:

Schätzen Sie 1-2 Stunden, um die einzelnen Teile des Tutorials zu durchlaufen.

Neuester Code

Den gesamten Tutorial-Code finden Sie unter GitHub.

Die neueste Codebasis ist als herunterladbare AEM verfügbar.

Voraussetzungen

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

Obwohl dies nicht erforderlich ist, ist es von Vorteil, über ein grundlegendes Verständnis für die Entwicklung herkömmlicher AEM Sites-Komponenten zu verfügen.

Lokale Entwicklungsumgebung

Zum Abschluss dieses Tutorials ist eine lokale Entwicklungsumgebung erforderlich. Screenshots und Videos werden mit dem AEM as a Cloud Service SDK erfasst, das in einer Mac OS-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

Worauf wartest du?! Beginnen Sie das Tutorial, indem Sie zum Kapitel SPA Editor Project navigieren und erfahren Sie, wie Sie mit dem Projektarchetyp ein SPA Editor aktiviertes Projekt generieren.

Abwärtskompatibilität

Der Projektcode für dieses Tutorial wurde für AEM als Cloud Service erstellt. Um den Projektcode abwärtskompatibel für 6.5.4+ und 6.4.8+ zu machen, wurden mehrere Änderungen vorgenommen.

Die UberJar v6.4.4 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>

Es wurde ein zusätzliches Maven-Profil mit dem Namen classic hinzugefügt, um den Build für AEM 6.x-Umgebungen zu ändern:

  <!-- 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 dem Tutorial mit AEM 6.x folgen, fügen Sie das Profil classic hinzu, wann immer Sie angewiesen sind, einen Maven-Build durchzuführen:

$ 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, um Ihre beabsichtigte Version von AEM auszuwählen.

Auf dieser Seite