Ngx-dynamic-pages NPM

Criar e manter uma Single Page Application de maneira totalmente dinâmica e reutilizável. Foque apenas na construção e qualidade dos componentes e através de um arquivo JSON você será capaz de "invocá-los" em qualquer rota.

Status

Primeiros passos

Instalar com npm: npm install ngx-dynamic-pages

Criar arquivo que retorna uma lista de componentes disponíveis para serem consumidos através do JSON Parametrizado.

store-components.ts

Criar arquivo que exporta um json estruturado (JSON Parametrizado):

json-parametrizado.ts

Importar e configurar o módulo NgxDynamicPagesModule com os arquivos anteriormente criados:

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

Como funciona

Ao contrário do desenvolvimento convencional de SPAs, onde cada página possui sua pŕopria rota, no Dynamic Pages existe apenas um único ponto de entrada.

Por exemplo, como criamos uma página home?

Primeiro precisamos criar o componente HomeComponent, adicioná-lo no arquivo de rotas como path home e adicionar os componentes necessários para essa página.

E se quisermos uma página about? contacts? O processo seria o mesmo. Com Dynamic Pages você apenas cria as peças e define como e onde elas serão invocadas.

A store-components.ts armazena uma lista de componentes, onde cada componente possui um identificador (key) e sua própria referência (component). É através dessa key que dizemos qual componente deverá ser exibido na página.

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

O arquivo json-parametrizado.ts deverá retornar uma lista de rotas onde cada rota possui uma lista de componentes.

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

No arquivo app-routing.module.ts devemos ter a seguinte configuração:

onde precisamos configurar o path do NgxDynamicPagesComponent como (**). Dessa forma as rotas que forem configuradas no json-parametrizado.ts serão interpretadas e o processo de criação dos componentes irá acontecer.