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.