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.

Primeiros passos • Como funciona • Autor

Exemplo de implementação

1. Instalação:

npm install ngx-dynamic-pages

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

import { ContentComponent } from "../components/content/content.component";
import { FooterComponent } from "../components/footer/footer.component";
import { HeaderComponent } from "../components/header/header.component";

export const components = [
    {
        key: 'header',
        component: HeaderComponent
    },
    {
        key: 'content',
        component: ContentComponent
    },
    {
        key: 'footer',
        component: FooterComponent
    }
];

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

json-parametrizado.ts

import { IJsonParameterize } from "ngx-dynamic-pages";

export const json: IJsonParameterize[] = [
    {
        "route": "/home",
        "components": [
            {
                "componentName": "header",
                "inputs": {
                    "title": "Header component",
                    "titleColor": "white",
                    "bgColor": "black",
                    "padding": "10px"
                }
            },
            {
                "componentName": "content",
                "inputs": {
                    "height": "500px",
                    "bgColor": "purple"
                }
            },
            {
                "componentName": "footer",
                "inputs": {
                    "height": "100px",
                    "bgColor": "blue", 
                    "description": "I am footer component"
                }
            }
        ]
    }
]

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

@NgModule({
  declarations: [
    AppComponent,
    ButtonComponent,
    HomeComponent,
    AboutComponent,
    HeaderComponent,
    ContentComponent,
    FooterComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    NgxDynamicPagesModule.forRoot(
      {
        jsonParameterize: json,
        storeComponents: components
      } as IDynamicPagesConfig
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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:

import { NgxDynamicPagesComponent } from 'ngx-dynamic-pages';

const routes: Routes = [
  {
    path: "**",
    component: NgxDynamicPagesComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

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

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

Ao navegarmos para a rota /home, configurada no json, o resultado será:

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.

export const components = [
    {
        key: 'header',
        component: HeaderComponent
    },
    {
        key: 'content',
        component: ContentComponent
    },
    {
        key: 'footer',
        component: FooterComponent
    }
];

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.

  [
    {
      "route": "/home",
      "components": [
        {
          "componentName": "header",
          "inputs": {
            "title": "Any title to my header"
          }
        }
      ]
    }
  ]

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.

const routes: Routes = [
  {
    path: "**",
    component: NgxDynamicPagesComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

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

Carlos Daniel   •   Software Engineer   •   AI enthusiast

"Good logic helps us solve problems in our lives, but feelings, perceptions and love help solve what we cannot with logic."