SPA integrieren

Erfahren Sie, wie der Quellcode für eine Einzelseiten-App (SPA), die auf Angular geschrieben wurde, in ein Adobe Experience Manager (AEM)-Projekt integriert werden kann. Erfahren Sie, wie Sie mit modernen Frontend-Tools wie einem Webpack Development Server die SPA schnell mit der AEM JSON-Modell-API entwickeln können.

Ziel

Erfahren Sie, wie das SPA-Projekt in AEM mit Client-seitigen Bibliotheken integriert ist.
Erfahren Sie, wie Sie einen lokalen Entwicklungsserver für die dedizierte Front-End-Entwicklung verwenden.
Nutzung einer Proxy und statisch mock Datei für die Entwicklung mit der AEM JSON-Modell-API

Was Sie erstellen werden

Dieses Kapitel fügt ein einfaches Header -Komponente in die SPA. Im Prozess der Erstellung dieser statischen Header -Komponente werden verschiedene Ansätze zur AEM SPA-Entwicklung verwendet.

Neue Kopfzeile in AEM

Der SPA wird erweitert, um einen statischen Header component

Voraussetzungen

Überprüfen Sie die erforderlichen Tools und Anweisungen zum Einrichten eines lokale Entwicklungsumgebung.

Code abrufen

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/integrate-spa-start

Stellen Sie die Codebasis mithilfe von Maven in einer lokalen AEM-Instanz bereit:
```
$ mvn clean install -PautoInstallSinglePackage
```
Wenn Sie AEM 6.x Fügen Sie die classic profile:
```
$ mvn clean install -PautoInstallSinglePackage -Pclassic
```

Sie können den fertigen Code immer in GitHub oder den Code lokal auszuchecken, indem Sie zu der Verzweigung wechseln Angular/integrate-spa-solution.

Integrationsansatz

Im Rahmen des AEM wurden zwei Module erstellt: ui.apps und ui.frontend.

Die ui.frontend -Modul Webpack -Projekt, das den gesamten SPA Quellcode enthält. Ein Großteil der SPA Entwicklung und Tests wird im webpack-Projekt durchgeführt. Wenn ein Produktions-Build ausgelöst wird, wird der SPA mithilfe des Webpack erstellt und kompiliert. Die kompilierten Artefakte (CSS und JavaScript) werden in die ui.apps -Modul, das dann zur AEM Laufzeit bereitgestellt wird.

ui.frontend-Architektur auf hoher Ebene

Eine allgemeine Darstellung der SPA Integration.

Weitere Informationen zum Front-End-Build finden Sie unter hier finden.

Inspect - SPA

Überprüfen Sie anschließend die ui.frontend -Modul, um die SPA zu verstehen, die automatisch von der AEM Projektarchetyp.

Öffnen Sie in der IDE Ihrer Wahl das AEM Projekt für die WKND-SPA. In diesem Tutorial wird die Visual Studio Code-IDE.
Erweitern und überprüfen Sie die ui.frontend Ordner. Öffnen Sie die Datei ui.frontend/package.json

Unter dem dependencies sollten mehrere @angular:

"@angular/animations": "~9.1.11",
"@angular/common": "~9.1.11",
"@angular/compiler": "~9.1.11",
"@angular/core": "~9.1.11",
"@angular/forms": "~9.1.10",
"@angular/platform-browser": "~9.1.10",
"@angular/platform-browser-dynamic": "~9.1.10",
"@angular/router": "~9.1.10",

Die ui.frontend -Modul Angular-Applikation generiert mithilfe der Angular CLI-Tool das Routing umfasst.

Es gibt auch drei Abhängigkeiten mit dem Präfix @adobe:
```
"@adobe/cq-angular-editable-components": "^2.0.2",
"@adobe/cq-spa-component-mapping": "^1.0.3",
"@adobe/cq-spa-page-model-manager": "^1.1.3",
```
Die oben genannten Module bilden die AEM SPA Editor JS SDK und stellen die Funktionalität bereit, mit der es möglich ist, SPA Komponenten AEM Komponenten zuzuordnen.
Im package.json Datei mehrere scripts definiert werden:
```
"scripts": {
    "start": "ng serve --open --proxy-config ./proxy.conf.json",
    "build": "ng lint && ng build && clientlib",
    "build:production": "ng lint && ng build --prod && clientlib",
    "test": "ng test",
    "sync": "aemsync -d -w ../ui.apps/src/main/content"
}
```
Diese Skripte basieren auf gängigen Angular CLI-Befehle wurden jedoch geringfügig geändert, um mit dem größeren AEM-Projekt zu arbeiten.

