Entendendo a estrutura do Angular
O que um projeto Angular precisa ter para rodar? O que cada parte faz?
Em uma das aulas nos foi apresentado o projeto padrão do StackBlitz para conseguirmos codar em Angular virtualmente sem precisar instalar nada. Neste projeto o Felipe Aguiar explicou como um projeto em Angular tem e o que cada parte faz. Este artigo serve como um exercício de memorização e como um facilitador de aprendizado aos demais que estiverem com dificuldades com esta linguagem que muitos julgam como difícil.
1. A pasta src:
Nela há tudo o que é codável. É seu código fonte.
<Macete! O que está fora da pasta src são arquivos de configuração.>
2. Index.mthl:
O index.html é responsavel por renderizar o seu projeto, ou seja, processá-lo e o enviar para o seu browser, como o google, por exempo, desenhar na tela.
3. A main:
Tem as configurações necessárias, pois são responsaveis pela inicializar da sua aplicação.
4. polyfils:
Não é utilizada com tanta frequência, porém é extremamente útil quando é propício. Esse arquivo tem como objetivo resolver a compatibilidade de versoes, sendo assim, conseguir rodar códigos que não são compatíveis com browsers desatualizados.
Alguns browsers não rodam codigos como Foreach, por exemplo.
5. Styles:
Esse aqruivo css é responsável pela estilização da sua aplicação.
6. Pasta App:
6.1 tem html dentro proprio/ 6.2 css proprio/ 6.3 Tem o type script (component que importa seu respectivo css e html.)
Exemplo de component
@Component({
Define como será selecionado como será reconhecido e chamado no projeto.
selector: my-app" (chamado no html externo)
Define a estrutura html chamando o arquivo pela sua localização.
templateUrl: './app.component.html'
Define a estilização em css chamando o arquivo pela sua lozalização.
styleUrls: './app.component.css'
})
6.2 Module:
Arquivo responsável por informar ao coração do angular (o arquivo que possui todos os components nele) quais são os components que ele deve reconhecer.
7. Arquivo package.json: responsavel pelo javascrpit atraves do node, com suas configurações e as definições basicas
8. Arquivo tsconfig.json: responsavel pelo typescript, com suas configurações e definições basicas
9. Angular.json: configurações do angular.
