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-instans 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-referensplatsen återanvänds på WKND SPA. Paketet kan installeras med AEM Package Manager.

I den IDE du väljer öppnar du SPA-startprojektet för det här kapitlet.

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

Kontrollera komponentdefinitionen för AEM Header-komponenten i modulen ui.apps: 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"/>

AEM Header-komponenten ä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 WKND SPA Angular hemsida 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 öppna sidan i AEM SPA Editor genom att klicka på Open i dialogrutan.

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:

Öppna JSON-modell-API:t från AEM på en ny flik: http://localhost:4502/content/wknd-spa-angular/us/en.model.json. Det här JSON-innehållet begärs när SPA läses in för 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 SPA Editor SDK dynamiskt kan läsa in ytterligare innehåll.

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"

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 Angular @Input -anteckningen.

Öppna ett nytt terminalfönster och navigera till mappen ui.frontend i SPA-projektet. 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 katalogen components/navigation:

$ 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-projektet. 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). På så sätt kan vi koda direkt mot innehåll som skapats i AEM tidigare i kursen.

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

/* 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 Angular-vägen. 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 Angular-komponentmappningar.

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

PageComponent är den Angular-komponent som representerar en sida 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 SPA Editor JS SDK, är en anpassad Angular Router Resolver som används för att omforma väg-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 SPA Editor JS SDK, ä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-komponent för att återge vägarna.

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

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-redigeraren JavaScript SDK itererar sedan över dessa data och instansierar dynamiskt Angular-komponenter 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 Angular-komponenterna.

Ö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

Gå till SPA-startsidan 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-roten. Observera att endast tre underordnade sidor inkluderas baserat på hierarkidjupets konfiguration till SPA-rotmallen 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

AEM Model Manager 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 att SPA-avtalet blir snabbt för slutanvändaren och minskar onödiga förfrågningar 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.