3.0.7 • Published 1 year ago

ngx-dynamic-pages v3.0.7

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

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

Static Badge Static Badge Static Badge Static Badge

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.

PropriedadesDescrição
keyIdentificador do componente. Usado posteriormente no json-parametrizado.ts para ser renderizado na página
componentClasse 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.

PropriedadesDescrição
routePath que acessamos na url do navegador, ex: localhost:4200/home
componentsLista de componentes que serão criados na página
componentNameIdentificador do componente, o mesmo valor registrado em store-components.ts
inputsDados 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

3.0.7

1 year ago

3.0.6

1 year ago

3.0.5

1 year ago

2.0.2

1 year ago

2.0.5

1 year ago

2.0.4

1 year ago

2.0.1

1 year ago

2.0.0

1 year ago

3.0.4

1 year ago

3.0.3

1 year ago

3.0.2

1 year ago

3.0.1

1 year ago

3.0.0

1 year ago

1.1.9

1 year ago

1.1.8

1 year ago

1.1.7

1 year ago

1.1.6

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.2

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago