Angular — Criando e entendendo projetos Angular

Entenda como criar um projeto Angular com angular-cli e entenda como suas partes funcionam e se conectam entre si.

Angular é um framework muito popular para desenvolvimento front-end. Este artigo tem como finalidade demonstrar como se cria uma primeira aplicação em Angular. Vamos direto ao ponto.

Caso seja seu primeiro contato com Angular, seguem breves explicações. Não é o objetivo deste artigo conceituar ou demonstrar vantagens e desvantagens do framework. Isto será feito em um outro artigo.

• angular-cli é uma interface de linha de comando para interação com aplicações Angular. Confira: https://cli.angular.io/
• Permite a criação de projetos, builds, testes, criação de bibliotecas, etc.
• Seu funcionamento é simples, mas muito poderoso.
• Desde que o angular-cli foi definitivamente incorporado ao core do Angular, as tarefas de gerenciamento e criação de projetos ficaram muito mais fáceis e menos propensas a erros, além de ser suportado pela documentação oficial.

Instalando angular-cli e criando seu primeiro projeto.

• Primeiramente, você precisa ter nodejs instalado. Entre em https://nodejs.org/en/ e baixe e instale a versão correspondente ao seu sistema operacional. Eu dou preferencia para as versões LTS (log term support), mas se preferir pode instalar a current.
• Depois de instalado o nodejs, você tem o npm disponível para ser utilizado. Digite no seu terminal favorito: npm install -g @angular/cli . A opção -g indica que esta dependência será instalada de forma global, ou seja, pode ser utilizado em qualquer lugar do sistema.
• Após a instalação, fica disponível o comando ng. Este comando representa o angular-cli.
• Quando a instalação terminar, utilize o comando ng new todo-listEste comando criará todas as estruturas de código necessárias para criar seu primeiro projeto em Angular.
• Quando o comando acima terminar sua execução, entre no novo diretório criado e digite ng serve . Este comando criará um mini servidor para desenvolvimento em localhost. Note que quando ele terminar sua execução, o terminal ficará suspenso.

• Entre no browser e digite o endereço: http://localhost:4200

• O projeto está criado automaticamente com todas as estruturas necessárias para iniciar sua codificação e customização. A partir de agora vamos entender o que foi feito.

Entendendo a estrutura de um projeto criado com angular-cli

Depois de criar o projeto e executá-lo no navegador, temos a seguinte estrutura:

A seguir, uma breve explicação sobre cada item.

• e2e: pasta do protractor. Protractor é um framework de testes end-to-end pra Angular. Em um futuro artigo posso fazer uma pequena poc demonstrando seu uso. Se quiser mais informações: https://www.protractortest.org/
• node_modules: velho conhecido de quem já trabalha com npm. Esta pasta contém todas as dependências descritas no package.json
• src: contém o código-fonte e tudo que evolui dele na sua aplicação.
• .editorconfig: configurações para os editores de texto que normalmente utilizamos para codificar. Podemos configurar quebras de linhas, codificação, endentação, etc. Para mais informações, conheça: https://editorconfig.org/
• .gitignore: contém os arquivos e diret[orios que serão ignorados pelo git na hora de fazer commit para um repoditório.
• angular.json: Contém as configurações do Angular Development Tools, ou, se preferir, a configuração do angular-cli.
• package-lock.json: contém as versões das dependências INSTALADAS no node_modules da aplicação.
• package.json: Contém as informações sobre as dependências que a aplicação precisa e os comandos que podem facilitar o processo de desenvolvimento.
• README.md: arquivo de apresentação da aplicação que contém detalhes de como os projeto funciona e as atividades necessárias para baixar, instalar e utiliza-lo.
• tsconfig.json: configuração do typescript. Em um momento oportuno criarei um artigo explicitando essa configuração.
• tslint.json: Configurações do linter de typescript. Explicado brevemente um pouco mais a frente.

Comando ng new

Já vimos no inicio deste artigo que podemos utilizar o comando ng new para criar um novo projeto em Angular. A seguir, vamos listar algumas opções uteis na hora de criação de um projeto. O modelo para utilizarmos essas opções com o comando é a seguinte: ng new --<<opção>>

• --directory : define o diretório em que o novo projeto será criado. Ex: ng new testdir --directory ./outro-diretorio
• --inline-style : especifica que este projeto utilizará css inline, ou seja, dentro dos próprios componentes e não em um arquivo separado.
• --inline-template : especifica que este projeto utilizará o template inline, ou seja, o html dos componentes estará especificado dentro do próprio componente.
• --prefix : associa um prefixo aos componentes criados no projeto. Ex: ng new prefix-project --prefix pre . Com essa configuração, todos os componentes terão o prefixo pre. Se você está confuso com esta configuração e a anterior, ignore por enquanto.
• --skip-git : Por padrão, o Angular já associa um projeto criado ao git, inclusive configurando o .gitignore. Caso você não queira essa configuração automática, passe esta opção.
• --skip-commit : Esta opção evita que o primeiro commit seja realizado com o código inicial do projeto.
• --verbose : habilita a exibição de mensagens adicionais durante o processo de inicialização do projeto.

Usando as ferramentas de desenvolvimento

Sempre que criamos um projeto com ng new, já estão incluídas uma série de ferramentas de desenvolvimento que auxiliam na monitoração das aplicações, builds, detecção de alterações, etc.

• O pacote principal no desenvolvimento de uma aplicação Angular, chama-se webpack. É instalado automaticamente com o comando ng new.
• Webpack é um empacotador de módulos. O que isso quer dizer? Ele junta pacotes javascript para utilização no browser.
• Aquelas mensagens que você vê quando utiliza o comando ng serve, por exemplo, são o webpack fazendo seu trabalho.
• Recomento fortemente que dê um passeio em https://webpack.js.org/ e conheça um pouco do webpack, caso ainda não conheça. Em um futuro próximo, posso fazer um artigo mostrando suas funcionalidades.

O servidor de desenvolvimento

• Para simplificar o processo de desenvolvimento, já é automaticamente adicionado ao projeto o webpack-dev-server, que é um servidor muito simples integrado com o webpack.
• Este servidor é iniciado através do comando ng serve, que já vimos anteriormente neste artigo.
• A porta padrão utilizada é a 4200. Esta porta pode ser configurada no arquivo de configuração do projeto, ou mesmo na linha de comando, na hora em que o servidor é iniciado. Ex: ng serve --port 4401
• Quando iniciamos nosso servidor, este trava o terminal e fica escutando nossas alterações. No momento em que editamos um arquivo e o salvamos, o webpack cria um novo pacote com essa atualização automaticamente e a envia ao browser através de uma conexão persistente. Esta estratégia é conhecida como Angular Hot Module Replacement (HMR).

Inicialmente, coloquei aqui o funcionamento completo de uma aplicação, porém o artigo ficou demasiado longo, então resolvi dividir em outra parte que você confere aqui.

Por enquanto é isso. Qualquer pisada de bola, sugestão ou comentário, fiquem a vontade. Até a próxima.