Conhecendo a estrutura de um projeto Angular
E ai pessoal, blz? Hoje não vamos ter live e nem vídeo, mas pra não deixar de compartilhar algum ensinamento com vocês, resolvi criar esse material como aula. E antes de mais nada, precisamos entender no que estamos mexendo. É claro que estou falando no Angular.
Hoje iremos navegar pelos diretórios e conhecer os arquivos que são criados em um projeto com o Angular CLI.
Como na aula passada vocês em “teoria” criaram um projeto novo com o comando ng new ‘nomedoprojeto’, viram que esse comando cria uma peculiar estrutura de arquivos. Esse comando criar um Scaffold, que é basicamente, uma junção de tudo o que precisamos para iniciar um projeto com o Angular.
Agora, para que possamos navegar e entender os arquivos criados pelo Angular CLI, precisaremos de uma IDE (Editor de Texto), que ira nos auxiliar nessa tarefa. Como já falei na aula passada nós iremos utilizar o Visual Studio Code, uma IDE que está sendo muito adotada pelos desenvolvedores por ser rápido e grátis(já mostrei como se instala). Para quem faltou a aula ele pode ser encontrado para download neste link.
Sem mais delongas vamos da uma olhada na estrutura de pastas do projeto gerado pelo Angular CLI:
O primeiro diretório do projeto é o e2e, dentro dele nós temos quatro arquivos: app.e2e-spec.ts, app.po.ts, protractor.conf.js e tsconfig.e2e.json. Estes arquivos são usados para fazer testes unitários. Por enquanto, não vamos nos ater nesta pasta, pois, não iremos fazer testes em nossa aplicação (vamos ser bem vida loca mesmo, uahuahhauhau).
Continuando temos a pasta node_modules, que é o diretório responsável por armazenar as nossas bibliotecas, quando nós adicionamos algo no nosso projeto com o comando npm ele modifica o arquivo package.json e gerencia os pacotes e as suas versões dentro desse diretório.
A pasta src é a pasta principal do nosso projeto, visto que, ele é o diretório da nossa aplicação. É nesta pasta que literalmente criamos a nossa aplicação, dentro dele nós vamos criar os nossos components, modules, services, directives … etc.
Dentro da pasta src, existem mais alguns arquivos e pastas, sendo eles: src/app, que é basicamente o nucleo da aplicação. Quando geramos qualquer componente, service, modules e etc, é nesta pasta que eles serão gerados. Dentro dela encontramos os seguintes aquivos:
app.component.css: Arquivo responsável pelo estilo do nosso módulo. Com o Angular nós trabalhamos com os estilos separados para cada componente, assim conseguimos ter um desacoplamento de estilos.
app.component.html: Arquivo HTML do nosso componente App, segue o mesmo pensamento que os arquivos de estilo.
app.component.spec.ts: Arquivo de teste do nosso componente, também não vamos usar, então pode ser deletado, mas caso queira deixar, não faz a menor diferença.
app.component.ts: Esse arquivo será a nossa classe do componente, conde faremos as funções dos botões, ações e interações que a aplicação vai ter.
app.module.ts: O Angular é um framework modular, ele precisa de um ou mais módulos para que possamos gerenciar os nossos componentes, esse módulo acaba sendo um default, mas podemos criar outros modules e chamar eles dentro dele.
Fora da pasta app e ainda dentro da pasta src, temos:
Assets: Esse diretório nos permite trabalhar com arquivos extras a nossa aplicação, como as nossas imagens. Esse diretório é configurado dentro do nosso arquivo angular.json, caso queira alterar ele para um outra pasta ou incluir mais, basta ir até arquivo angular.json e informar o nome do novo diretório.
Environments: Aqui nós temos dois arquivos .ts, um para o nosso ambiente de produção e um outro para o nosso ambiente de desenvolvimento. Nele nós podemos definir constantes “globais” em toda a aplicação.
favicon.ico: Este aquivo é uma pequena imagen que fica guardada no site para visualização pelo navegador. Geralmente são utilizados como logotipos em tamanho reduzido, nos sites de empresas, entidades e marcas quaisquer. Ele é aquele icone pequeno que fica ao lado do nome da pagina nos Browsers.
index.html: Esse seria o nosso arquivo html que é exibido no Browser, dentro dele rodamos a nossa SPA (Single Page Application).
main.ts: Esse é o arquivo principal da nossa Solution. Ele vem definido dentro do nosso arquivo angular.json, esse seria o arquivo que chama todos os outros arquivos e faz a nossa aplicação funcionar.
polyfills.ts: Esse arquivo funciona como um tradutor. Ex.: Nós precisamos utilizar algo novo do JavaScript(versão mais nova), mas os nossos navegadores só conseguem entender as versões velhas do JavaScript, então este arquivo irá interpretar(converter) e passar o código corretamente para os nossos navegadores.
styles.css: Como emtodos os nossos componentes tem o seu próprio arquivo .css, nós podemos utilizar esse arquivo para criar algo global como classes css gerais para nossa aplicação.
test.ts: Este arquivo é responsavel por realizar os nossos teste na aplicação. Também vamos deixar de lado.
Saindo agora do nosso diretório src, nós temos:
.angulardoc.json: Neste arquivo fica armazenado o id do repositorio.
.editorconfig: São configurações expecificas da IDE que esta sendo usado.
.gitignore: Arquivo do git que utilizamos para o gerenciamento dos arquivos que serão ignorados no momento do nosso commit.
angular.json: É onde fica armazenada todas as configurações do angular e do projeto.
browserslist: Neste arquivo colocamos os browsers que são suportados pela nossa aplicação.
karma.config.js: O Karma é uma biblioteca utilizada para criação de testes unitários desenvolvida pela própria equipe do Angular.
package-lock.json: Serve para descrever as características das dependências usadas no projeto. Versão, subdependências, links de verificação de integridade, dentre outras coisas.
package.json: Esse arquivo é o responsável por gerenciar as dependências do nosso projeto, quando nós executamos o comando npm install, ele verifica os pacotes que estão dentro desse arquivo e baixa para o nosso diretório node_modules conforme foi visto no passo anterior.
README.md: Arquivo Markdown para documentação da nossa aplicação.
tsconfig.app.json, tsconfig.spec.json e tsconfig.json: são os nossos arquivos de configuração do TypeScript. Esses não vamos mexer em nada para não bugar nossa aplicação.
tslint.json: O tslint fica verificando se estamos escrevendo o nosso código corretamente, ele verifica a sintaxe do nosso projeto em tempo de execução e em caso de algum erro ou warning ele lança uma exception no console.
Bom, essa seria a estrutura básica que nós temos quando criamos um projeto com o Angular CLI, nas próximos aula nós iremos nos encontrar em video ou live e vamos abordar alguns comandos para gerar componentes, services modules e etc.
Fontes e Referências:
https://imasters.com.br/desenvolvimento/angular-cli-scaffold
