Lägga till navigering och routning navigation-routing

Hämta startpunkten för den här självstudiekursen via Git:

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

Distribuera kodbasen till en lokal AEM med Maven:

$ mvn clean install -PautoInstallSinglePackage

Om du använder AEM 6.x lägger du till profilen classic:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Installera det färdiga paketet för den traditionella WKND-referensplatsen. Bilderna som tillhandahålls av WKND-referenswebbplatsen återanvänds på WKND-SPA. Paketet kan installeras med AEM Package Manager.

Öppna SPA startprojekt för det här kapitlet i den IDE du väljer.

Under modulen ui.frontend undersöker du filen header.component.ts vid: ui.frontend/src/app/components/header/header.component.ts.

Flera uppdateringar har gjorts, bland annat tillägg av en HeaderEditConfig och en MapTo som gör att komponenten kan mappas till en AEM wknd-spa-angular/components/header.

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

Observera @Input()-anteckningen för items. items innehåller en array med navigeringsobjekt som skickas från AEM.

I modulen ui.apps undersöker du komponentdefinitionen för AEM Header -komponenten: ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/header/.content.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"/>

Komponenten AEM Header ärver alla funktioner i Navigation Core Componentvia egenskapen sling:resourceSuperType.

Öppna en webbläsare och logga in på AEM, http://localhost:4502/. Startkodbasen ska redan distribueras.

Navigera till SPA Page Template: http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-page-template/structure.html.

Markera den yttre Root Layout Container och klicka på ikonen Policy för den. Var försiktig med att inte väljer Layout Container som inte är låst för redigering.

Kopiera den aktuella principen och skapa en ny princip med namnet SPA Structure:

Välj komponenten Layout Container under Allowed Components > General >.

Under Allowed Components > WKND SPA ANGULAR - STRUCTURE > väljer du komponenten Header:

Under Allowed Components > WKND SPA ANGULAR - Content > markerar du komponenterna Image och Text. Du bör välja totalt 4 komponenter.

Klicka på Done om du vill spara ändringarna.

Uppdatera sidan. Lägg till komponenten Header ovanför den olåsta Layout Container:

Markera komponenten Header och klicka på dess princip-ikon för att redigera profilen.

Skapa en ny princip med Policy Title av "WKND SPA Header".

Under Properties:

• Ange Navigation Root som /content/wknd-spa-angular/us/en.
• Ange Exclude Root Levels till 1.
• Avmarkera Collect al child pages.
• Ange Navigation Structure Depth till 3.

Detta samlar in navigering 2 nivåer under /content/wknd-spa-angular/us/en.

När du har sparat dina ändringar bör du se det ifyllda Header som en del av mallen:

Gå till konsolen Platser: http://localhost:4502/sites.html/content/wknd-spa-angular/us/en/home. Markera startsidan för WKND SPA Angular och klicka på Create > Page:

Under Template väljer du SPA Page. Under Properties anger du "Sida 1" som namn för Title och "sida-1".

Klicka på Create och klicka på Open i dialogrutan för att öppna sidan i AEM SPA Editor.

Lägg till en ny Text-komponent i huvudkomponenten Layout Container. Redigera komponenten och ange texten: "Sida 1" med RTE- och elementet H1 (du måste ange helskärmsläge för att ändra styckeelementen)

Du kan lägga till ytterligare innehåll, som en bild.

Gå tillbaka till AEM Sites-konsolen och upprepa stegen ovan, och skapa en andra sida med namnet "Sida 2" som en jämställd sida med sidan 1. Lägg till innehåll på sidan 2 så att det är lätt att identifiera.

Skapa slutligen en tredje sida, "Sida 3", men som underordnad till sidan 2. När webbplatshierarkin är klar ska den se ut så här:

På en ny flik öppnar du JSON-modell-API:t som tillhandahålls av AEM: http://localhost:4502/content/wknd-spa-angular/us/en.model.json. Detta JSON-innehåll begärs när SPA läses in första gången. Den yttre strukturen ser ut så här:

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

