Adicionar navegação e roteamento

Abra um navegador e faça logon no AEM, http://localhost:4502/. A base de código inicial já deve estar implantada.

Navegue até o Modelo de página do SPA: http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-page-template/structure.html.

Selecione o Contêiner de Layout Raiz mais externo e clique em seu ícone Política. Tenha cuidado não para selecionar o Contêiner de layout desbloqueado para criação.

Copie a política atual e crie uma nova política chamada Estrutura do SPA:

Em Componentes Permitidos > Geral > selecione o componente Contêiner de Layout.

Em Componentes Permitidos > WKND SPA ANGULAR - STRUCTURE > selecione o componente Cabeçalho:

Em Componentes Permitidos > WKND SPA ANGULAR - Conteúdo > selecione os componentes Imagem e Texto. Você deve ter um total de quatro componentes selecionados.

Clique em Concluído para salvar as alterações.

Atualizar a página. Adicione o componente Cabeçalho acima do Contêiner de Layout desbloqueado:

Selecione o componente Cabeçalho e clique em seu ícone Política para editar a política.

Crie uma nova política com um Título da Política de "Cabeçalho WKND SPA".

Em Propriedades:

• Defina a Raiz de Navegação como /content/wknd-spa-angular/us/en.
• Defina os Excluir Níveis de Raiz para 1.
• Desmarcar Coletar todas as páginas secundárias.
• Defina a Profundidade da Estrutura de Navegação como 3.

Isso coletará os 2 níveis de navegação abaixo de /content/wknd-spa-angular/us/en.

Depois de salvar as alterações, você deverá ver o Header preenchido como parte do modelo:

Navegue até o console Sites: http://localhost:4502/sites.html/content/wknd-spa-angular/us/en/home. Selecione a Página Inicial do WKND SPA Angular e clique em Criar > Página:

Em Modelo, selecione Página de SPA. Em Propriedades, digite "Página 1" para o Título e "página-1" como o nome.

Clique em Criar e, no pop-up da caixa de diálogo, clique em Abrir para abrir a página no Editor SPA do AEM.

Adicionar um novo componente Texto ao Contêiner de Layout principal. Edite o componente e insira o texto: "Página 1" usando o RTE e o elemento H1 (você terá que entrar no modo de tela cheia para alterar os elementos de parágrafo)

Fique à vontade para adicionar mais conteúdo, como uma imagem.

Retorne ao console do AEM Sites e repita as etapas acima, criando uma segunda página denominada "Página 2" como irmã da Página 1. Adicionar conteúdo à Página 2 para identificá-lo facilmente.

Por fim, crie uma terceira página, "Página 3", mas como criança da Página 2. Depois de concluída, a hierarquia do site deve ser semelhante ao seguinte:

Em uma nova guia, abra a API do modelo JSON fornecida pelo AEM: http://localhost:4502/content/wknd-spa-angular/us/en.model.json. Esse conteúdo JSON é solicitado quando o SPA é carregado pela primeira vez. A estrutura externa tem a seguinte aparência:

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

Em :children você deve ver uma entrada para cada uma das páginas criadas. O conteúdo de todas as páginas está nesta solicitação JSON inicial. Depois que o roteamento de navegação é implementado, as exibições subsequentes do SPA são carregadas rapidamente, pois o conteúdo já está disponível no lado do cliente.

Não é recomendável carregar TODOS do conteúdo de um SPA na solicitação JSON inicial, pois isso retardaria o carregamento da página inicial. Em seguida, vamos analisar como a profundidade da hierarquia das páginas é coletada.

Navegue até o modelo Raiz do SPA em: http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-app-template/structure.html.

Clique no menu Propriedades da página > Política da página:

O modelo Raiz de SPA tem uma guia Estrutura Hierárquica extra para controlar o conteúdo JSON coletado. A Profundidade da Estrutura determina a profundidade na hierarquia do site para coletar páginas secundárias abaixo da raiz. Você também pode usar o campo Padrões de estrutura para filtrar páginas adicionais com base em uma expressão regular.

Atualize a Profundidade da Estrutura para "2":

Clique em Concluído para salvar as alterações na política.

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

Observe que o caminho Página 3 foi removido: /content/wknd-spa-angular/us/en/home/page-2/page-3 do modelo JSON inicial.

Posteriormente, observaremos como o SDK do Editor SPA do AEM pode carregar dinamicamente conteúdo adicional.

Abra um terminal e navegue até a pasta ui.frontend no projeto do SPA. Inicie o servidor de desenvolvimento do webpack:

$ npm start

Abra uma guia do navegador e navegue até http://localhost:4200/.

O servidor de desenvolvimento do webpack deve ser configurado para usar o proxy do modelo JSON de uma instância local do AEM (ui.frontend/proxy.conf.json). Isso nos permitirá codificar diretamente em relação ao conteúdo criado no AEM a partir de versões anteriores do tutorial.

Atualmente, o HeaderComponent já tem a funcionalidade de alternância de menu implementada. Em seguida, adicione o componente de navegação.

Retorne ao IDE de sua escolha e abra o arquivo header.component.ts em ui.frontend/src/app/components/header/header.component.ts.

Atualize o método setHomePage() para remover a String codificada e usar as props dinâmicas transmitidas pelo 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;
    }
}
...

