Erstellen Ihres ersten Angular-SPA-Projekts in AEM

Willkommen bei einem mehrteiligen Lernprogramm, das für Entwickler entwickelt wurde, die mit der Funktion SPA Editor in Adobe Experience Manager (AEM) neu arbeiten. Dieses Tutorial durchläuft die Implementierung einer Angular-Applikation für eine fiktive Lifestyle-Marke, die WKND. Die Angular-App wird entwickelt und für die Bereitstellung mit AEM SPA Editor entwickelt, der Angular-Komponenten AEM Komponenten zuordnet. Die fertige SPA, die in AEM bereitgestellt wird, kann mit den traditionellen Inline-Bearbeitungswerkzeugen von AEM dynamisch erstellt werden.

SPA implementiert

WKND SPA Implementierung

Info

Ziel dieses mehrteiligen Lernprogramms 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 Entwicklungs-Aktivitäten nach Persona aufgegliedert, häufig mit einem Front-End-Entwickler und einem Back-End-Entwickler. Wir glauben, dass es für jeden Entwickler, der an einem AEM SPA Editor-Projekt beteiligt sein wird, nützlich 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 wie folgt implementiert:

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

Neuester Code

Der gesamte Tutorialcode kann unter GitHub gefunden werden.

Die neueste Codebasis ist als herunterladbare AEM verfügbar.

Voraussetzungen

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

Auch wenn dies nicht erforderlich ist, ist es von Vorteil, ein grundlegendes Verständnis für die Entwicklung traditioneller AEM Sites-Komponenten zu haben.

Lokale Entwicklungsumgebung

Eine Umgebung zur lokalen Entwicklung ist erforderlich, um dieses Lernprogramm abzuschließen. Screenshots und Videos werden mit dem AEM als Cloud Service-SDK erfasst, das auf 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

Neu bei AEM as a Cloud Service? Sehen Sie sich das folgende Handbuch an, um eine lokale Entwicklungs-Umgebung mit dem AEM als Cloud Service-SDK einzurichten.

Neu zu AEM 6.5? Sehen Sie sich das folgende Handbuch an, um eine lokale Entwicklungs-Umgebung einzurichten.

Nächste Schritte

Worauf wartest du? Beginn Sie das Lernprogramm, indem Sie zum Kapitel SPA-Editor-Projekt navigieren und lernen, wie ein SPA Editor-aktiviertes Projekt mit dem AEM Projektarchiv erstellt wird.

Abwärtskompatibilität

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

Das UberJar v6.4.4 wurde als Abhängigkeit eingeschlossen:

<!-- 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 in Zielgruppe AEM 6.x-Umgebung 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 classic-Profil immer dann hinzu, wenn Sie dazu aufgefordert werden, einen Maven-Build auszufü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 das aemVersion, um Ihre vorgesehene AEM Zielgruppe.

Auf dieser Seite

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now