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 codebasis naar een lokale AEM-instantie met Maven:

$ mvn clean install -PautoInstallSinglePackage

Als het gebruiken van ​ AEM 6.x ​ voeg het classic profiel toe:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

In winde van uw keus open omhoog het Project van AEM voor het KND SPA. Dit leerprogramma zal ​ winde van de Code van Visual Studio ​ gebruiken.

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 Angular ​ die door het ​ CLI hulpmiddel van Angular te gebruiken ​ wordt 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 SPA ​ en 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 bevelen ​ maar 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-generator ​ wordt gebruikt om dit te vergemakkelijken.

Meer details over de beschikbare manuscripten kunnen ​ hier ​ worden gevonden.

Controleer het bestand ui.frontend/clientlib.config.js . Dit configuratiedossier wordt gebruikt door ​ aem-clientlib-generator ​ om 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 module ​ om. Het pom.xml dossier is bijgewerkt om ​ te gebruiken front-maven-plugin ​ aan 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 Angular ​ globaal 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

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 Angular ​ verstrekt 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 ​ basismarkering ​ is 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.html ​ en 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.

Stop de webpack dev server.

Navigeer naar de hoofdmap van het project /aem-guides-wknd-spa en implementeer het project in 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 het bijgewerkte KUUROORD in AEM is, kan het ontwerpen verdergaan.