Under :children ska du se en post för varje sida som skapas. Innehållet för alla sidor finns i den här inledande JSON-begäran. När navigeringsflödet har implementerats läses efterföljande vyer av SPA in snabbt eftersom innehållet redan är tillgängligt på klientsidan.

Det är inte klokt att läsa in ALL av innehållet i en SPA i den inledande JSON-begäran, eftersom det skulle göra den inledande sidinläsningen långsammare. Nu ska vi titta på hur sidornas hierarkiska djup samlas in.

Gå till mallen SPA Root på: http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-app-template/structure.html.

Klicka på Page properties menu > Page Policy:

Mallen SPA Root har en extra Hierarchical Structure-flik som styr det JSON-innehåll som samlas in. Structure Depth avgör hur djupt i platshierarkin underordnade sidor ska samlas under roten. Du kan också använda fältet Structure Patterns för att filtrera bort ytterligare sidor baserat på ett reguljärt uttryck.

Uppdatera Structure Depth till "2":

Klicka på Done om du vill spara ändringarna i profilen.

Öppna JSON-modellen http://localhost:4502/content/wknd-spa-angular/us/en.model.json igen.

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

Observera att sökvägen Sidan 3 har tagits bort: /content/wknd-spa-angular/us/en/home/page-2/page-3 från den ursprungliga JSON-modellen.

Senare kommer vi att se hur AEM SDK för redigeraren kan läsa in ytterligare innehåll dynamiskt.

Granska den JSON som exponeras av AEM Header-komponenten på http://localhost:4502/content/wknd-spa-angular/us/en.model.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 AEM sidornas hierarkiska karaktär modelleras i JSON som kan användas för att fylla i en navigeringsmeny. Kom ihåg att komponenten Header ärver alla funktioner i Navigation Core Componentoch att innehållet som visas via JSON automatiskt mappas till Angularnas @Input-anteckning.

Öppna ett nytt terminalfönster och navigera till mappen ui.frontend i SPA. Skapa en ny NavigationComponent med Angular CLI-verktyget:

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

Skapa sedan en klass med namnet NavigationLink med Angular-CLI i den nyligen skapade components/navigation-katalogen:

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

Gå tillbaka till den utvecklingsmiljö du valt och öppna filen navigation-link.ts kl. /src/app/components/navigation/navigation-link.ts.

Fyll i navigation-link.ts med följande:

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

Det här är en enkel klass som representerar en enskild navigeringslänk. I klasskonstruktorn förväntar vi att data ska vara det JSON-objekt som skickas från AEM. Den här klassen används både i NavigationComponent och HeaderComponent för att enkelt fylla i navigeringsstrukturen.

Ingen dataomvandling utförs, den här klassen skapas främst för att skriva JSON-modellen med hög kvalitet. Observera att this.children har typen NavigationLink[] och att konstruktorn skapar nya NavigationLink-objekt rekursivt för vart och ett av objekten i arrayen children. Kom ihåg att JSON-modellen för Header är hierarkisk.

Öppna filen navigation-link.spec.ts. Det här är testfilen för klassen NavigationLink. Uppdatera den med följande:

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();
    });
});

Observera att const data följer samma JSON-modell som tidigare inspekterats för en enda länk. Detta är långt ifrån ett robust enhetstest, men det bör räcka att testa konstruktorn för NavigationLink.

Öppna filen navigation.component.ts. Uppdatera den med följande:

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 förväntar sig en object[] med namnet items som är JSON-modellen från AEM. Den här klassen visar en enskild metod, get navigationLinks(), som returnerar en array med NavigationLink objekt.

Öppna filen navigation.component.html och uppdatera den med följande:

<ul *ngIf="navigationLinks && navigationLinks.length > 0" class="navigation__group">
    <ng-container *ngTemplateOutlet="recursiveListTmpl; context:{ links: navigationLinks }"></ng-container>
</ul>

Detta genererar en inledande <ul> och anropar metoden get navigationLinks() från navigation.component.ts. En <ng-container> används för att göra ett anrop till en mall med namnet recursiveListTmpl och skickar den till navigationLinks som en variabel med namnet links.

Lägg till nästa recursiveListTmpl:

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

Här implementeras resten av återgivningen för navigeringslänken. Observera att variabeln link är av typen NavigationLink och att alla metoder och egenskaper som skapats av den klassen är tillgängliga. [routerLink] används i stället för normalt href-attribut. Det gör att vi kan länka till specifika vägar i appen utan att behöva uppdatera hela sidan.

Den rekursiva delen av navigeringen implementeras också genom att en annan <ul> skapas om den aktuella link har en icke-tom children-matris.

Uppdatera navigation.component.spec.ts om du vill lägga till stöd för RouterTestingModule:

 ...
+ import { RouterTestingModule } from '@angular/router/testing';
 ...
 beforeEach(async(() => {
    TestBed.configureTestingModule({
+   imports: [ RouterTestingModule ],
    declarations: [ NavigationComponent ]
    })
    .compileComponents();
 }));
 ...

Det krävs att RouterTestingModule läggs till eftersom komponenten använder [routerLink].

Uppdatera navigation.component.scss om du vill lägga till några grundläggande format i NavigationComponent:

Öppna en terminal och navigera till mappen ui.frontend i SPA. Starta webbpaketets dev-server:

$ npm start

Öppna en webbläsarflik och gå till http://localhost:4200/.

Webbpaketets dev-server ​ ​ska konfigureras att proxyansluta JSON-modellen från en lokal instans av AEM (ui.frontend/proxy.conf.json). Detta gör att vi kan koda direkt mot innehåll som skapats i AEM från tidigare kurser.

Menyalternativfunktionen är redan implementerad i HeaderComponent. Lägg sedan till navigeringskomponenten.

Gå tillbaka till den utvecklingsmiljö du vill använda och öppna filen header.component.ts på ui.frontend/src/app/components/header/header.component.ts.

Uppdatera metoden setHomePage() om du vill ta bort den hårdkodade strängen och använda de dynamiska uttryck som skickas av AEM:

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

En ny instans av NavigationLink skapas baserat på items[0], roten för den JSON-navigeringsmodell som skickas från AEM. this.route.snapshot.data.path returnerar sökvägen för den aktuella Angularna. Det här värdet används för att avgöra om den aktuella vägen är startsidan. this.homePageUrl används för att fylla i ankarlänken på logotypen.

Öppna header.component.html och ersätt den statiska platshållaren för navigeringen med en referens till den nya NavigationComponent:

    <div class="header-navigation">
        <div class="navigation">
-            Navigation Placeholder
+           <app-navigation [items]="items"></app-navigation>
        </div>
    </div>

[items]=items-attributet skickar @Input() items från HeaderComponent till NavigationComponent där navigeringen ska skapas.

Öppna header.component.spec.ts och lägg till en deklaration för NavigationComponent:

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

Eftersom NavigationComponent nu används som en del av HeaderComponent måste den deklareras som en del av testbädden.

Spara ändringar i alla öppna filer och gå tillbaka till webbpaketets dev-server: http://localhost:4200/

Öppna navigeringen genom att klicka på menyväxlingsknappen så visas de ifyllda navigeringslänkarna. Du bör kunna navigera till olika vyer av SPA.

I IDE öppnar du filen app-routing.module.ts vid ui.frontend/src/app.

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

Arrayen routes: Routes = []; definierar vägar eller navigeringssökvägar till komponentmappningar för Angular.

AemPageMatcher är en anpassad Angular-router, UrlMatcher, som matchar allt som "ser ut som" på en i AEM som är en del av det här Angularna.

PageComponent är den sidkomponent som representerar en Angular i AEM och som används för att återge de matchande vägarna. PageComponent granskas senare i självstudien.