start - führt die Angular-App lokal über einen lokalen Webserver aus. Es wurde aktualisiert, um den Inhalt der lokalen AEM-Instanz zu simulieren.

build - kompiliert die Angular-App für die Produktionsverteilung. Die Hinzufügung von && clientlib ist für das Kopieren der kompilierten SPA in die ui.apps -Modul als clientseitige Bibliothek während eines Builds. Das npm-Modul aem-clientlib-generator wird verwendet, um dies zu erleichtern.

Weitere Informationen zu den verfügbaren Skripten finden Sie unter here.
Prüfen Sie die Datei ui.frontend/clientlib.config.js. Diese Konfigurationsdatei wird von aem-clientlib-generator , um zu bestimmen, wie die Client-Bibliothek generiert wird.
Prüfen Sie die Datei ui.frontend/pom.xml. Diese Datei transformiert die ui.frontend Ordner in ein Maven-Modul. Die pom.xml wurde aktualisiert, um die frontend-maven-plugin nach test und build die SPA während eines Maven-Builds.

Inspect der Datei app.component.ts at ui.frontend/src/app/app.component.ts:

import { Constants } from '@adobe/cq-angular-editable-components';
import { ModelManager } from '@adobe/cq-spa-page-model-manager';
import { Component } from '@angular/core';

@Component({
selector: '#spa-root', // tslint:disable-line
styleUrls: ['./app.component.css'],
templateUrl: './app.component.html'
})
export class AppComponent {
    ...

    constructor() {
        ModelManager.initialize().then(this.updateData);
    }

    private updateData = pageModel => {
        this.path = pageModel[Constants.PATH_PROP];
        this.items = pageModel[Constants.ITEMS_PROP];
        this.itemsOrder = pageModel[Constants.ITEMS_ORDER_PROP];
    }
}

app.component.js ist der Einstiegspunkt des SPA. ModelManager wird vom AEM SPA Editor JS SDK bereitgestellt. Es ist für das Aufrufen und Einfügen der pageModel (der JSON-Inhalt) in die Anwendung.

Hinzufügen einer Kopfzeilenkomponente

Fügen Sie anschließend eine neue Komponente zum SPA hinzu und stellen Sie die Änderungen auf einer lokalen AEM-Instanz bereit, um die Integration anzuzeigen.

Öffnen Sie ein neues Terminal-Fenster und navigieren Sie zum Ordner ui.frontend:
```
$ cd aem-guides-wknd-spa/ui.frontend
```
Installieren Angular CLI global Dies wird zum Generieren von Angular-Komponenten sowie zum Erstellen und Bereitstellen der Angular-Anwendung über die ng Befehl.
```
$ npm install -g @angular/cli
```
VORSICHT

Die Version von @angular/cli von diesem Projekt verwendet wird 9.1.7. Es wird empfohlen, die Angular-CLI-Versionen synchron zu halten.

Erstellen Sie eine neue Header -Komponente durch Ausführen der Angular-CLI ng generate component -Befehl innerhalb von ui.frontend Ordner.

$ ng generate component components/header

CREATE src/app/components/header/header.component.css (0 bytes)
CREATE src/app/components/header/header.component.html (21 bytes)
CREATE src/app/components/header/header.component.spec.ts (628 bytes)
CREATE src/app/components/header/header.component.ts (269 bytes)
UPDATE src/app/app.module.ts (1809 bytes)

Dadurch wird ein Skelett für die neue Angular-Header-Komponente unter erstellt. ui.frontend/src/app/components/header.

Öffnen Sie die aem-guides-wknd-spa -Projekt in der IDE Ihrer Wahl. Navigieren Sie zum Ordner ui.frontend/src/app/components/header.
Öffnen Sie die Datei header.component.html und ersetzen Sie den Inhalt durch Folgendes:
```

<header className="header">
    <div className="header-container">
        <h1>WKND</h1>
    </div>
</header>
```
Beachten Sie, dass hier statische Inhalte angezeigt werden, sodass diese Angular-Komponente keine Anpassungen am standardmäßig generierten Inhalt erfordert header.component.ts.
Öffnen Sie die Datei app.component.html at ui.frontend/src/app/app.component.html. Fügen Sie die app-header:
```
<app-header></app-header>
<router-outlet></router-outlet>
```
Dies umfasst die header -Komponente vor allem den Seiteninhalt.

