Aggiungi navigazione e indirizzamento

Scarica il punto di partenza per questa esercitazione tramite Git:

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

Implementa la base di codice in un’istanza AEM locale utilizzando Maven:

$ mvn clean install -PautoInstallSinglePackage

Se utilizzi AEM 6.x, aggiungi il profilo classic:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Installa il pacchetto finito per il sito di riferimento WKND tradizionale. Le immagini fornite dal sito di riferimento WKND sono riutilizzate nell'applicazione a pagina singola WKND. È possibile installare il pacchetto utilizzando Gestione pacchetti di AEM.

Apri un browser e accedi ad AEM, http://localhost:4502/. La base di codice iniziale deve essere già distribuita.

Passare al Modello pagina SPA: http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-page-template/structure.html.

Seleziona il contenitore di layout principale più esterno e fai clic sulla relativa icona Criteri. Fai attenzione a not per selezionare il Contenitore di layout non bloccato per l'authoring.

Copia il criterio corrente e crea un nuovo criterio denominato Struttura SPA:

In Componenti consentiti > Generale > seleziona il componente Contenitore di layout.

In Componenti consentiti > ANGULAR SPA WKND - STRUTTURA > seleziona il componente Intestazione:

In Componenti consentiti > ANGULAR SPA WKND - Contenuto > seleziona i componenti Immagine e Testo. Dovresti aver selezionato 4 componenti totali.

Per salvare le modifiche, fai clic su Completati.

Aggiorna la pagina. Aggiungi il componente Intestazione sopra il Contenitore di layout non bloccato:

Selezionare il componente Header e fare clic sulla relativa icona Policy per modificare il criterio.

Creare un nuovo criterio con un Titolo criterio di "Intestazione SPA WKND".

In Proprietà:

• Impostare Directory principale di navigazione su /content/wknd-spa-angular/us/en.
• Imposta Escludi livelli principali su 1.
• Deseleziona Raccogli tutte le pagine figlie.
• Impostare Annidamento struttura di spostamento su 3.

In questo modo verranno raccolti i 2 livelli di navigazione inferiori a /content/wknd-spa-angular/us/en.

Dopo aver salvato le modifiche, dovresti visualizzare Header popolato come parte del modello:

Passare alla console Sites: http://localhost:4502/sites.html/content/wknd-spa-angular/us/en/home. Seleziona la home page di Angular per applicazioni a pagina singola WKND e fai clic su Crea > Pagina:

In Modello selezionare Pagina SPA. In Proprietà immettere "Pagina 1" per il Titolo e "pagina-1" come nome.

Fai clic su Crea e nella finestra a comparsa fai clic su Apri per aprire la pagina nell'editor SPA di AEM.

Aggiungi un nuovo componente Testo al Contenitore di layout principale. Modificare il componente e immettere il testo: "Pagina 1" utilizzando l'editor Rich Text e l'elemento H1 (sarà necessario attivare la modalità a schermo intero per modificare gli elementi del paragrafo)

Puoi aggiungere altri contenuti, come un’immagine.

Torna alla console AEM Sites e ripeti i passaggi precedenti, creando una seconda pagina denominata "Pagina 2" come pari livello di Pagina 1. Aggiungere contenuto a Pagina 2 per identificarlo facilmente.

Infine, crea una terza pagina, "Pagina 3" ma come elemento secondario di Pagina 2. Una volta completato, la gerarchia del sito avrà l’aspetto seguente:

In una nuova scheda, apri l'API del modello JSON fornita da AEM: http://localhost:4502/content/wknd-spa-angular/us/en.model.json. Questo contenuto JSON viene richiesto al primo caricamento dell’applicazione a pagina singola. La struttura esterna si presenta come segue:

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

In :children dovresti visualizzare una voce per ciascuna delle pagine create. Il contenuto di tutte le pagine si trova in questa richiesta JSON iniziale. Una volta implementato il routing di navigazione, le visualizzazioni successive dell’applicazione a pagina singola vengono caricate rapidamente, in quanto il contenuto è già disponibile lato client.

