Erfahren Sie, wie Sie ein Adobe Experience Manager-Maven-Projekt (AEM) als Ausgangspunkt für eine mit dem AEM SPA Editor integrierte Angular-Anwendung verwenden.
In diesem Kapitel wird ein neues AEM-Projekt bereitgestellt, das auf dem AEM Projektarchetyp. Das AEM Projekt ist mit einem sehr einfachen Ausgangspunkt für die Angular-SPA bootstrapping. Das in diesem Kapitel verwendete Projekt wird als Grundlage für die Umsetzung des WKND-SPA dienen und in künftigen Kapiteln aufbauen.
Eine klassische Nachricht vom Typ Hello World .
Überprüfen Sie die erforderlichen Tools und Anweisungen zum Einrichten eines lokale Entwicklungsumgebung. Stellen Sie sicher, dass eine neue Instanz von Adobe Experience Manager in author -Modus, wird lokal ausgeführt.
Es gibt mehrere Möglichkeiten, ein Maven-Projekt mit mehreren Modulen für AEM zu erstellen. In diesem Tutorial wurde die neueste AEM Projektarchetyp als Grundlage für den Tutorial-Code. Der Projektcode wurde geändert, um mehrere Versionen von AEM zu unterstützen. Bitte überprüfen Sie Hinweis zur Abwärtskompatibilität.
Es empfiehlt sich, die latest Version der archetype Erstellung eines neuen Projekts für eine reale Umsetzung. AEM Projekte sollten auf eine einzelne Version von AEM ausgerichtet sein, wobei die aemVersion
-Eigenschaft des Archetyps.
Laden Sie den Ausgangspunkt für dieses Tutorial über Git herunter:
$ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/create-project-start
Die folgende Ordner- und Dateistruktur stellt das AEM Projekt dar, das vom Maven-Archetyp im lokalen Dateisystem generiert wurde:
|--- aem-guides-wknd-spa
|--- all/
|--- core/
|--- dispatcher/
|--- ui.apps/
|--- ui.apps.structure/
|--- ui.content/
|--- ui.frontend /
|--- it.tests/
|--- pom.xml
|--- README.md
|--- .gitignore
|--- archetype.properties
Die folgenden Eigenschaften wurden beim Generieren des AEM-Projekts aus dem AEM Projektarchetyp:
Eigenschaft | Wert |
---|---|
aemVersion | Wolke |
appTitle | WKND SPA Angular |
appId | wknd-spa-angular |
groupId | com.adobe.aem.guides |
frontendModule | angular |
package | com.adobe.aem.guides.wknd.spa.angular |
includeExample | n |
Beachten Sie die frontendModule=angular
-Eigenschaft. Dadurch wird der AEM Projektarchetyp angewiesen, das Projekt mit einem Starter zu bootstrapping durchzuführen Angular-Codebasis für die Verwendung mit dem AEM SPA Editor.
Kompilieren, erstellen und stellen Sie anschließend mithilfe von Maven den Projektcode auf einer lokalen Instanz von AEM bereit.
Stellen Sie sicher, dass eine Instanz von AEM lokal am Port ausgeführt wird. 4502.
Überprüfen Sie im Befehlszeilenterminal, ob Maven installiert ist:
$ mvn --version
Apache Maven 3.6.2
Maven home: /Library/apache-maven-3.6.2
Java version: 11.0.4, vendor: Oracle Corporation, runtime: /Library/Java/JavaVirtualMachines/jdk-11.0.4.jdk/Contents/Home
Führen Sie den folgenden Maven-Befehl aus der aem-guides-wknd-spa
-Ordner zum Erstellen und Bereitstellen des Projekts für AEM:
$ mvn -PautoInstallSinglePackage clean install
Wenn Sie AEM 6.x:
$ mvn clean install -PautoInstallSinglePackage -Pclassic
Die verschiedenen Module des Projekts sollten kompiliert und AEM bereitgestellt werden.
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for wknd-spa-angular 1.0.0-SNAPSHOT:
[INFO]
[INFO] wknd-spa-angular ................................... SUCCESS [ 0.473 s]
[INFO] WKND SPA Angular - Core ............................ SUCCESS [ 54.866 s]
[INFO] wknd-spa-angular.ui.frontend - UI Frontend ......... SUCCESS [02:10 min]
[INFO] WKND SPA Angular - Repository Structure Package .... SUCCESS [ 0.694 s]
[INFO] WKND SPA Angular - UI apps ......................... SUCCESS [ 6.351 s]
[INFO] WKND SPA Angular - UI content ...................... SUCCESS [ 2.885 s]
[INFO] WKND SPA Angular - All ............................. SUCCESS [ 1.736 s]
[INFO] WKND SPA Angular - Integration Tests Bundles ....... SUCCESS [ 2.563 s]
[INFO] WKND SPA Angular - Integration Tests Launcher ...... SUCCESS [ 1.846 s]
[INFO] WKND SPA Angular - Dispatcher ...................... SUCCESS [ 0.270 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
Das Maven-Profil autoInstallSinglePackage kompiliert die einzelnen Module des Projekts und stellt ein einzelnes Paket in der AEM-Instanz bereit. Standardmäßig wird dieses Paket in einer AEM-Instanz bereitgestellt, die lokal am Port ausgeführt wird 4502 und mit den Anmeldeinformationen von admin:admin.
Navigieren Sie zu Package Manager in Ihrer lokalen AEM-Instanz: http://localhost:4502/crx/packmgr/index.jsp.
Es sollten drei Pakete für wknd-spa-angular.all
, wknd-spa-angular.ui.apps
und wknd-spa-angular.ui.content
.
Der gesamte für das Projekt benötigte benutzerspezifische Code wird in diesen Paketen gebündelt und zur AEM Laufzeit installiert.
Sie sollten auch mehrere Pakete für spa.project.core
und core.wcm.components
. Hierbei handelt es sich um Abhängigkeiten, die automatisch vom Archetyp eingeschlossen werden. Weitere Informationen AEM Kernkomponenten finden Sie hier ..
Öffnen Sie als Nächstes die SPA, die vom Archetyp generiert wurde, und aktualisieren Sie einige Inhalte.
Navigieren Sie zum Sites console: http://localhost:4502/sites.html/content.
Die WKND-SPA enthält eine grundlegende Site-Struktur mit einem Land, einer Sprache und einer Homepage. Diese Hierarchie basiert auf den Standardwerten des Archetyps für language_country
und isSingleCountryWebsite
. Diese Werte können überschrieben werden, indem die Verfügbare Eigenschaften beim Generieren eines Projekts.
Öffnen Sie die us > en > WKND SPA Angular Home Page Seite durch Auswahl der Seite und Klicken auf Bearbeiten in der Menüleiste:
A Text wurde der Seite bereits hinzugefügt. Sie können diese Komponente wie jede andere Komponente in AEM bearbeiten.
Hinzufügen eines zusätzlichen Text -Komponente auf der Seite.
Beachten Sie, dass das Authoring-Erlebnis dem herkömmlichen AEM Sites-Seitenerlebnis ähnelt. Derzeit ist eine begrenzte Anzahl von Komponenten verfügbar, die verwendet werden können. Im Laufe des Tutorials werden weitere Informationen hinzugefügt.
Überprüfen Sie anschließend mithilfe der Entwicklertools Ihres Browsers, ob es sich um eine Einzelseiten-App handelt.
Im Seiten-Editor, klicken Sie auf die Seiteninformationen Menü > Als veröffentlicht anzeigen:
Dadurch wird eine neue Registerkarte mit dem Abfrageparameter geöffnet. ?wcmmode=disabled
, wodurch der AEM Editor effektiv deaktiviert wird: http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled
Zeigen Sie die Quelle der Seite an und beachten Sie, dass der Textinhalt Hello World oder der andere Inhalt nicht gefunden wird. Stattdessen sollten Sie HTML wie folgt sehen:
...
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="spa-root"></div>
<script type="text/javascript" src="/etc.clientlibs/wknd-spa-angular/clientlibs/clientlib-angular.min.js"></script>
...
</body>
...
clientlib-angular.min.js
ist die Angular-SPA, die auf die Seite geladen wird und für die Wiedergabe des Inhalts verantwortlich ist.
Woher kommt der Inhalt?
Kehren Sie zur Registerkarte zurück: http://localhost:4502/content/wknd-spa-angular/us/en/home.html?wcmmode=disabled
Öffnen Sie die Entwicklertools des Browsers und überprüfen Sie den Netzwerk-Traffic der Seite während einer Aktualisierung. Anzeigen der XHR Anforderungen:
Es sollte eine Anfrage an http://localhost:4502/content/wknd-spa-angular/us/en.model.json. Dies enthält den gesamten Inhalt, formatiert in JSON, der die SPA steuert.
Öffnen Sie in einer neuen Registerkarte http://localhost:4502/content/wknd-spa-angular/us/en.model.json
Die Anfrage en.model.json
stellt das Inhaltsmodell dar, das die Anwendung steuern wird. Inspect die JSON-Ausgabe und Sie sollten den Codeausschnitt finden können, der die Text Komponenten.
...
":items": {
"text": {
"text": "<p>Hello World! Updated content!</p>\r\n",
"richText": true,
":type": "wknd-spa-angular/components/text"
},
"text_98796435": {
"text": "<p>A new text component.</p>\r\n",
"richText": true,
":type": "wknd-spa-angular/components/text"
},
...
Im nächsten Kapitel werden wir untersuchen, wie der JSON-Inhalt von AEM Komponenten zu SPA Komponenten zugeordnet wird, um die Grundlage für das AEM SPA Editor zu bilden.
Es kann hilfreich sein, eine Browsererweiterung zu installieren, um die JSON-Ausgabe automatisch zu formatieren.
Herzlichen Glückwunsch! Sie haben gerade Ihr erstes AEM SPA Editor Projekt erstellt!
Es ist jetzt ganz einfach, aber in den nächsten Kapiteln wird mehr Funktionalität hinzugefügt.
SPA integrieren - Erfahren Sie, wie der SPA Quellcode in das AEM Projekt integriert ist, und lernen Sie die verfügbaren Tools kennen, um die SPA schnell zu entwickeln.