Arquitetura Angular na UFG

Arquitetura frontend de sistemas em angular da Universidade Federal de Goiás.

Arquitetura

Este projeto é uma biblioteca de componentes com design e métodos reutilizaveis de front-end em Angular.

Instalação

Instale o pacote arquitetura via npm:

$ 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

npm i ng-breadcrumbs-go

@angular/material

ng add @angular/material

hammerjs

npm i hammerjs

@angular/flex-layout

npm i @angular/flex-layout

Configuração

Importe o módulo da arquitetura no app.module.ts:

import { ArquiteturaModule } from 'arquitetura';

Declare o uso do módulo, passando como parâmetro o arquivo de environment:

ArquiteturaModule.forRoot(environment)

Adicione o componente lib-arquitetura no arquivo app.component.html:

<lib-arquitetura 
  *ngIf="usuario"
  [dadosSistema]="dadosSistema"
  [menuPessoal]="menuPessoal"
  [sistema]="sistema"
  [perfilPadrao]="perfilPadrao"
  [usuario]="usuario">
</lib-arquitetura>

Atributos

| Atributo | Descrição | Tipo | |---------------|------------------------------------------------------------------|-------------| | dadosSistema | Dados gerais do sistema (Nome, dados de rodapé) | DadosSistema| | menuPessoal | Menu de configurações do usuário logado (Menu superior direito) | MenuPessoal | | usuario | Dados do usuário logado (Nome, login, codigos) | string | | sistema | Código do sistema no SAS | string | | perfilPadrao | Perfil padrão do sistema no SAS | string |

Perceba que existem atributos obrigatórios para montar o layout padrão, um exemplo dos atributos no app-component.ts abaixo:

dadosSistema = new DadosSistema(
    'Sistema',
    environment.app_url,
    new DadosRodape(
      '<URL SVG DA LOGO>', // Arquivo da logo
      '<URL DA LOGO SELECIONAVEL>', //URL do sistema ou site da logo
      [
        '<PRIMEIRA LINHA RODAPE>',
        '<SEGUNDA LINHA RODAPE>',
        '<TERCEIRA LINHA RODAPE>'
      ],
      ['+55 (62) 3521-1000', '[email protected]']
    )
  );
  usuario!: Usuario;
  menuPessoal: MenuPessoal[] = [];
  sistema = 'CRACHA-2.0';
  perfilPadrao = 'CRACHA_DEFAULT';


  ngOnInit() {
    this.usuario = new Usuario('<LOGIN DO USUARIO>', undefined, '<NOME DO 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, '/#/'));
  }

Arquivos Estaticos

Importar arquivos estaticos no angular.json:

"styles": [
  "./node_modules/arquitetura/style/_styles.scss",
  "./node_modules/arquitetura/style/themes.scss",
  .
  .
  .
],

Pipes

Pipes

Services

Services

Componentes

Snackbar

Fonte de Dados

Modal Detalhes

Alerta

Tabela

Tabela customizável

Legenda

Badge

Author

👤 Ricardo Borges

• GitHub: @ricardoborges