Erstellen Ihres ersten Angular-SPA-Projekts in AEM

Willkommen bei einem mehrteiligen Tutorial, das für Entwickler konzipiert ist, die neu bei der SPA Editor Funktion in Adobe Experience Manager (AEM). Dieses Tutorial führt durch die Implementierung einer Angular-Anwendung für eine fiktive Lifestyle-Marke, die WKND. Die Angular-App wurde 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, wobei häufig eine Frontend-Entwickler und Back End-Entwickler. Wir glauben, dass es für jeden Entwickler, der an einem AEM SPA Editor-Projekt beteiligt ist, von Vorteil ist, dieses Tutorial abzuschließen.

Das Tutorial wurde für die Verwendung mit AEM as a Cloud Service und ist abwä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 aktuelle Codebasis ist als herunterladbare AEM Packages verfügbar.

Voraussetzungen

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

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

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. Befehle und Code sollten unabhängig vom lokalen Betriebssystem sein, sofern nicht anders angegeben.

HINWEIS

Nächste Schritte

Worauf wartest du?! Starten Sie das Tutorial, indem Sie zur SPA Editor-Projekt Kapitel und erfahren Sie, wie Sie ein Projekt mit aktiviertem SPA-Editor mithilfe des Projektarchetyps AEM erstellen.

Abwärtskompatibilität

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

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>

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

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

Die classic Profil ist standardmäßig deaktiviert. Wenn Sie dem Tutorial mit AEM 6.x folgen, fügen Sie die classic Profil, wann immer es angewiesen wird, 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 Projektarchetyp und aktualisieren Sie die aemVersion , um Ihre beabsichtigte Version von AEM auszuwählen.

Auf dieser Seite