Non è consigliabile caricare ALL del contenuto di un'applicazione a pagina singola nella richiesta JSON iniziale, in quanto ciò rallenterebbe il caricamento della pagina iniziale. Quindi, vediamo come viene raccolta la profondità gerarchica delle pagine.

Passa al modello Radice applicazione a pagina singola in: http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-app-template/structure.html.

Fai clic sul menu Proprietà pagina > Criterio pagina:

Il modello Radice applicazione a pagina singola include una scheda Struttura gerarchica aggiuntiva per controllare il contenuto JSON raccolto. L'Annidamento struttura determina la profondità nella gerarchia del sito per raccogliere le pagine figlie sotto la radice. È inoltre possibile utilizzare il campo Modelli struttura per filtrare ulteriori pagine in base a un'espressione regolare.

Aggiorna Annidamento struttura in "2":

Fai clic su Fine per salvare le modifiche al criterio.

Riapri il modello JSON http://localhost:4502/content/wknd-spa-angular/us/en.model.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": {}
    }
}

Il percorso Pagina 3 è stato rimosso: /content/wknd-spa-angular/us/en/home/page-2/page-3 dal modello JSON iniziale.

Successivamente, osserveremo come AEM SPA Editor SDK può caricare dinamicamente contenuti aggiuntivi.

Aprire un terminale e passare alla cartella ui.frontend all'interno del progetto SPA. Avvia il server di sviluppo webpack:

$ npm start

Apri una scheda del browser e passa a http://localhost:4200/.

Il server di sviluppo webpack deve essere configurato per fungere da proxy del modello JSON da un'istanza locale di AEM (ui.frontend/proxy.conf.json). Questo ci consentirà di eseguire il codice direttamente in base al contenuto creato in AEM dall’inizio dell’esercitazione.

La funzionalità di attivazione/disattivazione menu di HeaderComponent è già stata implementata. Quindi, aggiungi il componente Navigazione.

Tornare all'IDE desiderato e aprire il file header.component.ts in ui.frontend/src/app/components/header/header.component.ts.

Aggiorna il metodo setHomePage() per rimuovere la stringa hardcoded e utilizzare le proprietà dinamiche passate dal componente 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;
    }
}
...

Viene creata una nuova istanza di NavigationLink basata su items[0], la radice del modello JSON di navigazione trasmesso da AEM. this.route.snapshot.data.path restituisce il percorso della route Angular corrente. Questo valore viene utilizzato per determinare se la route corrente è la home page. this.homePageUrl viene utilizzato per popolare il collegamento di ancoraggio nel logo.

Apri header.component.html e sostituisci il segnaposto statico per la navigazione con un riferimento al NavigationComponent appena creato:

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

L'attributo [items]=items passa @Input() items da HeaderComponent a NavigationComponent dove verrà compilata la navigazione.

Apri header.component.spec.ts e aggiungi una dichiarazione per 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();
    }));

Poiché NavigationComponent è ora utilizzato come parte di HeaderComponent, deve essere dichiarato come parte del banco di prova.

Salva le modifiche apportate ai file aperti e torna al server di sviluppo webpack: http://localhost:4200/

Apri la navigazione facendo clic sull’interruttore del menu; dovresti visualizzare i collegamenti di navigazione compilati. Dovresti essere in grado di passare a diverse visualizzazioni dell’applicazione a pagina singola.

Nell'IDE aprire il file app-routing.module.ts in 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 {}

L'array routes: Routes = []; definisce le route o i percorsi di navigazione per i mapping dei componenti Angular.

AemPageMatcher è un router Angular personalizzato UrlMatcher, che corrisponde a qualsiasi elemento che "assomiglia" a una pagina in AEM che fa parte di questa applicazione Angular.

PageComponent è il componente Angular che rappresenta una pagina in AEM ed è utilizzato per eseguire il rendering delle route corrispondenti. PageComponent viene rivisto più avanti nell'esercitazione.

