Arquitetura frontend de sistemas em angular da Universidade Federal de Goiás.
Arquitetura frontend de sistemas em angular da Universidade Federal de Goiás.
Este projeto é uma biblioteca de componentes com design e métodos reutilizaveis de front-end em Angular.
Instale o pacote arquitetura via npm:
``bash`
$ npm i arquitetura
Este projeto possui algumas dependencias, hammerjs, flex-layout, material angular e uma biblioteca de breadcrumbs. Para isso, instale estas dependências.
#### ng-breadcrumbs-go
`bash`
npm i ng-breadcrumbs-go
#### @angular/material
`bash`
ng add @angular/material
#### hammerjs
`bash`
npm i hammerjs
#### @angular/flex-layout
`bash`
npm i @angular/flex-layout
Importe o módulo da arquitetura no app.module.ts:
`js`
import { ArquiteturaModule } from 'arquitetura';
Declare o uso do módulo, passando como parâmetro o arquivo de environment:`json`
ArquiteturaModule.forRoot(environment)
Adicione o componente lib-arquitetura no arquivo app.component.html:
`html`
[dadosSistema]="dadosSistema"
[menuPessoal]="menuPessoal"
[sistema]="sistema"
[perfilPadrao]="perfilPadrao"
[usuario]="usuario">
Perceba que existem atributos obrigatórios para montar o layout padrão, um exemplo dos atributos no app-component.ts abaixo:
`js
dadosSistema = new DadosSistema(
'Sistema',
environment.app_url,
new DadosRodape(
'
'
[
'
'
'
],
['+55 (62) 3521-1000', 'dtel@ufg.br']
)
);
usuario!: Usuario;
menuPessoal: MenuPessoal[] = [];
sistema = 'CRACHA-2.0';
perfilPadrao = 'CRACHA_DEFAULT';
ngOnInit() {
this.usuario = new Usuario('
this.menuPessoal.push(new MenuPessoal('Perfil', MenuPessoal.ICON_MATERIAL, '/#/'));
this.menuPessoal.push(new MenuPessoal('Configurações',MenuPessoal.ICON_MATERIAL, '/#/'));
this.menuPessoal.push(new MenuPessoal('Sair', MenuPessoal.ICON_MATERIAL, '/#/'));
}
`
:`
"styles": [
"./node_modules/arquitetura/style/_styles.scss",
"./node_modules/arquitetura/style/themes.scss",
.
.
.
],
👤 Ricardo Borges
* GitHub: @ricardoborges