This is an old version of this page. You can view the most recent version or browse the history.

frontend

Home	Escopo	Processo	Design/Mockups	Configuração	Arquitetura	Gerência	Código	BD	Qualidade	Frontend	Backend	Analytics

Estrutura da Aplicação Frontend em Angular

Arquitetura do projeto:

"Feature-based Architecture" ou "Modular Architecture": O código é dividido em módulos com base nas funcionalidades (features) da aplicação. Cada módulo agrupa seus próprios componentes, serviços, páginas e outros recursos relacionados, promovendo a separação de responsabilidades e facilitando a escalabilidade e manutenção do projeto. Além disso, a arquitetura utilizada inclui diretórios para layouts, assets e ambientes. Essa abordagem permite a reutilização de componentes e o isolamento de funcionalidades específicas, facilitando a colaboração em equipes e o crescimento do projeto ao longo do tempo.

Tecnologias Principais

Angular: Framework que permite construir interfaces web com componentes reutilizáveis usando TypeScript.

Bibliotecas e Ferramentas Específicas

Padrões e Arquiteturas

Arquitetura Limpa: Princípios para estruturar aplicações de forma a separar claramente as preocupações.

Estrutura de Pastas

src/
│
├── app/                          # Diretório principal do aplicativo
│   ├── components/                     
│   │   └── component-x/          # Pasta para aramazenar arquivos de um componente específico
│   │       ├── component-x.component.css
│   │       ├── compoentn-x.component.html
│   │       ├── compoentn-x.component.spec.ts
│   │       └── compoentn-x.component.ts
|   | 
│   ├── modules/                  # Pasta em que se localiza os módulos criados
|   |
│   ├── features/                 # Módulos específicos de funcionalidades
│   │   ├── feature-a/            # Módulo da funcionalidade A
│   │   │   ├── components/       # Componentes específicos da funcionalidade A
│   │   │   ├── pages/            # Páginas específicas da funcionalidade A
│   │   │   └── services/         # Serviços específicos da funcionalidade A
│   │   ├── feature-b/            # Módulo da funcionalidade B
│   │   │   ├── components/       # Componentes específicos da funcionalidade B
│   │   │   ├── pages/            # Páginas específicas da funcionalidade B
│   │   │   └── services/         # Serviços específicos da funcionalidade B
│   │   └── ...                   # Outros módulos de funcionalidades
│   │
│   ├── layouts/                  # Layouts de aplicação (e.g., MainLayout, AuthLayout)
│   │   ├── main-layout/          # Layout principal
│   │   └── auth-layout/          # Layout de autenticação
│   │
│   ├── assets/                   # Arquivos estáticos (imagens, fontes, etc.)
│   │   ├── images/               # Imagens do projeto
│   │   ├── fonts/                # Fontes do projeto
│   │   └── styles/               # Estilos globais (e.g., SCSS, CSS)
│   │
│   └── environments/             # Arquivos de configuração de ambiente (e.g., dev, prod)
│       ├── environment.ts        # Configurações de desenvolvimento
│       └── environment.prod.ts   # Configurações de produção
│
├── styles/                       # Estilos globais (CSS, SCSS)
│
├── index.html                    # Página HTML principal
│
├── main.ts                       # Ponto de entrada do aplicativo Angular
│
└── polyfills.ts                  # Arquivo de polyfills para compatibilidade de navegadores

Comandos para desenvolvimento:

Build do projeto: ng build
Para rodar a aplicação: ng serve
Para criar um component: ng generate component