Uma nova instância de NavigationLink é criada com base em items[0], a raiz do modelo JSON de navegação transmitido pelo AEM. this.route.snapshot.data.path retorna o caminho da rota atual do Angular. Este valor é usado para determinar se a rota atual é a Página Inicial. this.homePageUrl é usado para preencher o link de âncora no logotipo.

Abra header.component.html e substitua o espaço reservado estático para a navegação por uma referência ao NavigationComponent recém-criado:

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

O atributo [items]=items passa o @Input() items de HeaderComponent para NavigationComponent, onde ele compilará a navegação.

Abra header.component.spec.ts e adicione uma declaração para 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();
    }));

Como o NavigationComponent agora é usado como parte do HeaderComponent, ele precisa ser declarado como parte da base de testes.

Salve as alterações nos arquivos abertos e retorne ao servidor de desenvolvimento do webpack: http://localhost:4200/

Abra a navegação clicando na opção de menu e você verá os links de navegação preenchidos. Você deve conseguir navegar para diferentes exibições do SPA.

No IDE, abra o arquivo app-routing.module.ts em 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 {}

A matriz routes: Routes = []; define as rotas ou os caminhos de navegação para mapeamentos de componentes do Angular.

AemPageMatcher é um roteador Angular personalizado UrlMatcher, que corresponde a qualquer item que "se pareça" com uma página no AEM que faz parte deste aplicativo Angular.

PageComponent é o componente de Angular que representa uma Página no AEM e é usado para renderizar as rotas correspondentes. O PageComponent é revisado posteriormente no tutorial.

AemPageDataResolver, fornecido pelo AEM SPA Editor JS SDK, é um Resolvedor de Roteador Angular personalizado usado para transformar a URL de rota, que é o caminho no AEM, incluindo a extensão .html, para o caminho de recurso no AEM, que é o caminho da página menos a extensão.

Por exemplo, o AemPageDataResolver transforma a URL de uma rota de content/wknd-spa-angular/us/en/home.html em um caminho de /content/wknd-spa-angular/us/en/home. Isso é usado para resolver o conteúdo da página com base no caminho na API do modelo JSON.

AemPageRouteReuseStrategy, fornecido pelo AEM SPA Editor JS SDK, é uma RouteReuseStrategy personalizada que impede a reutilização de PageComponent entre rotas. Caso contrário, o conteúdo da página "A" poderá ser exibido ao navegar para a página "B".

Abra o arquivo page.component.ts em 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];
        });
    }
}

O PageComponent é necessário para processar o JSON recuperado do AEM e é usado como o componente do Angular para renderizar as rotas.

ActivatedRoute, que é fornecido pelo módulo Angular Router, contém o estado indicando qual conteúdo JSON da Página do AEM deve ser carregado nesta instância do componente Angular Page.

ModelManagerService, obtém os dados JSON com base na rota e mapeia os dados para as variáveis de classe path, items, itemsOrder. Eles serão passados para o AEMPageComponent

Abrir o arquivo page.component.html em 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 inclui o AEMPageComponent. As variáveis path, items e itemsOrder são passadas para AEMPageComponent. O AemPageComponent, fornecido pelo JavaScript SDK do Editor de SPA, iterará sobre esses dados e instanciará dinamicamente os componentes do Angular com base nos dados JSON, conforme visto no tutorial de Componentes do Map.

O PageComponent é na verdade apenas um proxy para o AEMPageComponent e é o AEMPageComponent que faz a maioria do trabalho pesado para mapear corretamente o modelo JSON para os componentes do Angular.

Abra um terminal e pare o servidor de desenvolvimento do webpack, se iniciado. Navegue até a raiz do projeto e implante o projeto no AEM usando suas habilidades em Maven:

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

CAUTION

O projeto Angular tem algumas regras de lista muito rigorosas ativadas. Se a compilação Maven falhar, verifique o erro e procure erros Lint encontrados nos arquivos listados.. Corrija todos os problemas encontrados pelo linter e execute novamente o comando Maven.

Navegue até a página inicial do SPA no AEM: http://localhost:4502/content/wknd-spa-angular/us/en/home.html e abra as ferramentas de desenvolvedor do seu navegador. As capturas de tela abaixo são feitas no navegador Google Chrome.

Atualize a página e você verá uma solicitação XHR para /content/wknd-spa-angular/us/en.model.json, que é a Raiz SPA. Observe que apenas três páginas secundárias são incluídas com base na configuração de profundidade da hierarquia para o modelo Raiz de SPA definido anteriormente no tutorial. Isso não inclui a Página 3.

Com as ferramentas do desenvolvedor abertas, navegue até a Página 3:

Observe que uma nova solicitação XHR é feita para: /content/wknd-spa-angular/us/en/home/page-2/page-3.model.json

O Gerenciador de Modelos do AEM entende que o conteúdo JSON da Página 3 não está disponível e aciona automaticamente a solicitação XHR adicional.

Continue navegando no SPA usando os vários links de navegação. Observe que nenhuma solicitação XHR adicional é feita e que nenhuma atualização de página completa ocorre. Isso torna o SPA rápido para o usuário final e reduz as solicitações desnecessárias de volta para o AEM.

Experimente os deep links navegando diretamente para: http://localhost:4502/content/wknd-spa-angular/us/en/home/page-2.html. Observe que o botão Voltar do navegador continua funcionando.