Öffnen Sie ein neues Terminal und navigieren Sie zum ui.frontend und führen Sie die npm run build command:

$ cd ui.frontend
$ npm run build

Linting "angular-app"...
All files pass linting.
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

Navigieren Sie zum Ordner ui.apps. darunter ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/clientlibs/clientlib-angular Sie sollten sehen, dass die kompilierten SPA aus demui.frontend/build Ordner.

Kehren Sie zum Terminal zurück und navigieren Sie zum ui.apps Ordner. Führen Sie den folgenden Maven-Befehl aus:

$ cd ../ui.apps
$ mvn clean install -PautoInstallPackage
...
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time:  9.629 s
[INFO] Finished at: 2020-05-04T17:48:07-07:00
[INFO] ------------------------------------------------------------------------

Dadurch wird die ui.apps auf eine lokale, laufende Instanz von AEM.

Öffnen Sie eine Browser-Registerkarte und navigieren Sie zu http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. Sie sollten nun den Inhalt der Header -Komponente in der SPA angezeigt.

Erste Kopfzeilenimplementierung

Schritte 7-9 werden automatisch ausgeführt, wenn ein Maven-Build aus dem Stammverzeichnis des Projekts ausgelöst wird (d. h. mvn clean install -PautoInstallSinglePackage). Sie sollten jetzt die Grundlagen der Integration zwischen den SPA- und AEM Client-seitigen Bibliotheken verstehen. Beachten Sie, dass Sie weiterhin bearbeiten und hinzufügen können. Text Komponenten in AEM, jedoch die Header -Komponente nicht bearbeitbar ist.

Webpack Dev Server - Proxy der JSON-API

Wie in den vorherigen Übungen gezeigt, dauert es einige Minuten, einen Build durchzuführen und die Client-Bibliothek mit einer lokalen Instanz von AEM zu synchronisieren. Dies ist für Endtests akzeptabel, aber nicht ideal für den Großteil der SPA.

A webpack-Dev-Server kann zur schnellen Entwicklung des SPA verwendet werden. Die SPA wird von einem JSON-Modell gesteuert, das von AEM generiert wurde. In dieser Übung wird der JSON-Inhalt aus einer laufenden Instanz von AEM proxid in den vom Entwicklungs-Server konfigurierten Entwicklungsserver Angular-Projekt.

Kehren Sie zur IDE zurück und öffnen Sie die Datei . proxy.conf.json at ui.frontend/proxy.conf.json.

[
    {
        "context": [
                    "/content/**/*.(jpg|jpeg|png|model.json)",
                    "/etc.clientlibs/**/*"
                ],
        "target": "http://localhost:4502",
        "auth": "admin:admin",
        "logLevel": "debug"
    }
]

Die Angular-App bietet einen einfachen Mechanismus zum Proxy von API-Anfragen. Die in context über localhost:4502, der lokale AEM Schnellstart.

Öffnen Sie die Datei index.html at ui.frontend/src/index.html. Dies ist die HTML-Stammdatei, die vom Dev-Server verwendet wird.

Beachten Sie, dass ein Eintrag für base href="/". Die base-Tag ist wichtig, damit die App relative URLs auflöst.
```
<base href="/">
```

Öffnen Sie ein Terminal-Fenster und navigieren Sie zum ui.frontend Ordner. Führen Sie den Befehl npm start aus:

$ cd ui.frontend
$ npm start

> wknd-spa-angular@0.1.0 start /Users/dgordon/Documents/code/aem-guides-wknd-spa/ui.frontend
> ng serve --open --proxy-config ./proxy.conf.json

10% building 3/3 modules 0 active[HPM] Proxy created: [ '/content/**/*.(jpg|jpeg|png|model.json)', '/etc.clientlibs/**/*' ]  ->  http://localhost:4502
[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]
ℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html

