Ngx-dynamic-pages NPM

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: