Conhecendo a fundo a estrutura de um projeto criado com o Angular Cli

Hoje iremos navegar pelos diretórios e conhecer os arquivos que são criados para um projeto com o Angular Cli.

Nosso primeiro passo será a criação de um novo projeto. Para isso, com o seu terminal aberto, escolha um diretório para o seu projeto e execute o seguinte comando ng new structure no terminal. Esse comando irá criar um Scaffold com o que precisamos para iniciar um projeto com o Angular. Assim que o comando finalizar a criação do nosso projeto, execute o comando npm install, a execução dele irá baixar os pacotes necessários para os nossos próximos passos.

Agora, para que possamos navegar e entender os arquivos criados no passo anterior, precisaremos de uma IDE (Editor de Texto). Para esse artigo nós iremos utilizar o Visual Studio Code, uma IDE que está sendo muito adotada pelos desenvolvedores por ser rápido e grátis. Ele pode ser encontrado para download no link.

Com a execução dos passos anteriores, nós temos a seguinte estrutura:

O primeiro diretório que nós iremos conhecer será o e2e, dentro dele nós temos três arquivos: app.e2e-spec.ts, app.po.ts e tsconfig.e2e.json. Nós iremos utilizar estes arquivos para criarmos os nossos testes unitários.

Para que possamos testar, abra o terminal no Visual Studio Code e execute o comando ng serve dentro dele, em seguida vá até o sinal de + no canto direito do seu terminal e abra uma nova aba.

Feito Isso, nos conseguimos deixar uma aba executando o nosso projeto e podemos executar outros comandos como o de teste dentro dessa nova aba sem a necessidade de abrir mais de um CMD no caso do Windows ou Terminal no Linux ou Mac. Para que possamos testar os testes unitários que vem junto com a criação da nossa estrutura, execute o comando ng e2e no terminal, ele irá executar os testes que estão dentro do diretório e2e, dependendo dos testes, ele pode abrir algumas vezes o navegador para executa-los, por fim ele irá passar o resultado no console. Podemos ver esse resultado na imagem a baixo:

Note que para estes testes o Angular está utilizando o Selenium, uma ferramenta de testes que é muito utilizada nos ambientes de QA. Dando continuidade na nossa navegação, vamos aos outros diretórios:

node_modules: Diretório responsável por armazenar as nossas bibliotecas, quando nós adicionamos algo no nosso arquivo package.json, ele irá gerenciar os pacotes e as suas versões dentro desse diretório.

src: Diretório da nossa aplicação, dentro dele nós podemos criar os nossos services, components, modules … etc.

src/app:

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. Nesse exemplo nós criamos um projeto com a extensão .css, mas também temos a possibilidade de trabalhar com arquivos Sass. Para que possamos alterar, basta executar o comando ng set defaults.styleExt scss, ele irá configurar para que os próximos componentes sejam criados com a extensão do .scss.

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.

app.component.ts: Pensando em uma arquitetura MVC, esse arquivo teria as mesmas responsabilidades das nossas Controllers.

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.

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-cli.json, caso queira alterar ele para um outro, basta ir até o nó a baixo e informar o nome do novo diretório:

"root": "src",
 "outDir": "dist",
 "assets": [
 "assets",
 "favicon.ico"
 ],

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 adicionamos tarefas como a variável production que vem setada como true em produção e false em desenvolvimento.

index.html: Esse seria o nosso arquivo root, 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-cli.json, esse seria o bootstrap da nossa aplicação.

polyfills.ts: Esse arquivo funciona como um tradutor. Ex.: Nós precisamos utilizar algo novo do ES6, mas os nossos navegadores só conseguem entender o ES5, ele irá interpretar e passar o código corretamente para os nossos navegadores.

styles.css: Como todos os nossos componentes tem o seu próprio arquivo .css ou .scss, nós podemos utilizar esse arquivo para criar algo global como variáveis para nossa aplicação.

tsconfig.app.json e tsconfig.spec.json: são os nossos arquivos de configuração do TypeScript.

typings.d.ts: Nesse arquivo nós podemos definir tipos para o typescript. Ex.: A utilização de um require.

Saindo agora do nosso diretório src, nós temos:

.gitignore: Arquivo do git que utilizamos para o gerenciamento dos arquivos que serão ignorados no momento do nosso commit.

karma.config.js: O Karma é uma biblioteca utilizada para criação de testes unitários desenvolvida pela própria equipe do Angular.

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.

protractor.conf.js: Responsável pela execução dos nossos testes unitários que estão dentro do nosso diretório e2e.

README.md: Arquivo Markdown para documentação da nossa aplicação.

tsconfig.json: Arquivo de configuração do TypeScript.

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, nós próximos artigos nós iremos abordar alguns comandos que podem nos auxiliar no nosso dia dia.