Öffnen Sie eine neue Browser-Registerkarte (falls noch nicht geöffnet) und navigieren Sie zu http://localhost:4200/content/wknd-spa-angular/us/en/home.html.

Sie sollten denselben Inhalt wie in AEM sehen, jedoch ohne eine der Authoring-Funktionen aktiviert zu haben.
Kehren Sie zur IDE zurück und erstellen Sie einen neuen Ordner mit dem Namen img at ui.frontend/src/assets.
Laden Sie das folgende WKND-Logo herunter und fügen Sie es zum img Ordner:

Öffnen header.component.html at ui.frontend/src/app/components/header/header.component.html und das Logo einfügen:

<header class="header">
    <div class="header-container">
        <div class="logo">
            <img class="logo-img" src="assets/img/wknd-logo-dk.png" alt="WKND SPA" />
        </div>
    </div>
</header>

Speichern Sie die Änderungen in header.component.html.

Kehren Sie zum Browser zurück. Sie sollten die Änderungen an der App sofort sehen.

Sie können Inhaltsaktualisierungen in AEM und sehen Sie sie in webpack-Dev-Server, da wir den Inhalt proxieren. Beachten Sie, dass die Inhaltsänderungen nur im webpack-Dev-Server.
Beenden Sie den lokalen Webserver mit ctrl+c im Terminal.

Webpack Dev Server - JSON-API nachahmen

Ein weiterer Ansatz für die schnelle Entwicklung besteht darin, eine statische JSON-Datei zu verwenden, um als JSON-Modell zu fungieren. Durch "nachahmen"der JSON entfernen wir die Abhängigkeit von einer lokalen AEM-Instanz. Darüber hinaus kann ein Frontend-Entwickler das JSON-Modell aktualisieren, um die Funktionalität zu testen und Änderungen an der JSON-API vorzunehmen, die später von einem Back-End-Entwickler implementiert würden.

Die anfängliche Einrichtung der JSON-nachgeahmten Datei eine lokale AEM-Instanz benötigen.

Navigieren Sie im Browser zu http://localhost:4502/content/wknd-spa-angular/us/en.model.json.

Dies ist die von AEM exportierte JSON, die die Anwendung steuert. Kopieren Sie die JSON-Ausgabe.
Kehren Sie zur IDE zurück und navigieren Sie zu ui.frontend/src und fügen Sie neue Ordner hinzu namens Mäuse und json , um die folgende Ordnerstruktur abzugleichen:
```
|-- ui.frontend
    |-- src
        |-- mocks
            |-- json
```
Erstellen Sie eine neue Datei mit dem Namen en.model.json unter ui.frontend/public/mocks/json. Fügen Sie die JSON-Ausgabe aus Schritt 1 hier.

Neue Datei erstellen proxy.mock.conf.json unter ui.frontend. Füllen Sie die Datei mit folgendem Inhalt:

[
    {
    "context": [
        "/content/**/*.model.json"
    ],
    "pathRewrite": { "^/content/wknd-spa-angular/us" : "/mocks/json"} ,
    "target": "http://localhost:4200",
    "logLevel": "debug"
    }
]

Diese Proxykonfiguration schreibt Anforderungen neu, die mit /content/wknd-spa-angular/us mit /mocks/json und bedienen die entsprechende statische JSON-Datei, z. B.:

/content/wknd-spa-angular/us/en.model.json -> /mocks/json/en.model.json

Öffnen Sie die Datei angular.json. Hinzufügen neuer dev Konfiguration mit aktualisierter Assets Array, das auf die Mäuse Ordner erstellt.
```
 "dev": {
          "assets": [
            "src/mocks",
            "src/assets",
            "src/favicon.ico",
            "src/logo192.png",
            "src/logo512.png",
            "src/manifest.json"
          ]
    },
```
Erstellung eines dedizierten dev -Konfiguration stellt sicher, dass Mäuse -Ordner wird nur während der Entwicklung verwendet und nie in einem Produktions-Build AEM bereitgestellt.

Im angular.json -Datei, dann aktualisieren Sie die browserTarget Konfiguration zur Verwendung der neuen dev Konfiguration:

  ...
  "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
+       "browserTarget": "angular-app:build:dev"
-       "browserTarget": "angular-app:build"
      },
  ...

Angular JSON-Build-Dev-Update

