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.
- Leren gebruiken Angular routering om te navigeren tussen verschillende weergaven van de SPA.
- 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 bestaand Header
component. Het navigatiemenu wordt aangestuurd door de AEM paginahiërarchie en gebruikt het JSON-model dat wordt geleverd door de Navigation Core-component.
Vereisten
Controleer de vereiste gereedschappen en instructies voor het instellen van een plaatselijke 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 u AEM 6,x voeg toe
classic
profiel:code language-shell $ mvn clean install -PautoInstallSinglePackage -Pclassic
-
Het voltooide pakket installeren voor de traditionele WKND-referentiesite. De afbeeldingen van WKND-referentiesite worden opnieuw gebruikt op de WKND-SPA. Het pakket kan worden geïnstalleerd met AEM Package Manager.
U kunt de voltooide code altijd weergeven op GitHub of controleer de code plaatselijk door aan de tak over te schakelen Angular/navigation-routing-solution
.
Inspect HeaderComponent-updates inspect-header
In vorige hoofdstukken HeaderComponent
component is toegevoegd als een zuivere Angular die via app.component.html
. In dit hoofdstuk wordt HeaderComponent
wordt verwijderd uit de app en toegevoegd via de Sjablooneditor. Hiermee kunnen gebruikers het navigatiemenu van het dialoogvenster HeaderComponent
vanuit AEM.
-
In winde van uw keus opent het SPA starterproject voor dit hoofdstuk.
-
Onder de
ui.frontend
inspecteer het bestandheader.component.ts
om:ui.frontend/src/app/components/header/header.component.ts
.Er zijn verscheidene updates uitgevoerd, waaronder de toevoeging van een
HeaderEditConfig
enMapTo
om de component toe te laten om aan een AEM component worden in kaart gebrachtwknd-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()
aantekening vooritems
.items
bevat een array van navigatieobjecten die vanuit AEM worden doorgegeven. -
In de
ui.apps
de componentendefinitie van de AEM inspecterenHeader
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
zal alle functionaliteit van Navigation Core-component via desling:resourceSuperType
eigenschap.
Voeg de component HeaderComponent aan het SPA toe malplaatje add-header-template
-
Open een browser en meld u aan bij AEM. http://localhost:4502/. De begincodebasis zou reeds moeten worden opgesteld.
-
Ga naar de SPA Page Template: http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-page-template/structure.html.
-
De meest buitenste selecteren Root Layout Container en klik op Policy pictogram. Wees voorzichtig niet om de Layout Container niet-vergrendeld voor ontwerpen.
-
Kopieer het huidige beleid en maak een nieuw beleid met de naam SPA Structure:
Onder Allowed Components > General > selecteer de Layout Container component.
Onder Allowed Components > WKND SPA ANGULAR - STRUCTURE > selecteer de Header component:
Onder Allowed Components > WKND SPA ANGULAR - Content > selecteer de Image en Text componenten. Er moeten in totaal vier componenten zijn geselecteerd.
Klikken Done om de wijzigingen op te slaan
-
Vernieuwen de pagina. Voeg de Header component boven het niet-vergrendelde Layout Container:
-
Selecteer de Header component en klik op de component Beleid pictogram om het beleid te bewerken.
-
Een nieuw beleid maken met een Policy Title van "WKND SPA Header".
Onder de Properties:
- Stel de Navigation Root tot
/content/wknd-spa-angular/us/en
. - Stel de Exclude Root Levels tot 1.
- Uitschakelen Collect al child pages.
- Stel de Navigation Structure Depth tot 3.
Hierdoor worden de navigatieniveaus 2 diep onder elkaar verzameld
/content/wknd-spa-angular/us/en
. - Stel de Navigation Root tot
-
Nadat u de wijzigingen hebt opgeslagen, ziet u de gevulde
Header
als onderdeel van de template:
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.
-
Ga naar de Sites console: http://localhost:4502/sites.html/content/wknd-spa-angular/us/en/home. Selecteer de Startpagina WKND SPA Angular en klik op Create > Page:
-
Onder Template selecteren SPA Page. Onder Properties enter "Pagina 1" voor de Title en "page-1" als de naam.
Klikken Create en in het dialoogvenster klikt u op Open om de pagina te openen in de AEM SPA Editor.
-
Een nieuwe toevoegen Text aan de hoofdcomponent Layout Container. Bewerk de component en voer de tekst in: "Pagina 1" het gebruik van de RTE en de H1 element (u moet de modus Volledig scherm activeren om de alinea-elementen te wijzigen)
Voel u vrij om extra inhoud toe te voegen, zoals een afbeelding.
-
Ga terug naar de AEM Sites-console en herhaal de bovenstaande stappen en maak een tweede pagina met de naam "Pagina 2" als een Pagina 1. Inhoud toevoegen aan Pagina 2 zodat het gemakkelijk kan worden geïdentificeerd.
-
Ten slotte maakt u een derde pagina. "Pagina 3" maar als kind van Pagina 2. Na voltooiing zou de plaatshiërarchie als het volgende moeten kijken:
-
Open op een nieuw tabblad de API van het JSON-model die wordt geleverd door AEM: 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
u zou een ingang voor elk van de gecreeerde pagina's moeten zien. 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 verstandig om te laden ALLES van de inhoud van een SPA in het eerste JSON-verzoek, aangezien dit het laden van de eerste pagina zou vertragen. Vervolgens kunt u bekijken hoe de hiërarchische diepte van pagina's wordt verzameld.
-
Ga naar de SPA sjabloon op: http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-app-template/structure.html.
Klik op de knop Page properties menu > Page Policy:
-
De SPA sjabloon heeft een extra Hierarchical Structure om de verzamelde JSON-inhoud te beheren. De Structure Depth bepaalt hoe diep in de sitehiërarchie onderliggende pagina's onder de basis. U kunt ook de opdracht Structure Patterns veld om extra pagina's te filteren op basis van een reguliere expressie.
Werk de Structure Depth tot "2":
Klikken Done de wijzigingen in het beleid opslaan.
-
Het JSON-model opnieuw openen http://localhost:4502/content/wknd-spa-angular/us/en.model.json.
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": {} } }
Let erop dat de Pagina 3 pad is verwijderd:
/content/wknd-spa-angular/us/en/home/page-2/page-3
uit het oorspronkelijke JSON-model.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
. We kunnen de code rechtstreeks toevoegen in header.component.html
maar het is beter om grote onderdelen te vermijden . In plaats daarvan implementeert u een NavigationComponent
die later mogelijk opnieuw kunnen worden gebruikt.
-
Bekijk de JSON die door de AEM wordt weergegeven
Header
component bij 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. Herinnert eraan dat de
Header
alle functionaliteit van de component overerft Navigation Core-component en de inhoud die via de JSON beschikbaar wordt gemaakt, wordt automatisch toegewezen aan de Angular@Input
aantekening. -
Open een nieuw terminalvenster en ga naar het
ui.frontend
map van het SPA project. Een nieuweNavigationComponent
het gebruiken van het hulpmiddel CLI van de 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
het gebruiken van Angular CLI in nieuw gecreeerdcomponents/navigation
map: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 IDE van uw keuze en open het bestand op
navigation-link.ts
om/src/app/components/navigation/navigation-link.ts
. -
Vullen
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
data
om het JSON-object te zijn dat vanuit AEM wordt doorgegeven. Deze klasse wordt gebruikt binnen beideNavigationComponent
enHeaderComponent
om de navigatiestructuur gemakkelijk te vullen.Er wordt geen gegevenstransformatie uitgevoerd. Deze klasse wordt vooral gemaakt om het JSON-model sterk te typen. Let op:
this.children
wordt getypt alsNavigationLink[]
en dat de constructor recursief nieuweNavigationLink
objecten voor elk item in het dialoogvensterchildren
array. Herinnert dat JSON-model voor deHeader
is hiërarchisch. -
Het bestand openen
navigation-link.spec.ts
. Dit is het testbestand voor deNavigationLink
klasse. 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(); }); });
Let op:
const data
volgt hetzelfde JSON-model dat eerder is geïnspecteerd voor één koppeling. Dit is verre van een robuuste eenheidstest, maar het zou moeten volstaan om de aannemer vanNavigationLink
. -
Het bestand openen
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 eenobject[]
benoemditems
Dat is het JSON-model van AEM. Deze klasse maakt één methode beschikbaarget navigationLinks()
die een array vanNavigationLink
objecten. -
Het bestand openen
navigation.component.html
en het bijwerken 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>
en roept deget navigationLinks()
methode vannavigation.component.ts
. An<ng-container>
wordt gebruikt om een vraag aan een malplaatje te maken genoemdrecursiveListTmpl
en geeft deze doornavigationLinks
als een variabele met de naamlinks
.Voeg de
recursiveListTmpl
volgende: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 typeNavigationLink
en alle methoden/eigenschappen die door die klasse worden gemaakt, zijn beschikbaar.[routerLink]
wordt gebruikt in plaats van normaalhref
kenmerk. 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 uitgevoerd door een andere te creëren
<ul>
als de huidigelink
heeft een niet-leegchildren
array. -
Bijwerken
navigation.component.spec.ts
om ondersteuning toe te voegen voorRouterTestingModule
:code language-diff ... + import { RouterTestingModule } from '@angular/router/testing'; ... beforeEach(async(() => { TestBed.configureTestingModule({ + imports: [ RouterTestingModule ], declarations: [ NavigationComponent ] }) .compileComponents(); })); ...
De
RouterTestingModule
is vereist omdat de component het gebruik[routerLink]
. -
Bijwerken
navigation.component.scss
om enkele basisstijlen 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 uitgevoerd, HeaderComponent
moet worden bijgewerkt om ernaar te verwijzen.
-
Open een terminal en navigeer naar de
ui.frontend
in het SPA project. Start de webpack-ontwikkelserver:code language-shell $ npm start
-
Open een browsertabblad en navigeer naar http://localhost:4200/.
De webpack-ontwikkelserver moet zo worden geconfigureerd dat het JSON-model kan worden geproxy door een lokale instantie van AEM (
ui.frontend/proxy.conf.json
). Op deze manier kunnen we rechtstreeks code toevoegen aan de inhoud die in AEM van eerder in de zelfstudie is gemaakt.De
HeaderComponent
de menuschakelfunctionaliteit is al geïmplementeerd. Voeg vervolgens de navigatiecomponent toe. -
Ga terug naar IDE van uw keuze en open het bestand
header.component.ts
omui.frontend/src/app/components/header/header.component.ts
. -
Werk de
setHomePage()
methode om de hard-gecodeerde Koord te verwijderen en de dynamische die binnen eigenschappen te gebruiken door de AEM component worden overgegaan: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; } } ...
Een nieuwe instantie van
NavigationLink
wordt gemaakt op basis vanitems[0]
, de basis van het JSON-navigatiemodel dat vanuit AEM is 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 is Startpagina.this.homePageUrl
wordt gebruikt om de ankerkoppeling in het dialoogvenster logo. -
Openen
header.component.html
en vervang de statische plaatsaanduiding voor de navigatie door een verwijzing naar het zojuist gemaakteNavigationComponent
:code language-diff <div class="header-navigation"> <div class="navigation"> - Navigation Placeholder + <app-navigation [items]="items"></app-navigation> </div> </div>
[items]=items
kenmerk geeft het@Input() items
van deHeaderComponent
aan deNavigationComponent
waar de navigatie zal worden opgebouwd. -
Openen
header.component.spec.ts
en voegt een verklaring toe voor deNavigationComponent
: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 de
NavigationComponent
wordt nu gebruikt als onderdeel van hetHeaderComponent
het moet als onderdeel van de testbank worden aangegeven. -
Wijzigingen in geopende bestanden opslaan en terugkeren naar de map webpack-ontwikkelserver: 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.
-
In winde open het dossier
app-routing.module.ts
omui.frontend/src/app
.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
routes: Routes = [];
array definieert de routes of navigatiepaden naar componenttoewijzingen van Angulars.AemPageMatcher
is een router van de douaneAngular UrlMatcher, die overeenkomt met alles wat er 'uitziet als' een pagina in AEM die deel uitmaakt van deze Angular.PageComponent
is de Component van de Angular die een Pagina in AEM vertegenwoordigt, en gebruikt om de aangepaste routes terug te geven. DePageComponent
wordt later in de zelfstudie besproken.AemPageDataResolver
, verstrekt door de AEM SPA Editor JS SDK, is een aangepast Angular Router Resolver wordt gebruikt om de route URL, die de weg in AEM met inbegrip van de uitbreiding .html is, aan de middelweg in AEM om te zetten, die de paginadad minus de uitbreiding is.Bijvoorbeeld de
AemPageDataResolver
transformeert de URL van een route vancontent/wknd-spa-angular/us/en/home.html
in 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
, verstrekt door de AEM SPA Editor JS SDK, is een aangepast RouteReuseStrategy die hergebruik van dePageComponent
over routes. Anders wordt de inhoud van pagina "A" mogelijk weergegeven wanneer u naar pagina "B" navigeert. -
Het bestand openen
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]; }); } }
De
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
, die 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
, krijgt de JSON-gegevens op basis van de route en wijst de gegevens toe aan klassevariabelenpath
,items
,itemsOrder
. Deze worden vervolgens doorgegeven aan de AEMPageComponent -
Het bestand openen
page.component.html
omui.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
bevat de AEMPageComponent. De variabelenpath
,items
, enitemsOrder
worden doorgegeven aan deAEMPageComponent
. DeAemPageComponent
, verstrekt via de SPA redacteur zal de SDK van JavaScript dan over deze gegevens herhalen en dynamisch Angular componenten concretiseren die op de gegevens JSON worden gebaseerd zoals die in Zelfstudie Kaartcomponenten.De
PageComponent
is eigenlijk slechts een proxy voor deAEMPageComponent
en het isAEMPageComponent
Dat doet het grootste deel van het zware heffen om het model JSON correct aan de componenten van de Angular in kaart te brengen.
Inspect de SPA routering in AEM
-
Open een terminal en stop de webpack-ontwikkelserver indien gestart. 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 de Maven-build mislukt, controleert u de fout en zoekt u In de weergegeven bestanden aangetroffen puntfouten.. Los om het even welke die kwesties door linter worden gevonden en stel het Maven bevel opnieuw in werking. -
Navigeer naar de SPA homepage in AEM: http://localhost:4502/content/wknd-spa-angular/us/en/home.html en open de ontwikkelaarsgereedschappen van uw browser. Onderstaande screenshots worden vastgelegd vanuit de Google Chrome-browser.
De pagina vernieuwen. Er wordt een XHR-verzoek weergegeven voor
/content/wknd-spa-angular/us/en.model.json
, dat is de SPA. 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 hulpmiddelen van de ontwikkelaar, navigeer aan Pagina 3:
Merk op dat een nieuw XHR-verzoek wordt ingediend aan:
/content/wknd-spa-angular/us/en/home/page-2/page-3.model.json
De AEM Model Manager begrijpt dat de Pagina 3 JSON-inhoud is niet beschikbaar en activeert automatisch het aanvullende XHR-verzoek.
-
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 koppelingen door rechtstreeks naar: 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. De dynamische navigatie is uitgevoerd gebruikend het verpletteren van de Angular en toegevoegd aan Header
component.
U kunt de voltooide code altijd weergeven op GitHub of controleer de code plaatselijk door aan de tak over te schakelen Angular/navigation-routing-solution
.
Volgende stappen next-steps
Een aangepaste component maken - Leer hoe u een aangepaste component maakt die u wilt gebruiken met de AEM SPA Editor. Leer hoe u dialoogvensters met auteurs en Sling Models ontwikkelt om het JSON-model uit te breiden en een aangepaste component te vullen.