AemPageDataResolver, som tillhandahålls av AEM JS SDK-redigeraren för SPA, är en anpassad Angular-routerlösare som används för att omforma rutt-URL:en, som är sökvägen i AEM inklusive tillägget .html, till resurssökvägen i AEM, som är sidsökvägen minus tillägget.

AemPageDataResolver omformar till exempel en vägs URL content/wknd-spa-angular/us/en/home.html till sökvägen /content/wknd-spa-angular/us/en/home. Detta används för att matcha sidans innehåll baserat på sökvägen i JSON-modellens API.

AemPageRouteReuseStrategy, som tillhandahålls av AEM JS SDK-redigeraren, är en anpassad RouteReuseStrategysom förhindrar återanvändning av PageComponent över vägar. Annars kan innehåll från sidan "A" visas vid navigering till sidan "B".

Öppna filen page.component.ts vid ui.frontend/src/app/components/page/.

...
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 krävs för att bearbeta den JSON som har hämtats från AEM och används som Angular för att återge vägarna.

ActivatedRoute, som tillhandahålls av modulen Angular Router, innehåller läget som anger vilket AEM sidans JSON-innehåll som ska läsas in i den här komponentinstansen för Angular Page.

ModelManagerService hämtar JSON-data baserat på vägen och mappar data till klassvariablerna path, items, itemsOrder. Dessa skickas sedan till AEMPageComponent

Öppna filen page.component.html vid ui.frontend/src/app/components/page/

<aem-page
    class="structure-page"
    [attr.data-cq-page-path]="path"
    [cqPath]="path"
    [cqItems]="items"
    [cqItemsOrder]="itemsOrder">
</aem-page>

aem-page innehåller AEMPageComponent. Variablerna path, items och itemsOrder skickas till AEMPageComponent. AemPageComponent, som tillhandahålls via SPA Editor JavaScript SDK:er, itererar sedan över dessa data och instansierar dynamiskt komponentkomponenter för Angular baserat på JSON-data som visas i självstudiekursen Kartkomponenter.

PageComponent är egentligen bara en proxy för AEMPageComponent och det är AEMPageComponent som gör större delen av det tunga lyftet för att korrekt mappa JSON-modellen till Angularnas komponenter.

Öppna en terminal och stoppa webbpaketets dev-server om den startas. Navigera till projektets rot och distribuera projektet till AEM med dina Maven-kunskaper:

$ cd aem-guides-wknd-spa
$ mvn clean install -PautoInstallSinglePackage

Navigera till SPA hemsida i AEM: http://localhost:4502/content/wknd-spa-angular/us/en/home.html och öppna webbläsarens utvecklingsverktyg. Skärmbilder nedan hämtas från Google Chrome webbläsare.

Uppdatera sidan så ser du en XHR-begäran till /content/wknd-spa-angular/us/en.model.json, som är SPA. Observera att endast tre underordnade sidor inkluderas baserat på hierarkidjupets konfiguration till SPA rotmall som skapades tidigare i självstudiekursen. Detta inkluderar inte sidan 3.

Gå till sidan 3 när utvecklingsverktygen är öppna:

Observera att en ny XHR-begäran görs till: /content/wknd-spa-angular/us/en/home/page-2/page-3.model.json

Den AEM modellhanteraren förstår att JSON-innehållet Sidan 3 inte är tillgängligt och utlöser automatiskt den ytterligare XHR-begäran.

Fortsätt navigera i SPA med de olika navigeringslänkarna. Observera att inga ytterligare XHR-begäranden görs och att inga fullständiga siduppdateringar görs. Detta gör SPA snabbt för slutanvändaren och minskar antalet onödiga förfrågningar som skickas tillbaka till AEM.

Experimentera med djupa länkar genom att navigera direkt till: http://localhost:4502/content/wknd-spa-angular/us/en/home/page-2.html. Observera att webbläsarens bakåtknapp fortsätter att fungera.