[info] Objetivos do capítulo:
- apresentar o Angular CLI
- apresentar comandos para criação de projetos, módulos, componentes e outros elementos
- apresentar o arquivo
.angular-cli.json
O Angular CLI (disponível em https://cli.angular.io) é uma ferramenta para inicializar, desenvolver, criar conteúdo e manter software desenvolvido em Angular. A principal utilização dessa ferramenta começa na criação de um projeto. Você pode fazer isso manualmente, claro, mas lidar com todas as configurações necessárias para o seu software Angular pode não ser algo fácil, mesmo se você for um desenvolvedor com nível de conhecimento médio a avançado.
[info] cê-éle-í?
Como parte do vocabulário do Angular, geralmente é interessante pronunciar angular cê-ele-i, isso mesmo, CLI é uma sigla para Command Line Interface (no português Interface de Linha de Comando). Assim, usar "cli" não é exclusividade alguma do Angular -- provavelmente você verá isso em outros projetos.
As seções a seguir vão apresentar como instalar e utilizar o Angular CLI para desenvolver software Angular.
O Angular CLI é distribuído como um pacote do NodeJS, então você não encontrará um instalador, como acontece com software tradicional. Ao invés disso, você precisa de um ambiente de desenvolvimento com o NodeJS instalado (esse capítulo não trata disso).
Depois de ter o NodeJS instalado, a instalação do Angular CLI passa pela utilização do npm, o gerenciador de pacotes do NodeJS. Para isso, a seguinte linha de comando deve ser executada:
npm install -g @angular/cli
Isso fará uma instalação global do Angular CLI (por isso o -g
na linha de comando) e disponibilizará o programa ng
.
[warning] Problemas na instalação?
Podem acontecer certos problemas na instalação do Angular CLI. Por exemplo, você pode estar com uma versão bem desatualizada do NodeJS e do npm. Assim, garanta sempre que seu ambiente de desenvolvimento esteja com as versões corretas desses programas.
Outra situação é se você tiver problemas para fazer uma instalação global. Se for o caso, faça uma instalação local (sem o
-g
na linha de comando) e execute o programang
que está no caminho./node_modules/.bin/ng
.
O Angular CLI disponibiliza uma série de comandos, que são fornecidos como parâmetros para o programa ng. Além disso, cada comando possui diversas opções (ou flags). Faça o exercício de se acostumar a essas opções para aumentar a sua produtividade.
Os principais comandos serão apresentados nas seções seguintes.
O comando help
é muito importante porque apresenta uma documentação completa do Angular CLI, ou seja, todos os comandos e todas as suas opções.
Exemplo: documentação completa
ng help
Essa linha de comando apresenta todos os comandos e todas as suas opções.
Exemplo: documentação do comando new
:
ng help new
Essa linha de comando apresenta apenas as opções do comando new
.
As opções de cada comando são sempre precedidas de --
(dois traços). Algumas opções aceitam um valor e geralmente possuem um valor padrão.
Exemplo: comando new com duas opções
ng new escola-app --skip-install --routing true --minimal true
Essa linha de comando fornece três opções para o comando new
: --skip-install
, --routing
(que recebe o valor true
) e --minimal
(que recebe o valor true
).
O comando new
é utilizado para criar um projeto (um software Angular). Exemplo:
ng new escola-app
Quando a linha de comando do exemplo for executada será criado um software Angular chamado escola-app e estará em um diretório chamado escola-app
, localizado a partir de onde a linha de comando estiver sendo executada.
A parte mais interessante de criar um projeto Angular com esse comando é que ele cria todos os arquivos necessários para um software bastante simples, mas funcional.
Para cada comando do Angular CLI é possível informar opções. As opções mais usadas do comando new
são:
--skip-install
: faz com que as dependências não sejam instaladas--routing
: se for seguida detrue
, o comando cria um módulo de rotas (isso será visto em outro capítulo
O comando generate
é utilizado para criar elementos em um projeto existente. Para simplificar, é bom que o Angular CLI seja executado a partir do diretório do projeto a partir de agora. Por meio desse comando é possível criar:
- class
- component
- directive
- enum
- guard
- interface
- module
- pipe
- service
Como acontece com outros comandos, o generate
também pode ser utilizado por meio do atalho g
.
Exemplo: criar component ListaDeDisciplinas
ng generate component ListaDeDisciplinas
Essa linha de comando criará o diretório ./src/app/lista-de-disciplinas
e outros quatro arquivos nesse mesmo local:
lista-de-disciplinas.component.css
lista-de-disciplinas.component.html
lista-de-disciplinas.component.spec.ts
lista-de-disciplinas.component.ts
É importante notar que esses arquivos não estão vazios, mas já contêm código que mantém o software funcional e utilizável. Por isso o Angular CLI considera que as opções (class, component etc.) são como blueprints (ou plantas, em português). Outra coisa importante é que o Angular CLI também modificará o arquivo ./src/app/app.module.ts
se necessário (ou outro arquivo que represente um módulo que não seja o root module -- mais sobre isso depois).
O comando serve
compila o projeto e inicia um servidor web local. Por padrão o servidor web executa no modo --watch
, que reinicia o comando novamente, de forma incremental, sempre que houver uma alteração em algum arquivo do projeto, e --live-reload
, que recarrega o projeto no Browser (se houver uma janela aberta) sempre que houver uma mudança.
O comando build
compila o projeto, mas não inicia um servidor web local. Ao invés disso, gera os arquivos resultantes da compilação em um diretório indicado.
Veremos mais sobre esses e outros comando no decorrer do livro.
[info] Espera, compilação?
Como já disse, você pode utilizar JavaScript ou TypeScript ao desenvolver projetos Angular. Isso não é bem assim. Na prática, geralmente você encontrará a recomendação (senão uma ordem) de utilizar TypeScript. O problema é que seu Browser não entende TypeScript, por isso é necessário um processo de tradução do código TypeScript para JavaScript. E não é só isso. Há vários recursos utilizados no projeto Angular criado com TypeScript que precisam de ajustes para que funcionem no seu Browser.
Por isso os comandos
serve
ebuild
são tão importantes e -- por que não dizer? -- browser-friendly =)