Een SPA integreren integrate-spa

Download het beginpunt voor deze zelfstudie via Git:

$ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/integrate-spa-start

Implementeer de basis van de code op een lokale AEM met Maven:

$ mvn clean install -PautoInstallSinglePackage

Als het gebruiken van AEM 6.xhet classic profiel toevoegt:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

In winde van uw keus open omhoog het AEM Project voor de SPA WKND. Dit leerprogramma zal winde van de Code van Visual Studiogebruiken.

Vouw de map ui.frontend uit en inspecteer deze. Het bestand openen ui.frontend/package.json

Onder dependencies ziet u een aantal koppelingen die verwant zijn aan @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",

De ui.frontend module is een toepassing van de Angulardie door het Angular CLI hulpmiddelwordt geproduceerd te gebruiken dat het verpletteren omvat.

Er zijn ook drie afhankelijkheden voorafgegaan door @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",

De bovenstaande modules maken omhoog AEM de Redacteur JS SDK SPAen verstrekken de functionaliteit om het mogelijk te maken om SPA Componenten aan AEM Componenten in kaart te brengen.

In het package.json -bestand zijn verschillende scripts gedefinieerd:

"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"
}

Deze manuscripten zijn gebaseerd op gemeenschappelijke Angular CLI bevelenmaar lichtjes gewijzigd om met het grotere AEM project te werken.

start - voert de Angular-app lokaal uit met een lokale webserver. Deze is bijgewerkt om de inhoud van een lokale AEM-instantie te profileren.

build - compileert de Angular-app voor productiedistributie. De toevoeging van && clientlib is verantwoordelijk voor het kopiëren van de gecompileerde SPA naar de module ui.apps als een client-side bibliotheek tijdens een build. De npm module aem-clientlib-generatorwordt gebruikt om dit te vergemakkelijken.

Meer details over de beschikbare manuscripten kunnen hierworden gevonden.

Inspect het bestand ui.frontend/clientlib.config.js . Dit configuratiedossier wordt gebruikt door aem-clientlib-generatorom te bepalen hoe te om de cliëntbibliotheek te produceren.

Inspect het bestand ui.frontend/pom.xml . Dit dossier zet de ui.frontend omslag in a Gemaakt moduleom. Het pom.xml dossier is bijgewerkt om te gebruiken front-maven-pluginaan test en bouwt de SPA tijdens een Gemaakt bouwt.

Inspect het bestand app.component.ts op 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 is het ingangspunt van de SPA. ModelManager wordt geleverd door de AEM SPA Editor JS SDK. Het is verantwoordelijk voor het aanroepen en injecteren van pageModel (de JSON-inhoud) in de toepassing.

Open een nieuw terminalvenster en navigeer naar de map ui.frontend :

$ cd aem-guides-wknd-spa/ui.frontend

Installeer Angular CLIglobaal dit wordt gebruikt om de componenten van de Angular te produceren evenals de toepassing van de Angular via het ng bevel te bouwen en te dienen.

$ npm install -g @angular/cli

Maak een nieuwe Header -component door de Angular CLI ng generate component -opdracht uit te voeren vanuit de map ui.frontend .

$ 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)

Hierdoor wordt een skelet voor de nieuwe Angular Header-component in ui.frontend/src/app/components/header gemaakt.

Open het aem-guides-wknd-spa project in winde van uw keus. Navigeer naar de map ui.frontend/src/app/components/header .

Open het bestand header.component.html en vervang de inhoud door:

<!--/* header.component.html */-->
<header className="header">
    <div className="header-container">
        <h1>WKND</h1>
    </div>
</header>

Let op: dit geeft statische inhoud weer, dus voor deze component Angular is geen aanpassing van de gegenereerde standaard vereist header.component.ts .

Open het dossier app.component.html bij ui.frontend/src/app/app.component.html. Voeg de lus app-header toe:

<app-header></app-header>
<router-outlet></router-outlet>

Dit omvat de component header boven alle pagina-inhoud.

Open een nieuwe terminal, navigeer naar de map ui.frontend en voer de opdracht npm run build uit:

$ cd ui.frontend
$ npm run build

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

Navigeer naar de map ui.apps . Onder ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/clientlibs/clientlib-angular zou u moeten zien de gecompileerde SPA dossiers van de ui.frontend/build omslag zijn gekopieerd.

wordt geproduceerd

Ga terug naar de terminal en navigeer naar de map ui.apps . Voer het volgende Geweven bevel uit:

$ 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] ------------------------------------------------------------------------

Hiermee wordt het ui.apps -pakket geïmplementeerd in een lokale actieve instantie van AEM.

Open een browser lusje en navigeer aan http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. De inhoud van de component Header die in de SPA wordt weergegeven, wordt nu weergegeven.

Terugkeer aan winde en open het dossier proxy.conf.json bij ui.frontend/proxy.conf.json.

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

De Angular appverstrekt een gemakkelijk mechanisme aan volmacht API verzoeken. De patronen die in context worden opgegeven, worden beschreven via localhost:4502 , de lokale AEM quickstart.

Open het dossier index.html bij ui.frontend/src/index.html. Dit is het basisbestand voor HTML dat door de ontwikkelserver wordt gebruikt.

Er is een vermelding voor base href="/" . De basismarkeringis kritiek voor app om relatieve URLs op te lossen.

<base href="/">

Open een terminalvenster en navigeer naar de map ui.frontend . Voer de opdracht npm start uit:

$ 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

Open een nieuw browser lusje (als niet reeds geopend) en navigeer aan http://localhost:4200/content/wknd-spa-angular/us/en/home.html.