Öffnen Sie die Datei ui.frontend/package.json und fügen Sie eine neue start:mock -Befehl zum Referenzieren der proxy.mock.conf.json -Datei.

    "scripts": {
        "start": "ng serve --open --proxy-config ./proxy.conf.json",
+       "start:mock": "ng serve --open --proxy-config ./proxy.mock.conf.json",
        "build": "ng lint && ng build && clientlib",
        "build:production": "ng lint && ng build --prod && clientlib",
        "test": "ng test",
        "sync": "aemsync -d -w ../ui.apps/src/main/content"
    }

Durch Hinzufügen eines neuen Befehls ist es einfach, zwischen den Proxy-Konfigurationen umzuschalten.

Wenn sie derzeit ausgeführt wird, beenden Sie die webpack-Dev-Server. Starten Sie die webpack-Dev-Server mithilfe der start:mock script:
```
$ npm run start:mock

> wknd-spa-angular@0.1.0 start:mock /Users/dgordon/Documents/code/aem-guides-wknd-spa/ui.frontend
> ng serve --open --proxy-config ./proxy.mock.conf.json
```
Navigieren Sie zu http://localhost:4200/content/wknd-spa-angular/us/en/home.html und Sie sollten denselben SPA sehen, aber der Inhalt wird jetzt aus dem mock JSON-Datei.
Nehmen Sie eine kleine Änderung an der en.model.json zuvor erstellte Datei. Der aktualisierte Inhalt sollte sofort in der webpack-Dev-Server.

Die Fähigkeit, das JSON-Modell zu bearbeiten und die Auswirkungen auf eine Live-SPA zu sehen, kann Entwicklern dabei helfen, die JSON-Modell-API zu verstehen. Es ermöglicht auch die parallele Entwicklung von Frontend- und Backend-Anwendungen.

Stile mit Sass hinzufügen

Als Nächstes wird dem Projekt ein Stil hinzugefügt, der aktualisiert wird. Dieses Projekt wird Sass Unterstützung für einige nützliche Funktionen wie Variablen.

Öffnen Sie ein Terminal-Fenster und stoppen Sie die webpack-Dev-Server wenn gestartet. Von innen ui.frontend Ordner geben Sie den folgenden Befehl ein, um die Angular-App zur Verarbeitung zu aktualisieren .scss Dateien.
```
$ cd ui.frontend
$ ng config schematics.@schematics/angular:component.styleext scss
```
Dadurch wird die angular.json Datei mit einem neuen Eintrag am Ende der Datei:
```
"schematics": {
    "@schematics/angular:component": {
    "styleext": "scss"
    }
}
```
Installieren normalize-scss um die Stile über Browser hinweg zu normalisieren:
```
$ npm install normalize-scss --save
```
Kehren Sie zur IDE und unter zurück. ui.frontend/src Erstellen Sie einen neuen Ordner mit dem Namen styles.

Erstellen Sie eine neue Datei unter ui.frontend/src/styles benannt _variables.scss und fügen Sie die folgenden Variablen hinzu:

//_variables.scss

//== Colors
//
//## Gray and brand colors for use across theme.

$black:                  #202020;
$gray:                   #696969;
$gray-light:             #EBEBEB;
$gray-lighter:           #F7F7F7;
$white:                  #FFFFFF;
$yellow:                 #FFEA00;
$blue:                   #0045FF;


//== Typography
//
//## Font, line-height, and color for body text, headings, and more.

$font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-serif:       Georgia, "Times New Roman", Times, serif;
$font-family-base:        $font-family-sans-serif;
$font-size-base:          18px;

$line-height-base:        1.5;
$line-height-computed:    floor(($font-size-base * $line-height-base));

// Functional Colors
$brand-primary:             $yellow;
$body-bg:                   $white;
$text-color:                $black;
$text-color-inverse:        $gray-light;
$link-color:                $blue;

//Layout
$max-width: 1024px;
$header-height: 75px;

// Spacing
$gutter-padding: 12px;

Benennen Sie die Erweiterung der Datei erneut. styles.css at ui.frontend/src/styles.css nach styles.scss. Ersetzen Sie den Inhalt durch Folgendes:

/* styles.scss * /

/* Normalize */
@import '~normalize-scss/sass/normalize';

@import './styles/variables';

