Navigatie en routering toevoegen navigation-routing
Leer hoe meerdere weergaven in de SPA worden ondersteund met AEM Pagina's en de SPA Editor SDK. Dynamische navigatie wordt uitgevoerd gebruikend de routes van de Angular en toegevoegd aan een bestaande component van de Kopbal.
Doelstelling
- Begrijp het SPA model verpletterend opties beschikbaar wanneer het gebruiken van de SPARedacteur.
- Leer om Angular te gebruiken dieverplettert om tussen verschillende meningen van de SPA te navigeren.
- Voer een dynamische navigatie uit die door de AEM paginahiërarchie wordt aangedreven.
Wat u gaat maken
In dit hoofdstuk wordt een navigatiemenu toegevoegd aan een bestaande Header
-component. Het navigatiemenu wordt gedreven door de AEM paginahiërarchie en gebruikt het model JSON dat door de Component van de Kern van de Navigatiewordt verstrekt.
Vereisten
Herzie het vereiste tooling en de instructies voor vestiging a lokale ontwikkelomgeving.
De code ophalen
-
Download het beginpunt voor deze zelfstudie via Git:
code language-shell $ git clone git@github.com:adobe/aem-guides-wknd-spa.git $ cd aem-guides-wknd-spa $ git checkout Angular/navigation-routing-start
-
Implementeer de basis van de code op een lokale AEM met Maven:
code language-shell $ mvn clean install -PautoInstallSinglePackage
Als het gebruiken van AEM 6.xhet
classic
profiel toevoegt:code language-shell $ mvn clean install -PautoInstallSinglePackage -Pclassic
-
Installeer het gebeëindigde pakket voor de traditionele WKND verwijzingsplaats. De beelden die door worden verstrekt WKND verwijzingsplaatsworden opnieuw gebruikt op de SPA WKND. Het pakket kan worden geïnstalleerd gebruikend AEM de Manager van het Pakket.
U kunt de gebeëindigde code op GitHubaltijd bekijken of de code uit controleren plaatselijk door aan de tak Angular/navigation-routing-solution
te schakelen.
Inspect HeaderComponent-updates inspect-header
In vorige hoofdstukken is de component HeaderComponent
toegevoegd als een zuivere Angular die via app.component.html
is opgenomen. In dit hoofdstuk, wordt de HeaderComponent
component verwijderd uit app en via de Redacteur van het Malplaatjetoegevoegd. Hierdoor kunnen gebruikers het navigatiemenu van de HeaderComponent
vanuit AEM configureren.
-
In winde van uw keus opent het SPA starterproject voor dit hoofdstuk.
-
Onder de module
ui.frontend
inspecteert u het bestandheader.component.ts
at:ui.frontend/src/app/components/header/header.component.ts
.Er zijn verschillende updates uitgevoerd, waaronder de toevoeging van een
HeaderEditConfig
- en eenMapTo
-element om de component in staat te stellen aan een AEM component te worden toegewezenwknd-spa-angular/components/header
.code language-js /* header.component.ts */ ... const HeaderEditConfig = { ... }; @Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.scss'] }) export class HeaderComponent implements OnInit { @Input() items: object[]; ... } ... MapTo('wknd-spa-angular/components/header')(withRouter(Header), HeaderEditConfig);
Noteer de
@Input()
-annotatie vooritems
.items
bevat een array van navigatieobjecten die vanuit AEM worden doorgegeven. -
Controleer in de module
ui.apps
de componentdefinitie van de AEMHeader
component:ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/header/.content.xml
code language-xml <?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:Component" jcr:title="Header" sling:resourceSuperType="wknd-spa-angular/components/navigation" componentGroup="WKND SPA Angular - Structure"/>
De AEM
Header
component zal alle functionaliteit van de Component van de Kern van de Navigatievia hetsling:resourceSuperType
bezit erven.
Voeg de component HeaderComponent aan het SPA toe malplaatje add-header-template
-
Open browser en login aan AEM, http://localhost:4502/. De begincodebasis zou reeds moeten worden opgesteld.
-
Navigeer aan SPA Page Template: http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-page-template/structure.html.
-
Selecteer de buitenste Root Layout Container en klik op het pictogram Policy ervan. Wees voorzichtig niet om Layout Container niet-gesloten voor creatie te selecteren.
-
Kopieer het huidige beleid en maak een nieuw beleid met de naam SPA Structure :
Selecteer onder Allowed Components > General > de component Layout Container .
Onder Allowed Components > WKND SPA ANGULAR - STRUCTURE > selecteert u de component Header :
Selecteer onder Allowed Components > WKND SPA ANGULAR - Content de componenten Image en Text . Er moeten in totaal vier componenten zijn geselecteerd.
Klik op Done om de wijzigingen op te slaan.
-
verfrist zich de pagina. Voeg de component Header toe boven de niet-vergrendelde Layout Container :
toe
-
Selecteer de Header component en klik zijn 2} pictogram van het Beleid {om het beleid uit te geven.
-
Creeer een nieuw beleid met a Policy Title van "WKND SPA Kopbal".
Onder de Properties :
- Stel de waarde Navigation Root in op
/content/wknd-spa-angular/us/en
. - Plaats Exclude Root Levels aan 1.
- Schakel Collect al child pages uit.
- Plaats Navigation Structure Depth aan 3.
Hierdoor worden de navigatieniveaus 2 diep onder
/content/wknd-spa-angular/us/en
verzameld. - Stel de waarde Navigation Root in op
-
Nadat u de wijzigingen hebt opgeslagen, ziet u de gevulde
Header
als onderdeel van de sjabloon:
Onderliggende pagina's maken
Maak vervolgens aanvullende pagina's in AEM die als de verschillende weergaven in de SPA dienen. We zullen ook de hiërarchische structuur van het JSON-model dat door AEM wordt aangeboden, controleren.
-
Navigeer aan de console van Plaatsen: http://localhost:4502/sites.html/content/wknd-spa-angular/us/en/home. Selecteer de WebND SPA de Homepage van de Angular en klik Create > Page:
-
Onder Template selecteert u SPA Page . Onder Properties ga "Pagina 1" voor Title in en "pagina-1" als naam.
in
Klik op Create en klik in het dialoogvenster op Open om de pagina te openen in de AEM SPA Editor.
-
Voeg een nieuwe component Text toe aan de hoofdmap Layout Container . Bewerk de component en ga de tekst in: "Pagina 1" gebruikend RTE en het H1 element (u zult volledig-schermwijze moeten ingaan om de paragraafelementen te veranderen)
Voel u vrij om extra inhoud toe te voegen, zoals een afbeelding.
-
Terugkeer aan de console van AEM Sites en herhaal de bovengenoemde stappen, die tot een tweede pagina leiden genoemd "Pagina 2" als sibling van Pagina 1. Voeg inhoud aan Pagina 2 toe zodat het gemakkelijk wordt geïdentificeerd.
-
Tot slot creeer een derde pagina, "Pagina 3" maar als a kind van Pagina 2. Na voltooiing zou de plaatshiërarchie als het volgende moeten kijken:
-
In een nieuw lusje, open JSON model API die door AEM wordt verstrekt: http://localhost:4502/content/wknd-spa-angular/us/en.model.json. Deze JSON-inhoud wordt opgevraagd wanneer de SPA voor het eerst wordt geladen. De buitenste structuur ziet er als volgt uit:
code language-json { "language": "en", "title": "en", "templateName": "spa-app-template", "designPath": "/libs/settings/wcm/designs/default", "cssClassNames": "spa page basicpage", ":type": "wknd-spa-angular/components/spa", ":items": {}, ":itemsOrder": [], ":hierarchyType": "page", ":path": "/content/wknd-spa-angular/us/en", ":children": { "/content/wknd-spa-angular/us/en/home": {}, "/content/wknd-spa-angular/us/en/home/page-1": {}, "/content/wknd-spa-angular/us/en/home/page-2": {}, "/content/wknd-spa-angular/us/en/home/page-2/page-3": {} } }
Onder
:children
ziet u een item voor elk van de gemaakte pagina's. De inhoud voor alle pagina's staat in dit eerste JSON-verzoek. Zodra, wordt het navigatie verpletteren uitgevoerd, worden de verdere meningen van de SPA geladen snel, aangezien de inhoud reeds beschikbare cliënt-kant is.Het is niet wijs om ALLES van de inhoud van een SPA in het aanvankelijke JSON- verzoek te laden, aangezien dit de aanvankelijke paginading zou vertragen. Vervolgens kunt u bekijken hoe de hiërarchische diepte van pagina's wordt verzameld.
-
Navigeer aan het SPA van de Wortel malplaatje bij: http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-app-template/structure.html.
Klik op Page properties menu > Page Policy :
-
Het SPA 1} malplaatje van de Wortel {heeft een extra Hierarchical Structure lusje om de verzamelde inhoud te controleren JSON. Structure Depth bepaalt hoe diep in de plaatshiërarchie om kindpagina's onder de wortel te verzamelen. U kunt het veld Structure Patterns ook gebruiken om extra pagina's op basis van een reguliere expressie eruit te filteren.
Werk Structure Depth aan "2" bij:
Klik op Done om de wijzigingen in het beleid op te slaan.
-
Open het model JSON http://localhost:4502/content/wknd-spa-angular/us/en.model.jsonopnieuw.
code language-json { "language": "en", "title": "en", "templateName": "spa-app-template", "designPath": "/libs/settings/wcm/designs/default", "cssClassNames": "spa page basicpage", ":type": "wknd-spa-angular/components/spa", ":items": {}, ":itemsOrder": [], ":hierarchyType": "page", ":path": "/content/wknd-spa-angular/us/en", ":children": { "/content/wknd-spa-angular/us/en/home": {}, "/content/wknd-spa-angular/us/en/home/page-1": {}, "/content/wknd-spa-angular/us/en/home/page-2": {} } }
Bericht dat Pagina 3 weg is verwijderd:
/content/wknd-spa-angular/us/en/home/page-2/page-3
van het aanvankelijke model JSON.Later zullen we zien hoe de AEM SPA Editor SDK dynamisch aanvullende inhoud kan laden.
Navigatie implementeren
Implementeer vervolgens het navigatiemenu met een nieuwe NavigationComponent
. U kunt de code rechtstreeks in header.component.html
toevoegen, maar u kunt grote componenten beter voorkomen. In plaats daarvan implementeert u een NavigationComponent
-bestand dat later opnieuw kan worden gebruikt.
-
Herzie JSON die door de AEM
Header
component in wordt blootgesteld http://localhost:4502/content/wknd-spa-angular/us/en.model.json:code language-json ... "header": { "items": [ { "level": 0, "active": true, "path": "/content/wknd-spa-angular/us/en/home", "description": null, "url": "/content/wknd-spa-angular/us/en/home.html", "lastModified": 1589062597083, "title": "WKND SPA Angular Home Page", "children": [ { "children": [], "level": 1, "active": false, "path": "/content/wknd-spa-angular/us/en/home/page-1", "description": null, "url": "/content/wknd-spa-angular/us/en/home/page-1.html", "lastModified": 1589429385100, "title": "Page 1" }, { "level": 1, "active": true, "path": "/content/wknd-spa-angular/us/en/home/page-2", "description": null, "url": "/content/wknd-spa-angular/us/en/home/page-2.html", "lastModified": 1589429603507, "title": "Page 2", "children": [ { "children": [], "level": 2, "active": false, "path": "/content/wknd-spa-angular/us/en/home/page-2/page-3", "description": null, "url": "/content/wknd-spa-angular/us/en/home/page-2/page-3.html", "lastModified": 1589430413831, "title": "Page 3" } ], } ] } ], ":type": "wknd-spa-angular/components/header"
De hiërarchische aard van de AEM pagina's wordt gemodelleerd in JSON die kan worden gebruikt om een navigatiemenu te bevolken. Rappel dat de
Header
component alle functionaliteit van de Component van de Kern van de Navigatieerft en de inhoud die door JSON wordt blootgesteld wordt automatisch in kaart gebracht aan de Angular@Input
annotation. -
Open een nieuw terminalvenster en navigeer naar de map
ui.frontend
van het SPA project. Maak een nieuweNavigationComponent
met het CLI-gereedschap Angular:code language-shell $ cd ui.frontend $ ng generate component components/navigation CREATE src/app/components/navigation/navigation.component.scss (0 bytes) CREATE src/app/components/navigation/navigation.component.html (25 bytes) CREATE src/app/components/navigation/navigation.component.spec.ts (656 bytes) CREATE src/app/components/navigation/navigation.component.ts (286 bytes) UPDATE src/app/app.module.ts (2032 bytes)
-
Maak vervolgens een klasse met de naam
NavigationLink
met de Angular-CLI in de nieuwe mapcomponents/navigation
:code language-shell $ cd src/app/components/navigation/ $ ng generate class NavigationLink CREATE src/app/components/navigation/navigation-link.spec.ts (187 bytes) CREATE src/app/components/navigation/navigation-link.ts (32 bytes)
-
Ga terug naar de IDE van uw keuze en open het bestand op
navigation-link.ts
om/src/app/components/navigation/navigation-link.ts
. -
Vul
navigation-link.ts
met het volgende:code language-js export class NavigationLink { title: string; path: string; url: string; level: number; children: NavigationLink[]; active: boolean; constructor(data) { this.path = data.path; this.title = data.title; this.url = data.url; this.level = data.level; this.active = data.active; this.children = data.children.map( item => { return new NavigationLink(item); }); } }
Dit is een eenvoudige klasse die een afzonderlijke navigatiekoppeling vertegenwoordigt. In de klasseconstructor verwachten we dat
data
het JSON-object is dat vanuit AEM wordt doorgegeven. Deze klasse wordt gebruikt binnen zowelNavigationComponent
alsHeaderComponent
om de navigatiestructuur gemakkelijk te vullen.Er wordt geen gegevenstransformatie uitgevoerd. Deze klasse wordt vooral gemaakt om het JSON-model sterk te typen.
this.children
wordt getypt alsNavigationLink[]
en de constructor maakt recursief nieuweNavigationLink
-objecten voor elk item in dechildren
-array. Het JSON-model voor deHeader
is hiërarchisch. -
Open het bestand
navigation-link.spec.ts
. Dit is het testbestand voor de klasseNavigationLink
. Werk het bij met het volgende:code language-js import { NavigationLink } from './navigation-link'; describe('NavigationLink', () => { it('should create an instance', () => { const data = { children: [], level: 1, active: false, path: '/content/wknd-spa-angular/us/en/home/page-1', description: null, url: '/content/wknd-spa-angular/us/en/home/page-1.html', lastModified: 1589429385100, title: 'Page 1' }; expect(new NavigationLink(data)).toBeTruthy(); }); });
const data
volgt hetzelfde JSON-model dat eerder is geïnspecteerd voor één koppeling. Dit is verre van een robuuste eenheidstest, nochtans zou het moeten volstaan om de aannemer vanNavigationLink
te testen. -
Open het bestand
navigation.component.ts
. Werk het bij met het volgende:code language-js import { Component, OnInit, Input } from '@angular/core'; import { NavigationLink } from './navigation-link'; @Component({ selector: 'app-navigation', templateUrl: './navigation.component.html', styleUrls: ['./navigation.component.scss'] }) export class NavigationComponent implements OnInit { @Input() items: object[]; constructor() { } get navigationLinks(): NavigationLink[] { if (this.items && this.items.length > 0) { return this.items.map(item => { return new NavigationLink(item); }); } return null; } ngOnInit() {} }
NavigationComponent
verwacht van AEM eenobject[]
nameditems
die het JSON-model is. Deze klasse maakt één methodeget navigationLinks()
beschikbaar die een array vanNavigationLink
-objecten retourneert. -
Open het bestand
navigation.component.html
en werk het bij met het volgende:code language-html <ul *ngIf="navigationLinks && navigationLinks.length > 0" class="navigation__group"> <ng-container *ngTemplateOutlet="recursiveListTmpl; context:{ links: navigationLinks }"></ng-container> </ul>
Hiermee wordt een eerste
<ul>
gegenereerd en wordt de methodeget navigationLinks()
vannavigation.component.ts
aangeroepen. Een<ng-container>
wordt gebruikt om een aanroep te maken naar een sjabloon met de naamrecursiveListTmpl
en geeft dezenavigationLinks
door als een variabele met de naamlinks
.Voeg de volgende
recursiveListTmpl
toe:code language-html <ng-template #recursiveListTmpl let-links="links"> <li *ngFor="let link of links" class="{{'navigation__item navigation__item--' + link.level}}"> <a [routerLink]="link.url" class="navigation__item-link" [title]="link.title" [attr.aria-current]="link.active"> {{link.title}} </a> <ul *ngIf="link.children && link.children.length > 0"> <ng-container *ngTemplateOutlet="recursiveListTmpl; context:{ links: link.children }"></ng-container> </ul> </li> </ng-template>
Hier wordt de rest van de rendering voor de navigatiekoppeling geïmplementeerd. De variabele
link
is van het typeNavigationLink
en alle methoden/eigenschappen die door die klasse worden gemaakt, zijn beschikbaar.[routerLink]
wordt gebruikt in plaats van normaalhref
attribuut. Hierdoor kunnen we koppelingen maken naar specifieke routes in de app, zonder dat de volledige pagina wordt vernieuwd.Het recursieve gedeelte van de navigatie wordt ook geïmplementeerd door een andere
<ul>
te maken als de huidigelink
een niet-legechildren
array heeft. -
Werk
navigation.component.spec.ts
bij om ondersteuning toe te voegen voorRouterTestingModule
:code language-diff ... + import { RouterTestingModule } from '@angular/router/testing'; ... beforeEach(async(() => { TestBed.configureTestingModule({ + imports: [ RouterTestingModule ], declarations: [ NavigationComponent ] }) .compileComponents(); })); ...
RouterTestingModule
moet worden toegevoegd omdat de component[routerLink]
gebruikt. -
Werk
navigation.component.scss
bij om enkele basisstijlen toe te voegen aan deNavigationComponent
:
@import "~src/styles/variables";
$link-color: $black;
$link-hover-color: $white;
$link-background: $black;
:host-context {
display: block;
width: 100%;
}
.navigation__item {
list-style: none;
}
.navigation__item-link {
color: $link-color;
font-size: $font-size-large;
text-transform: uppercase;
padding: $gutter-padding;
display: flex;
border-bottom: 1px solid $gray;
&:hover {
background: $link-background;
color: $link-hover-color;
}
}
De koptekstcomponent bijwerken
Nu NavigationComponent
is geïmplementeerd, moet HeaderComponent
worden bijgewerkt om ernaar te verwijzen.
-
Open een terminal en navigeer naar de map
ui.frontend
in het SPA project. Begin de webpack dev server:code language-shell $ npm start
-
Open een browser lusje en navigeer aan http://localhost:4200/.
De webpack dev server zou aan volmacht het model JSON van een lokale instantie van AEM (
ui.frontend/proxy.conf.json
) moeten worden gevormd. Op deze manier kunnen we rechtstreeks code toevoegen aan de inhoud die in AEM van eerder in de zelfstudie is gemaakt.Op dit moment is de menuschakelfunctionaliteit van
HeaderComponent
al geïmplementeerd. Voeg vervolgens de navigatiecomponent toe. -
Ga terug naar de IDE van uw keuze en open het bestand
header.component.ts
opui.frontend/src/app/components/header/header.component.ts
. -
Werk de methode
setHomePage()
bij om de hard-gecodeerde Koord te verwijderen en de dynamische die steunen te gebruiken door de AEM worden overgegaan component:code language-js /* header.component.ts */ import { NavigationLink } from '../navigation/navigation-link'; ... setHomePage() { if (this.hasNavigation) { const rootNavigationLink: NavigationLink = new NavigationLink(this.items[0]); this.isHome = rootNavigationLink.path === this.route.snapshot.data.path; this.homePageUrl = rootNavigationLink.url; } } ...
Er wordt een nieuwe instantie van
NavigationLink
gemaakt op basis vanitems[0]
, de basis van het JSON-navigatiemodel dat vanuit AEM wordt doorgegeven.this.route.snapshot.data.path
keert de weg van de huidige route van de Angular terug. Deze waarde wordt gebruikt om te bepalen als de huidige route de Pagina van het Huis is.this.homePageUrl
wordt gebruikt om de ankerverbinding op het embleem te bevolken. -
Open
header.component.html
en vervang de statische plaatsaanduiding voor de navigatie door een verwijzing naar het zojuist gemaakte objectNavigationComponent
:code language-diff <div class="header-navigation"> <div class="navigation"> - Navigation Placeholder + <app-navigation [items]="items"></app-navigation> </div> </div>
[items]=items
geeft het kenmerk@Input() items
from theHeaderComponent
door aan deNavigationComponent
locatie waar de navigatie wordt opgebouwd. -
Open
header.component.spec.ts
en voeg een declaratie toe voorNavigationComponent
:code language-diff /* header.component.spect.ts */ + import { NavigationComponent } from '../navigation/navigation.component'; describe('HeaderComponent', () => { let component: HeaderComponent; let fixture: ComponentFixture<HeaderComponent>; beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ RouterTestingModule ], + declarations: [ HeaderComponent, NavigationComponent ] }) .compileComponents(); }));
Aangezien
NavigationComponent
nu als deel vanHeaderComponent
wordt gebruikt moet het als deel van de testbed worden verklaard. -
Sparen veranderingen in om het even welke open dossiers en terugkeer aan de webpack dev server: http://localhost:4200/
Open de navigatie door de menuknevel te klikken en u zou de bevolkte navigatiekoppelingen moeten zien. U zou aan verschillende meningen van de SPA moeten kunnen navigeren.
Begrijp het SPA verpletteren
Nu de navigatie is uitgevoerd, inspecteer het verpletteren in AEM.
-
Open het bestand
app-routing.module.ts
atui.frontend/src/app
in de IDE.code language-js /* app-routing.module.ts */ import { AemPageDataResolver, AemPageRouteReuseStrategy } from '@adobe/cq-angular-editable-components'; import { NgModule } from '@angular/core'; import { RouteReuseStrategy, RouterModule, Routes, UrlMatchResult, UrlSegment } from '@angular/router'; import { PageComponent } from './components/page/page.component'; export function AemPageMatcher(url: UrlSegment[]): UrlMatchResult { if (url.length) { return { consumed: url, posParams: { path: url[url.length - 1] } }; } } const routes: Routes = [ { matcher: AemPageMatcher, component: PageComponent, resolve: { path: AemPageDataResolver } } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule], providers: [ AemPageDataResolver, { provide: RouteReuseStrategy, useClass: AemPageRouteReuseStrategy } ] }) export class AppRoutingModule {}
De array
routes: Routes = [];
definieert de routes of navigatiepaden naar componenttoewijzingen voor Angulars.AemPageMatcher
is een router van de douaneAngular UrlMatcher, die om het even wat aanpast dat "als"een pagina in AEM kijkt die deel van deze toepassing van Angular uitmaakt.PageComponent
is de Component van de Angular die een Pagina in AEM vertegenwoordigt, en gebruikt om de aangepaste routes terug te geven.PageComponent
wordt later in de zelfstudie gereviseerd.AemPageDataResolver
, die door de AEM SPA Redacteur JS SDK wordt verstrekt, is een douane Resolver van de Router van de Angularwordt gebruikt om route URL om te zetten, die de weg in AEM met inbegrip van de uitbreiding .html, aan de middelweg in AEM is, die de paginappad minus de uitbreiding is.De
AemPageDataResolver
transformeert bijvoorbeeld de URL van een route vancontent/wknd-spa-angular/us/en/home.html
naar een pad van/content/wknd-spa-angular/us/en/home
. Hiermee wordt de inhoud van de pagina opgelost op basis van het pad in de JSON-model-API.AemPageRouteReuseStrategy
, die door de AEM SPA Redacteur JS SDK wordt verstrekt, is een douane RouteReuseStrategydie hergebruik vanPageComponent
over routes verhindert. Anders wordt de inhoud van pagina "A" mogelijk weergegeven wanneer u naar pagina "B" navigeert. -
Open het bestand
page.component.ts
omui.frontend/src/app/components/page/
.code language-js ... export class PageComponent { items; itemsOrder; path; constructor( private route: ActivatedRoute, private modelManagerService: ModelManagerService ) { this.modelManagerService .getData({ path: this.route.snapshot.data.path }) .then(data => { this.path = data[Constants.PATH_PROP]; this.items = data[Constants.ITEMS_PROP]; this.itemsOrder = data[Constants.ITEMS_ORDER_PROP]; }); } }
PageComponent
wordt vereist om JSON te verwerken die van AEM wordt teruggewonnen en als component van de Angular wordt gebruikt om de routes terug te geven.ActivatedRoute
, dat door de module van de Router van de Angular wordt verstrekt, bevat de staat erop wijst die welke inhoud JSON van AEM Pagina in deze de componenteninstantie van de Pagina van de Angular zou moeten worden geladen.ModelManagerService
, haalt de JSON-gegevens op basis van de route op en wijst de gegevens toe aan klassevariabelenpath
,items
itemsOrder
. Deze zullen dan tot AEMPageComponentworden overgegaan -
Open het bestand
page.component.html
opui.frontend/src/app/components/page/
code language-html <aem-page class="structure-page" [attr.data-cq-page-path]="path" [cqPath]="path" [cqItems]="items" [cqItemsOrder]="itemsOrder"> </aem-page>
aem-page
omvat AEMPageComponent. De variabelenpath
,items
enitemsOrder
worden doorgegeven aanAEMPageComponent
.AemPageComponent
, dat via de SPARedacteur JavaScript SDK wordt verstrekt zal dan over dit gegeven herhalen en dynamisch Angular componenten concretiseren die op de gegevens JSON worden gebaseerd zoals die in het leerprogramma van de Componenten van de Kaartworden gezien.PageComponent
is eigenlijk slechts een volmacht voorAEMPageComponent
en het isAEMPageComponent
die het grootste deel van het zware heffen doet om het model JSON aan de componenten van de Angular correct in kaart te brengen.
Inspect de SPA routering in AEM
-
Open een terminal en stop webpack dev server als begonnen. Navigeer aan de wortel van het project, en stel het project in om het gebruiken van uw Geweven vaardigheden te AEM:
code language-shell $ cd aem-guides-wknd-spa $ mvn clean install -PautoInstallSinglePackage
note caution CAUTION Het project van de Angular heeft sommige zeer strikte toegelaten verbindingsregels. Als Maven bouwt ontbreekt, controleer de fout en zoek fouten van de Kleur die in de vermelde dossiers worden gevonden.. Los om het even welke die kwesties door linter worden gevonden en stel het Maven bevel opnieuw in werking. -
Navigeer aan de SPA homepage in AEM: http://localhost:4502/content/wknd-spa-angular/us/en/home.htmlen open de ontwikkelaarshulpmiddelen van uw browser. Onderstaande screenshots worden vastgelegd vanuit de Google Chrome-browser.
Vernieuw de pagina en u zou een XHR- verzoek aan
/content/wknd-spa-angular/us/en.model.json
moeten zien, wat de SPAWortel is. U ziet dat er slechts drie onderliggende pagina's zijn opgenomen op basis van de configuratie van de hiërarchiediepte voor de SPA basissjabloon die eerder in de zelfstudie is gemaakt. Dit omvat niet Pagina 3. -
Met de open ontwikkelaarshulpmiddelen, navigeer aan Pagina 3:
Merk op dat een nieuw XHR-verzoek wordt gedaan aan:
/content/wknd-spa-angular/us/en/home/page-2/page-3.model.json
De AEM ModelManager begrijpt dat de pagina 3 inhoud JSON niet beschikbaar is en automatisch het extra verzoek XHR teweegbrengt.
-
Ga verder met de navigatiekoppelingen in de SPA. Merk op dat er geen extra XHR-verzoeken worden gedaan en dat er geen volledige pagina-vernieuwingen plaatsvinden. Dit maakt de SPA snel voor de eindgebruiker en vermindert onnodige verzoeken terug naar AEM.
-
Experimenteer met diepe verbindingen door rechtstreeks te navigeren aan: http://localhost:4502/content/wknd-spa-angular/us/en/home/page-2.html. Let erop dat de knop Terug van de browser blijft werken.
Gefeliciteerd! congratulations
U hebt geleerd hoe meerdere weergaven in de SPA kunnen worden ondersteund door de SPA Editor SDK toe te wijzen aan AEM pagina's. Dynamische navigatie is geïmplementeerd via routering van Angulars en toegevoegd aan de component Header
.
U kunt de gebeëindigde code op GitHubaltijd bekijken of de code uit controleren plaatselijk door aan de tak Angular/navigation-routing-solution
te schakelen.
Volgende stappen next-steps
creeer een Component van de Douane- leer hoe te om een douanecomponent tot stand te brengen die met de Redacteur van de SPA van de AEM moet worden gebruikt. Leer hoe u dialoogvensters met auteurs en Sling Models ontwikkelt om het JSON-model uit te breiden en een aangepaste component te vullen.