Exemplo de estrutura de aplicativo para escabilidade e boas praticas de desenvolvimento com Clean Code, Clean Architecture e Orientação a Objetos e testes de unidade, roteamento, autenticação, extensões de serviço HTTPS.
Baixe o repositório:
git clone git@bitbucket.org:ciandt_it/poc_angular.git
- Instale as dependências:
npm install
- Inicie o servidor de desenvolvimento e abra localhost:4200 em seu navegador:
npm start ou ng serve
| - app
| | - core
| | | - [+] configs
| | | - [+] guards
| | | - [+] interceptors
| | | - layouts
| | | | - [+] footer
| | | | - [+] navbar
| | | - models
| | | | - [+] categorias
| | | - services
| | | | - [+] categorias
| | | - core.module.ts
| | - modules
| | | - categorias
| | | | - [+] list
| | | | - categoria.module.ts
| | | | - categoria.service.ts
| | | | - categoria-routing.module.ts
| | - pages
| | | - [+] login
| | | - [+] erros
| | - shared
| | | - [+] components
| | | - [+] directives
| | | - [+] enums
| | | - [+] pipes
| | | - [+] validators
| | | - shared.module.ts
É literalmente sua palavra em inglês: o núcleo [da aplicação]. Lá está tudo que é essencial para o funcionamento.
-
Guards: É onde você irá por os guardas de rota que criou, como por exemplo aquela para proteger rotas que o usuário deve estar autenticado.
-
Interceptors: É a pasta que conterá nossos interceptadores de requisições, um exemplo é um interceptor cujo sua responsabilidade é injetar o token obtido no header da requisição
-
Layouts: É a pasta que armazena os layouts pré-definidos criados da aplicação. Ex: NavBar e Footer.
-
Models: É a pasta que armazena os modelos necessários para as requisições.
-
Services: É a pasta que armazena todas as chamadas para o back via http serpada pelos módulos.
É importante que você carregue (importando) o core.module.ts no app.module.ts da aplicação. Fazemos isso para carregar todo o seu conteúdo na inicialização da aplicação, pois é o conteúdo núcleo dela.
É simplesmente a pasta que contém definitivamente aquilo que dá valor ao sistema, ou seja, as entregas. Modules são as características do sistema. Cada item dentro dessa pasta tem seus próprios componentes.
Aqui fica tudo que é compartilhado e reutilizado em toda aplicação, não tem segredo. As pastas filhas são apenas para agrupar por tipo de conteúdo — pipes com pipes, components com components e assim por diante. É importante que importe a shared.module.ts também em seu app.module.ts e em todos os outros demais modules criados. Fazemos isso, pois em tese tudo que está na shared.module.ts está disponível para ser utilizado.
- Abra um novo terminal e inicie o servidor:
npm run server ou ng serve
- Inicie o servidor de test:
npm run test ou ng test
-
Vá para a pasta do projeto web
./coverage
. -
Visualize o relatório de teste na web usando a extensão do vsCode LiveServer