U moet dezelfde inhoud zien als in AEM, maar zonder dat een van de ontwerpmogelijkheden is ingeschakeld.

Keer terug naar winde en creeer een nieuwe omslag genoemd img bij ui.frontend/src/assets.

Download en voeg het volgende WKND-logo toe aan de map img :

Open header.component.html bij ui.frontend/src/app/components/header/header.component.html en omvat het embleem:

<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>

Sparen de veranderingen in header.component.html.

Ga terug naar de browser. De wijzigingen in de app worden meteen weerspiegeld.

wordt toegevoegd

U kunt inhoudsupdates in AEM blijven maken en hen zien die in webpack dev server worden weerspiegeld, aangezien wij de inhoud proxying. Merk op dat de inhoudsveranderingen slechts zichtbaar in webpack dev server zijn.

Stop de lokale webserver met ctrl+c in de terminal.

In browser navigeer aan http://localhost:4502/content/wknd-spa-angular/us/en.model.json.

Dit is de JSON die wordt geëxporteerd door AEM die de toepassing stuurt. Kopieer de JSON-uitvoer.

Terugkeer aan winde navigeert aan ui.frontend/src en voegt nieuwe omslagen genoemd mocks en json toe om de volgende omslagstructuur aan te passen:

|-- ui.frontend
    |-- src
        |-- mocks
            |-- json

Creeer een nieuw dossier genoemd en.model.json hieronder ui.frontend/public/mocks/json. Plak de output JSON van Stap 1 hier.

Creeer een nieuw dossier proxy.mock.conf.json onder ui.frontend. Vul het bestand met het volgende:

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

Deze proxyconfiguratie herschrijft aanvragen die beginnen met /content/wknd-spa-angular/us met /mocks/json en die het overeenkomstige statische JSON-bestand leveren, bijvoorbeeld:

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

Open het dossier angular.json. Voeg een nieuwe dev configuratie met een bijgewerkte activa serie toe om de gemaakte mocks omslag van verwijzingen te voorzien.

 "dev": {
          "assets": [
            "src/mocks",
            "src/assets",
            "src/favicon.ico",
            "src/logo192.png",
            "src/logo512.png",
            "src/manifest.json"
          ]
    },

Creërend een specifieke dev configuratie zorgt ervoor dat de mocks omslag slechts tijdens ontwikkeling wordt gebruikt en nooit aan AEM in een productie wordt opgesteld.

In het {dossier 0} angular.json, werk volgende de browserTarget configuratie bij om de nieuwe te gebruiken dev configuratie:

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

Open het dossier ui.frontend/package.json en voeg een nieuw begin toe:mock bevel om het {dossier 3} proxy.mock.conf.json van verwijzingen te voorzien.

    "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"
    }

Door een nieuwe opdracht toe te voegen, kunt u gemakkelijk schakelen tussen de proxyconfiguraties.

Als momenteel lopend, stop webpack dev server. Begin webpack dev server gebruikend het begin:mock manuscript:

$ 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

Navigeer aan http://localhost:4200/content/wknd-spa-angular/us/en/home.htmlen u zou het zelfde SPA moeten zien maar de inhoud wordt nu getrokken uit het mock JSON- dossier.

Maak een kleine verandering in het {vroeger gecreeerd dossier 0} en.model.json. De bijgewerkte inhoud zou onmiddellijk in de webpack dev server moeten worden weerspiegeld.

Als u het JSON-model kunt manipuleren en de effecten op een live SPA kunt bekijken, kan een ontwikkelaar de JSON-model-API beter begrijpen. Het maakt ook zowel front-end als back-end ontwikkeling parallel mogelijk.

Open een eindvenster en stop webpack dev server als begonnen. Voer vanuit de ui.frontend -map de volgende opdracht in om de Angular-app bij te werken naar procesbestanden .scss .

$ cd ui.frontend
$ ng config schematics.@schematics/angular:component.styleext scss

Hiermee werkt u het angular.json -bestand bij met een nieuwe vermelding onder aan het bestand:

"schematics": {
    "@schematics/angular:component": {
    "styleext": "scss"
    }
}

Installeer normalize-scss om de stijlen in verschillende browsers te normaliseren:

$ npm install normalize-scss --save

Ga terug naar de IDE en maak onder ui.frontend/src een nieuwe map met de naam styles .

Maak een nieuw bestand onder ui.frontend/src/styles genaamd _variables.scss en vult het met de volgende variabelen:

//_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;

Wijzig de uitbreiding van het dossier styles.css bij ui.frontend/src/styles.css aan styles.scss. Vervang de inhoud door het volgende:

/* 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;
}

Werk angular.json bij en hernoem alle verwijzingen naar style.css met styles.scss. Er moeten drie verwijzingen zijn.

  "styles": [
-    "src/styles.css"
+    "src/styles.scss"
   ],

Begin webpack dev server om de stijlen te zien die in real time bijwerken:

$ npm run start:mock

Onder ui.frontend/src/app/components/header re-name header.component.css aan header.component.scss. Vul het bestand met het volgende:

@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;
}

Update header.component.ts aan verwijzing header.component.scss:

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

Terugkeer aan browser en webpack dev server:

U zou de bijgewerkte stijlen nu moeten zien die aan de worden toegevoegd van de Kopbal component.

Stop de webpack dev server.

Navigeer naar de hoofdmap van het project /aem-guides-wknd-spa en implementeer het project om het te AEM met Maven:

$ cd ..
$ mvn clean install -PautoInstallSinglePackage

Navigeer aan http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html. U zou de bijgewerkte Kopbal met toegepast embleem en stijlen moeten zien:

Nu de bijgewerkte SPA in AEM is, kan het ontwerpen worden voortgezet.