AemPageDataResolver, fornito da AEM SPA Editor JS SDK, è un Angular Router Resolver personalizzato utilizzato per trasformare l'URL del percorso, che è il percorso in AEM con estensione .html, nel percorso della risorsa in AEM, ovvero il percorso della pagina meno l'estensione.

Ad esempio, AemPageDataResolver trasforma l'URL di una route di content/wknd-spa-angular/us/en/home.html in un percorso di /content/wknd-spa-angular/us/en/home. Viene utilizzato per risolvere il contenuto della pagina in base al percorso nell’API del modello JSON.

AemPageRouteReuseStrategy, fornito da AEM SPA Editor JS SDK, è una RouteReuseStrategy personalizzata che impedisce il riutilizzo di PageComponent tra le route. In caso contrario, il contenuto della pagina "A" potrebbe apparire quando si passa alla pagina "B".

Aprire il file page.component.ts in 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 è necessario per elaborare il JSON recuperato da AEM e viene utilizzato come componente Angular per eseguire il rendering delle route.

ActivatedRoute, fornito dal modulo Router Angular, contiene lo stato che indica quale contenuto JSON della pagina AEM deve essere caricato in questa istanza del componente Angular Page.

ModelManagerService, ottiene i dati JSON in base alla route e mappa i dati alle variabili di classe path, items, itemsOrder. Questi verranno quindi passati a AEMPageComponent

Apri il file page.component.html in 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 include AEMPageComponent. Le variabili path, items e itemsOrder sono passate a AEMPageComponent. AemPageComponent, fornito tramite l'editor SPA JavaScript SDK, eseguirà quindi l'iterazione di questi dati e creerà un'istanza dinamica dei componenti Angular in base ai dati JSON, come mostrato nell'esercitazione Componenti mappa.

PageComponent è in realtà solo un proxy per AEMPageComponent ed è AEMPageComponent che esegue la maggior parte del lavoro pesante per mappare correttamente il modello JSON ai componenti di Angular.

Aprire un terminale e arrestare il server di sviluppo webpack, se avviato. Passa alla directory principale del progetto e implementa il progetto in AEM utilizzando le abilità Maven:

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

CAUTION

Nel progetto Angular sono abilitate alcune regole di evidenziazione molto rigide. Se la build Maven non riesce, verifica l’errore e cerca gli errori Lint trovati nei file elencati.. Correggi eventuali problemi rilevati dal puntatore ed esegui nuovamente il comando Maven.

Passa alla home page dell'applicazione a pagina singola in AEM: http://localhost:4502/content/wknd-spa-angular/us/en/home.html e apri gli strumenti per sviluppatori del browser. Le schermate seguenti vengono acquisite dal browser Google Chrome.

Aggiorna la pagina per visualizzare una richiesta XHR a /content/wknd-spa-angular/us/en.model.json, che è la radice SPA. In base alla configurazione della profondità della gerarchia rispetto al modello radice dell’applicazione a pagina singola creato in precedenza nell’esercitazione, vengono incluse solo tre pagine figlie. Non include Pagina 3.

Con gli strumenti per sviluppatori aperti, passa a Pagina 3:

Si noti che è stata effettuata una nuova richiesta XHR a: /content/wknd-spa-angular/us/en/home/page-2/page-3.model.json

AEM Model Manager riconosce che il contenuto JSON Pagina 3 non è disponibile e attiva automaticamente la richiesta XHR aggiuntiva.

Continua a navigare nell’applicazione a pagina singola utilizzando i vari collegamenti di navigazione. Tieni presente che non vengono effettuate richieste XHR aggiuntive e che non si verifica alcun aggiornamento dell’intera pagina. In questo modo l’applicazione a pagina singola è veloce per l’utente finale e riduce le richieste non necessarie ad AEM.

Prova i collegamenti profondi navigando direttamente in: http://localhost:4502/content/wknd-spa-angular/us/en/home/page-2.html. Il pulsante Indietro del browser continua a funzionare.