Een SPA integreren

In winde van uw keus open omhoog het Project van AEM voor het KND SPA. 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 Angulardie door het CLI hulpmiddel van Angular te gebruikenwordt geproduceerd die 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 bovengenoemde modules maken omhoog de Redacteur JS SDK van AEM SPAen verstrekken de functionaliteit om het mogelijk te maken om de Componenten van het KUUROORD aan de Componenten van AEM 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 project van AEM te werken.

start - voert de Angular-toepassing 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 de oorzaak van het kopiëren van gecompileerde SPA in de ui.apps module als cliënt-zijbibliotheek tijdens een bouwstijl. De npm module aem-clientlib-generatorwordt gebruikt om dit te vergemakkelijken.

Meer details over de beschikbare manuscripten kunnen hierworden gevonden.

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

Controleer 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 het KUUROORD tijdens een Gemaakt bouwt.

Inspecteer 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 het KUUROORD. 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 CLI van Angularglobaal dit wordt gebruikt om de componenten van Angular te produceren evenals de toepassing van Angular via het ng bevel te bouwen en te dienen.

$ npm install -g @angular/cli

CAUTION

De versie van @angular/cli die door dit project wordt gebruikt is 9.1.7. Het wordt aanbevolen de Angular CLI-versies synchroon te houden.

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)

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

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>

Op deze manier wordt statische inhoud weergegeven. Voor deze Angular-component is dus 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 de gecompileerde dossiers van het KUUROORD van de ui.frontend/build omslag moeten zien 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. U zou nu de inhoud van de Header component moeten zien die in SPA wordt getoond.

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 app van Angularverstrekt een gemakkelijk mechanisme aan volmacht API verzoeken. De patronen die u opgeeft in context , worden beschreven in localhost:4502 , de lokale AEM quickstart.

Open het dossier index.html bij ui.frontend/src/index.html. Dit is het basisbestand van HTML dat door de Dev-server 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.

Dezelfde inhoud moet worden weergegeven 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 door AEM wordt geëxporteerd en 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 bouwt.

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 KUUROORD 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 zien, 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-toepassing bij te werken naar .scss -bestanden.

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