Aplicações geradas com a opção white-label, têm a seguinte estrutura:
O componente base da aplicação Angular. O componente usa a url para se identificar, solicita sua configuração do serviço de configuração e delega a customização visual ao serviço de tema.
O método whoami e responsável por identificar o tenant baseado na url da aplicação.
Serviço de tema responsável por aplicar configurações visuais ao DOM.
Serviço de configuração que é efetivamente um repositório dos dados de configuração, no sentido do repository pattern. ConfigurationService tem como dependência ConfigurationInMemoryService, ConfigurationCacheService, ConfigurationApiService que servem como fontes de dados.
O serviço de configuração consulta os dados na seguinte ordem de preferência:
- Dados em memória
- Dados em cache, se o cache estiver habilitado
- API
O uso do cache pode ser habilitado e desabilitado pelo serviço de configuração.
Os dados sempre são guardados em memória após consulta independente da fonte.
De forma geral, este é o serviço que deve ser injetado nos componentes da aplicação que dependem de configuração.
Serviço responsável por fazer uma requisição http para buscar a configuração.
Serviço responsável por usar o local storage para buscar e guardar a configuração.
Serviço responsável por buscar e guardar a configuração em memória.
Depois de gerar uma aplicação Angular com a arquitetura white label. Siga estes passos para experimentar com a configuração.
Primeiramente, configure os recursos da aplicação, como a configuração de SSO.
npm install
A aplicação angular starter faz uma requisição GET para http://localhost:3000/config para buscar a configuração. O projeto tem um json-server que pode ser usado para responder essa requisição.
Em um terminal rode o servidor:
npm run server
Em outro terminal rode a aplicação Angular:
npm start
Para mudar as respostas do servidor e visualizar como a aplicação se comporta, modifique o arquivo /server/db.json e atualiza a página do browser onde a aplicação está rodando.
Repare nos exemplos a seguir como o tema, a logo e a disponibilidades de funcionalidades são configurados de acordo com o a url da aplicação e o conteúdo do arquivo /server/db.json.
{
"theme": {
"primary-color": "teal"
},
"logoImageUrl": "https://bulma.io/images/bulma-logo.png",
"features": ["sales"]
}
{
"theme": {
"primary-color": "#1E88E5"
},
"logoImageUrl": "https://raw.githubusercontent.com/wizsolucoes/angular-white-label/master/docs/logowiz.png",
"features": ["sales", "documentation"]
}