Construa Single Page Applications de forma totalmente dinâmica e reutilizável. Concentre-se na qualidade dos seus componentes e defina sua estrutura e conteúdo através de um arquivo JSON.

Status

Primeiros passos

1. Instalação:

2. Crie um arquivo para registrar seus componentes:

Este arquivo retornará uma lista de componentes disponíveis para serem consumidos através do JSON Parametrizado.

store-components.ts

3. Defina a estrutura da sua SPA com um arquivo JSON:

json-parametrizado.ts

4. Configure o módulo NgxDynamicPagesModule com os arquivos criados:

5. Configure o roteamento raiz com um path coringa:

Configurar o arquivo de roteamento raiz com um path coringa (**), isto é, aceita qualquer url definida no JSON Parametrizado:

6. Atualize o arquivo app.component.html com o wrapper dinâmico:

<ngx-dynamic-Pages></ngx-dynamic-Pages>

Como funciona

Dynamic Pages simplifica o desenvolvimento de SPAs. Ao invés de criar rotas individuais para cada página, você define a estrutura e o conteúdo da sua aplicação através de um arquivo JSON.

1. Registro de Componentes:

O arquivo store-components.ts armazena a lista de componentes disponíveis para uso na sua aplicação. Cada componente possui um identificador (key) que será utilizado no arquivo JSON para referenciá-lo.

| Propriedades | Descrição | | ----------- | ----------- | | key | Identificador do componente. Usado posteriormente no json-parametrizado.ts para ser renderizado na página | | component | Classe do componente |

2. Definição da Estrutura:

O arquivo json-parametrizado.ts define a estrutura da sua SPA. Ele contém uma lista de rotas, onde cada rota define os componentes a serem exibidos e seus respectivos parâmetros.

| Propriedades | Descrição | | ----------- | ----------- | | route | Path que acessamos na url do navegador, ex: localhost:4200/home | | components | Lista de componentes que serão criados na página | | componentName | Identificador do componente, o mesmo valor registrado em store-components.ts | | inputs | Dados de entrada do componente |

3. Roteamento Dinâmico:

O componente NgxDynamicPagesComponent, configurado com um path coringa (**) no arquivo app-routing.module.ts, intercepta todas as rotas definidas no arquivo JSON. Ele então utiliza as informações do JSON para criar os componentes correspondentes, com os parâmetros especificados.

4. Wrapper fantasma:

No arquivo app.component.html temos o seguinte código:

<ngx-dynamic-pages></ngx-dynamic-pages>

No qual consiste em um ponto de entrada para os componentes criados dinâmicamente. Muito parecido com o router-outlet

Autor

Carlos Daniel   •   Software Engineer   •   AI enthusiast