Sugestão de arquitetura para App Angular 8 (v 8.0.3).
Dar clone nesse Projeto e logo após npm i
para instalar a última versão das dependências do app e iniciar o desenvolvimento.
Digite npm start
para começar. O browser será aberto automaticamente em http://localhost:4200/
.
O guarda de rota está na pasta guards
o auth.guard.ts
ele depende de um serviço de autenticação que contem o token e retorna se o usuário está autenticado ou não a partir daí deixa o usuário navegar.
Sempre que possível seguir o style guide do angular para seguir o padrão e facilitar outros devs angular a entender o código, coisas como separar variáveis, métodos entre privados e públicos em ordem alfabética, não ultrapassar 700 linhas em um .ts, ter funções com até 70 linhas e por ai vai.
- Style Guide Angular - Angular.io
Ao adicionar modulos certifique-se de adicionar seu caminho aos paths do arquivo tsconfig.json
para simplificar os caminhos dos imports.
Reinicie sua IDE para certificar de que os paths serão reconhecidos.
"paths": {
"core/*": ["src/app/core/*"],
"guards/*": ["src/app/guards/*"],
"feature/*": ["src/app/feature/*"],
"shared/*": ["src/app/shared/*"]
}
Adicione os end-points da sua api no arquivo proxy.conf.json
para evitar problemas com CORS (desenvolvimento apenas) neste projeto não é necessário devido ao cors ser liberado na API mas é um recurso interessante que está sendo utilizado.
- Fazendo o CORS seu amigo - By Hiago.
- Proxying to a backend server - Angular.io.
{
"/api": {
"target": "https://reqres.in",
"secure": true,
"changeOrigin": true,
"logLevel": "debug"
}
}
Na raiz do app há um interceptor na pasta interceptors
o arquivo custom-http.interceptor.ts
para que você possa interceptar os requests feitos pela sua aplicação,
é possível adicionar/remover headers, exibir mensagens de erro padrão baseado no retorno do request/response e etc. Para mais informações visite a documentação do angular:
- Intercepting-requests-and-responses - Angular.io.
Através do interceptor é que adiciono o header de autenticação.
As pastas estão organizadas desta maneira, cada módulo tem suas pastas component
, directives
, models
, pages
, pipes
e services
, dentro das pastas existe um arquivo index.ts
para exportar os arquivos da pasta para deixar mais simples muitos imports.
Existem 4 módulos são eles auth
responsável pela autenticação, core
que contém o que é essencial para o app funcionar, users
integração com a API solicitada e shared
que compartilha tudo o que deve ser comum a todos os módulos.
📦src
┣ 📂app
┃ ┣ 📂auth
┃ ┃ ┣ 📂components
┃ ┃ ┣ 📂models
┃ ┃ ┣ 📂pages
┃ ┃ ┣ 📂pipes
┃ ┃ ┣ 📂services
┃ ┃ ┣ 📜auth-routing.module.ts
┃ ┃ ┗ 📜auth.module.ts
┃ ┣ 📂core
┃ ┃ ┣ 📂components
┃ ┃ ┣ 📂directives
┃ ┃ ┣ 📂models
┃ ┃ ┣ 📂pages
┃ ┃ ┣ 📂pipes
┃ ┃ ┣ 📂services
┃ ┃ ┣ 📜core.component.ts
┃ ┃ ┗ 📜core.module.ts
┃ ┣ 📂guards
┃ ┃ ┗ 📜auth.guard.ts
┃ ┣ 📂interceptors
┃ ┃ ┗ 📜custom-http.interceptor.ts
┃ ┣ 📂shared
┃ ┃ ┣ 📂components
┃ ┃ ┣ 📂directives
┃ ┃ ┣ 📂models
┃ ┃ ┣ 📂pages
┃ ┃ ┣ 📂pipes
┃ ┃ ┣ 📂services
┃ ┃ ┗ 📜shared.module.ts
┃ ┣ 📂users
┃ ┃ ┣ 📂components
┃ ┃ ┣ 📂directives
┃ ┃ ┣ 📂models
┃ ┃ ┣ 📂pages
┃ ┃ ┣ 📂pipes
┃ ┃ ┣ 📂services
┃ ┃ ┣ 📜users-root.component.html
┃ ┃ ┣ 📜users-root.component.scss
┃ ┃ ┣ 📜users-root.component.ts
┃ ┃ ┣ 📜users-routing.module.ts
┃ ┃ ┗ 📜users.module.ts