body {
    background-color: $body-bg;
    font-family: $font-family-base;
    margin: 0;
    padding: 0;
    font-size: $font-size-base;
    text-align: left;
    color: $text-color;
    line-height: $line-height-base;
}

body.page {
    max-width: $max-width;
    margin: 0 auto;
    padding: $gutter-padding;
    padding-top: $header-height;
}

Aktualisieren angular.json und alle Verweise auf style.css mit styles.scss. Es sollte 3 Verweise geben.
```
  "styles": [
-    "src/styles.css"
+    "src/styles.scss"
   ],
```

Header-Stile aktualisieren

Fügen Sie als Nächstes einige markenspezifische Stile zum Kopfzeile Komponente mit Sass.

Starten Sie die webpack-Dev-Server um die Stile zu sehen, die in Echtzeit aktualisiert werden:
```
$ npm run start:mock
```

under ui.frontend/src/app/components/header rename header.component.css nach header.component.scss. Füllen Sie die Datei mit folgendem Inhalt:

@import "~src/styles/variables";

.header {
    width: 100%;
    position: fixed;
    top: 0;
    left:0;
    z-index: 99;
    background-color: $brand-primary;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.24);
}

.header-container {
    display: flex;
    max-width: $max-width;
    margin: 0 auto;
    padding-left: $gutter-padding;
    padding-right: $gutter-padding;
}

.logo {
    z-index: 100;
    display: flex;
    padding-top: $gutter-padding;
    padding-bottom: $gutter-padding;
}

.logo-img {
    width: 100px;
}

Aktualisieren header.component.ts Verweis header.component.scss:

...
  @Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
-   styleUrls: ['./header.component.css']
+   styleUrls: ['./header.component.scss']
  })
...

Kehren Sie zum Browser zurück und webpack-Dev-Server:

Sie sollten nun die aktualisierten Stile sehen, die zum Kopfzeile -Komponente.

Bereitstellen SPA Updates für AEM

Die Änderungen an den Kopfzeile sind derzeit nur über die webpack-Dev-Server. Stellen Sie die aktualisierte SPA für AEM bereit, um die Änderungen anzuzeigen.

Stoppen Sie die webpack-Dev-Server.
Navigieren zum Stammverzeichnis des Projekts /aem-guides-wknd-spa und stellen Sie das Projekt mithilfe von Maven für AEM bereit:
```
$ cd ..
$ mvn clean install -PautoInstallSinglePackage
```
Navigieren Sie zu http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. Sie sollten die aktualisierte Kopfzeile mit angewendetem Logo und angewendeten Stilen:

Nachdem sich die aktualisierte SPA in AEM befindet, kann die Bearbeitung fortgesetzt werden.

Herzlichen Glückwunsch!

Herzlichen Glückwunsch, Sie haben die SPA aktualisiert und die Integration mit AEM untersucht! Sie kennen jetzt zwei verschiedene Ansätze zur Entwicklung des SPA mit der AEM JSON-Modell-API mit einer webpack-Dev-Server.

Sie können den fertigen Code immer in GitHub oder den Code lokal auszuchecken, indem Sie zu der Verzweigung wechseln Angular/integrate-spa-solution.

Nächste Schritte

Zuordnen SPA Komponenten zu AEM Komponenten - Erfahren Sie, wie Sie Angular-Komponenten Adobe Experience Manager-Komponenten (AEM) mit dem AEM SPA Editor JS SDK zuordnen. Die Komponentenzuordnung ermöglicht es Autoren, im AEM SPA Editor dynamische Aktualisierungen an SPA -Komponenten vorzunehmen, ähnlich wie beim herkömmlichen AEM.

Neue, verbesserte Suche

SPA integrieren

Ziel

Was Sie erstellen werden

Voraussetzungen

Code abrufen

Integrationsansatz

Inspect - SPA

Hinzufügen einer Kopfzeilenkomponente

Webpack Dev Server - Proxy der JSON-API

Webpack Dev Server - JSON-API nachahmen

Stile mit Sass hinzufügen

Header-Stile aktualisieren

Bereitstellen SPA Updates für AEM

Herzlichen Glückwunsch!

Nächste Schritte

Materialien auf adobe.com

Auf dieser Seite

Als Nächstes anzeigen:

Lernressourcen

Dokumentation

Community

Support

Ressourcen

Adobe-Konto

Adobe