Como organizar projetos Angular? O artigo a seguir compila e compartilha 5 dicas práticas para gerenciar projetos Angular. Espero que seja útil para todos! 
Entrada front-end (vue) para curso de domínio: entre no aprendizado
À medida que novos recursos são lançados, Web apps se tornam cada vez maiores. Na jornada DevOps de uma empresa, esse tipo de mudança de versão acontece todos os dias. [Tutoriais relacionados recomendados: "tutorial angular"]
Em um ciclo de lançamento tão rápido, o código pode rapidamente se tornar complicado. Principalmente projetos desenvolvidos baseados em JavaScript , como NextJS ou Angular.
Aqui estão nossas 5 práticas recomendadas para gerenciar projetos Angular para máxima legibilidade, capacidade de manutenção e escalabilidade.
Muitos núcleos de aplicativos únicos são bases de código com classes inchadas. Pela sua natureza, estes programas inchados são difíceis de manter. Eles são frágeis no sentido de que alterar uma linha de código pode ter efeitos catastróficos em todo o programa. O princípio da responsabilidade única pode prevenir estes problemas.
O princípio da responsabilidade única significa que um componente tem uma e apenas uma função.
A construção de aplicativos usando essa abordagem resulta em uma estrutura modular na qual o aplicativo é interligado por meio desses blocos de código.
Usar essa abordagem pode tornar os programas mais legíveis e fáceis de manter. Ele também pode localizar facilmente funções específicas no aplicativo.
Para ter certeza de que seu código atende a esse requisito, pergunte-se:这代码是干什么的？ Se sua resposta contiver a palavra-chave and , você precisará refatorar seu código em um código de responsabilidade única.
Construir e estender aplicações Angular é um exercício contínuo. Com o tempo, organizar seus projetos usando o princípio de responsabilidade única tornará seus aplicativos limpos, legíveis e fáceis de manter.
Módulos em Angular são a implementação de um princípio único. No Angular , cada módulo representa uma funcionalidade separada e independente.
Angular fornece vários módulos de tipo para especificar como agrupá-los ou organizá-los logicamente.
Essencial
O módulo Core é um NgModule usado para instanciar o aplicativo e carregar funções principais para uso global.
Portanto, qualquer serviço singleton deve ser implementado no módulo principal. Cabeçalho, rodapé ou barra de navegação são módulos deste tipo.
Todos os serviços (serviços singleton) que possuem uma e apenas uma instância por aplicação devem ser implementados no módulo principal. Por exemplo, serviço de autenticação ou serviço de usuário.
Recurso
Os módulos de função representam o código que cria a funcionalidade do aplicativo. Por exemplo, em um aplicativo de compras online, teríamos a função de adicionar itens ao carrinho de compras e um módulo separado para pagamento.
Compartilhado
Os módulos compartilhados consistem em módulos que podem ser combinados para criar novas funcionalidades. Por exemplo, a função de pesquisa pode ser usada para múltiplas funções na plataforma.
Estruturar seu código dessa forma torna as coisas mais fáceis de localizar e aumenta as chances de reutilização do código.
Os arquivos de estilo podem ficar rapidamente desorganizados se não seguirem uma estrutura comum. Padrão de prática recomendada geral 7-1 , que usa 7 pastas e 1 arquivo, conforme mostrado abaixo:
App – a pasta principal do projeto
Resumo - A seção abstrata, contendo todas as variáveis, mixins e componentes semelhantes
Núcleo - Contém layout, redefinição e código padrão para todo o site
Componentes – Contém estilos para todos os componentes a serem criados para um site, como botões, guias e modais
Layout – Contém os arquivos necessários para definir o layout do site, como cabeçalhos e rodapés
Páginas - Contém estilos para cada página específica
Vendors - Esta pasta opcional é adequada para a estrutura de bootstrap usada pelo projeto, como bootstrap
Crie um novo arquivo all.scss em cada pasta que contenha todas as atribuições dessa pasta específica.
Muitos serviços são projetados para serem executados globalmente. Então, em alguns casos, um componente requer um serviço. As práticas tradicionais de componentes de codificação recomendam o princípio da responsabilidade única.
Sob esta abordagem, serviços e componentes são escritos como projetos separados.
Mas o que acontece quando você considera a remoção dos componentes desses serviços? O resultado é um código morto, o que só torna o armazém mais confuso. Nesse caso, a prática recomendada é colocar o serviço dentro do componente.
Dessa forma, a manutenção de componentes e serviços fica mais fácil.
Uma estrutura de arquivos aninhados é inerentemente mais fácil de navegar do que um sistema de arquivos simples que coloca todos os arquivos de código em um diretório.
Entretanto, à medida que o projeto se aproxima, a estrutura de arquivos do projeto pode se tornar bastante complexa. Embora isso facilite a localização do código, apresenta desafios ao escrever instruções de importação.
Quando uma estrutura de diretórios começa a crescer além de três ou quatro níveis, as instruções import podem se tornar muito longas e difíceis de ler.
Para resolver este problema, podemos configurar o alias do caminho no arquivo tsconfig.json. Neste arquivo, há um array chamado compilerOptions . Este é o alias do caminho que você configura em seu aplicativo.
Quando o código é compilado, os aliases de caminho definidos nesta matriz são substituídos por caminhos reais. O valor de cada caminho é um objeto de valor-chave que contém o caminho e o alias reais.
Construir e estender aplicações Angular é um exercício contínuo.