Angular Cli Scaffold

Hoje, iremos navegar pelos diretórios e conhecer os arquivos que são criados para um projeto Angular 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 seu 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. Ele é 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 esses arquivos para criarmos os nossos testes unitários. Para que possamos testá-los, abra o seu terminal no seu 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, nós 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 caso do Linux ou Mac.

Para que possamos testar os testes unitários que vêm junto com a criação da nossa estrutura, execute o comando ng e2e no seu terminal. Ele irá executar os testes que estão dentro do nosso diretório e2e, dependendo dos nossos testes. Ele pode abrir algumas vezes o nosso navegador para executá-los. Por fim, ele irá passar o resultado na nossa console. Podemos ver esse resultado na imagem a baixo:

Note que para esses testes, o Angular está utilizando o Selenium, uma ferramente 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…

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 pensando 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 chamá-los 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ó abaixo 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 que nós 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. Exemplo: 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. Exemplo: 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 vimos 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 na nossa console.

Bom, essa seria a estrutura básica que nós temos quando criamos um projeto Angular com o Angular Cli. Nos próximos artigos, nós iremos abordar alguns comandos que podem nos auxiliar no nosso dia dia.