Scene
Introdução ao Angular, instalando o Angular Cli, criando o tutorial de entrada do projeto Angular:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017
A estrutura de diretórios do projeto Angular criada é a seguinte
A função da estrutura de diretórios específica é a seguinte
Nota:
Blog:
https://blog.csdn.net/badao_liumang_qizhi
número preocupação pública de
programas arrogante macaco
relacionados à aquisição de programação e-books, tutoriais e impulso para download gratuito.
Alcançar
Análise geral da estrutura de diretórios
Diretório src
app/ |
Contém arquivos de componentes que definem dados e lógica do aplicativo. |
assets/ |
Contém imagens e outros arquivos de recursos estáticos que devem ser copiados como na criação do aplicativo. |
environments/ |
Contém opções de configuração de compilação para ambientes de destino específicos. Por padrão, há um ambiente de desenvolvimento padrão sem nome e um ambiente de produção ("prod"). Você também pode definir outras configurações do ambiente de destino. |
favicon.ico |
Usado como o ícone do aplicativo na barra de guias. |
index.html |
Quando alguém visita seu site, a principal página HTML que fornece o serviço. A CLI adicionará automaticamente todos os arquivos JavaScript e CSS ao criar seu aplicativo. Portanto, você geralmente não precisa adicionar tags ou manualmente . |
main.ts |
O principal ponto de entrada do aplicativo. Compile o aplicativo com o compilador JIT e, em seguida, guie o módulo raiz do aplicativo (AppModule) para execução no navegador. Você também pode usar o compilador AOT sem alterar nenhum código , desde que adicione um sinalizador à CLI e aos comandos . |
polyfills.ts |
Forneceu um script polyfill para suporte ao navegador. |
styles.sass |
Liste os arquivos CSS que denominam o projeto. A extensão também reflete o pré-processador de estilo que você configurou para o projeto. |
test.ts |
O principal ponto de entrada para testes de unidade, com algumas configurações específicas do Angular. Você geralmente não precisa editar este arquivo. |
No diretório do aplicativo em Src
app/app.component.ts |
Defina a lógica do componente raiz do aplicativo, nomeado . Quando você adiciona componentes e serviços a um aplicativo, a visualização associada a esse componente raiz se torna a raiz da árvore da visualização . |
app/app.component.html |
Defina o modelo HTML associado ao componente raiz . |
app/app.component.css |
Uma folha de estilos CSS básica é definida para o componente raiz . |
app/app.component.spec.ts |
Um teste de unidade é definido para o componente raiz . |
app/app.module.ts |
Definido o módulo raiz nomeado , ele informará ao Angular como montar o aplicativo. Apenas um é declarado inicialmente aqui . Quando você adiciona mais componentes ao aplicativo, eles também devem ser declarados aqui. |
Arquivo de configuração da área de trabalho
.editorconfig |
Configuração do editor de código. Veja EditorConfig . |
.gitignore |
Especifique os arquivos que o Git deve ignorar e não precisa rastrear. |
README.md |
Documento de introdução para o aplicativo raiz. |
angular.json |
Especifique a configuração padrão da CLI para todos os projetos na área de trabalho, incluindo os itens de configuração usados pela CLI para construir, iniciar o servidor de desenvolvimento e ferramentas de teste, como TSLint , Karma e Transferidor . Para detalhes, consulte a seção Configuração da área de trabalho angular . |
package.json |
Configure as dependências do pacote npm disponíveis para todos os projetos no espaço de trabalho . Para o formato e conteúdo específicos deste arquivo, consulte a documentação do npm . |
package-lock.json |
Fornece informações de versão de todos os pacotes instalados no cliente npm . Para detalhes, consulte a documentação do npm . Se você estiver usando o cliente yarn, o arquivo é yarn.lock . |
src/ |
O arquivo de origem do projeto raiz. |
|
|
Um documento introdutório para o aplicativo raiz. |
tsconfig.json |
A configuração padrão do TypeScript para cada projeto na área de trabalho . |
tslint.json |
A configuração padrão do TSLint para cada projeto na área de trabalho . |
app.module.ts
É definido um módulo raiz chamado AppModule, que informa ao Angular como montar o aplicativo. Apenas um AppComponent é declarado inicialmente aqui. Quando você adiciona mais componentes ao aplicativo, eles também devem ser declarados aqui.
Pode ver sua localização
Este arquivo é o módulo raiz Angular e informa ao Angular como montar o aplicativo.
Abra este arquivo abaixo e explique sua estrutura em detalhes
Em seguida, abra app.component.ts para ver a composição do componente
