Estrutura do projeto explicada
Explore os arquivos gerados pela CLI.
Estrutura do projeto explicada é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Explicação da estrutura do projeto
Um espaço de trabalho Angular tem uma organização previsível. Conhecer os principais arquivos e pastas ajuda você a navegar por qualquer projeto.
A pasta src
A pasta src/ contém o código-fonte da sua aplicação: o ponto de entrada, o código da aplicação e recursos globais, como index.html e estilos.
main.ts
src/main.ts é o ponto de entrada da aplicação. Ele inicializa o componente raiz com bootstrapApplication.
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig);index.html
src/index.html é a única página HTML. O corpo dela contém o seletor do componente raiz, onde o Angular renderiza a aplicação.
<!-- inside body -->
<!-- <app-root></app-root> -->A pasta app
src/app/ contém seus componentes, serviços, rotas e configurações. Um projeto novo inclui app.component, app.config.ts e app.routes.ts.
Arquivos app.component
O componente raiz geralmente tem uma classe .ts, um modelo .html e uma folha de estilos .css (ou .scss), além de um arquivo de teste .spec.ts.
app.config.ts
app.config.ts exporta uma ApplicationConfig com a matriz de provedores usada na inicialização, como o roteador e o cliente HTTP.
app.routes.ts
app.routes.ts exporta a matriz de definições de rotas consumida por provideRouter.
import { Routes } from '@angular/router';
export const routes: Routes = [];angular.json
Na raiz do espaço de trabalho, angular.json configura a CLI: destinos de compilação, caminhos de saída, recursos, estilos e opções de execução para cada projeto.
package.json e tsconfig
package.json lista as dependências e os scripts do npm. Os arquivos tsconfig.json configuram o compilador TypeScript para a aplicação e os testes.
public ou assets
Os arquivos estáticos (imagens, fontes e favicon) ficam em uma pasta public ou assets e são copiados para a saída da compilação conforme configurado em angular.json.
Verificação rápida: estrutura
Identifique o ponto de entrada.
Recapitulação: estrutura
Você explorou o espaço de trabalho: src/ para o código-fonte, main.ts como ponto de entrada, index.html como página hospedeira, app/ para componentes e configurações e angular.json para a configuração da CLI. A seguir: geração de código com a CLI.
Perguntas Frequentes
A aula “Estrutura do projeto explicada” é grátis?
Sim — o texto completo de “Estrutura do projeto explicada” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Estrutura do projeto explicada”?
Explore os arquivos gerados pela CLI. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Estrutura do projeto explicada”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Gerando um novo projeto
- Estrutura do projeto explicada
- Gerando código com ng generate
- Compilando e disponibilizando