Aprendendo Angular usando Angular CLI

Muitas pessoas interessadas no curso de Angular da Caelum, com alguma frequência perguntam com qual versão trabalhamos no curso, e a resposta que damos é: “a versão mais recente”.

Esta resposta deixa muita gente intrigada, se perguntando “como?”. Bom este post responde como conseguimos isto, e é bem mais simples do que se imagina, tudo isso deve-se ao uso da ferramenta de linha de comando do Angular durante o curso, ou seja, a Angular CLI.

CLI – Command Line Interface

No mundo dos frameworks, independente da linguagem, com alguma frequência encontramos ferramentas que nos auxiliam com o dia a dia no desenvolvimento de software, principalmente quando existem tarefas repetitivas e trabalhosas.

Estas ferramentas geralmente são outros softwares, que podem variar de formato, podendo ser: bibliotecas ou plugins adicionados ao projeto, um “programa” com interface gráfica, ou um programa de linha de comando, que é o caso da Angular CLI.

A CLI do Angular, foi lançada em março de 2017, com a intenção melhorar a experiência da pessoa desenvolvedora de uma maneira geral, facilitando infinitamente o primeiro contato com o framework desde a criação de um novo projeto, com toda a estrutura base montada e funcionando, assim como a criação de componentes, e com o momento do (não mais) trabalhoso build da aplicação.

Iniciando com a CLI

O pré-requisito é ter o NodeJS instalado numa versão atual (que já vem com o npm – que também é necessário).

Com isto, basta instalar a CLI globalmente em seu computador com o comando npm install -g @angular/cli.

O comando ng

Após instalar a CLI em seu computador, você poderá executar o comando ng no seu terminal.

Por exemplo, podemos testa-lo consultando sua versão desta maneira: ng -v.

Execução do comando ng
Consultando se a CLI foi instalada com o comando ng -v

Criando um projeto Angular

Para criar toda estrutura de um projeto (que funciona) usando Angular, basta executar: ng new nomedoprojeto, por exemplo: ng new caelum, isto cria uma pasta caelum, onde dentro dela a CLI se encarrega de criar toda a estrutura de arquivos e baixar as dependências do node.

Se você quiser criar um projeto simples e pequeno apenas para “estudar”, pode usar a flag --minimal, o comando ficaria ng new nomedoprojeto --minimal.

Isto gera um projeto sem a estrutura de testes automatizados.

O comando new sempre baixa a versão mais recente do Angular, porém depende um pouco da versão da própria CLI, cada versão da CLI está ligada a uma versão do Angular.

execução do comando ng new linesabout --minimal
Criando um projeto chamado linesabout

Executando o projeto Angular

Para ver o projeto que acabou de criar, entre na pasta dele pelo terminal, cd nomedoprojeto e execute o comando ng serve. Isto iniciará um servidor local que ficará escutando por modificações nos arquivos do projeto, que estão dentro da pasta src.

execução do comando ng serve

Gerando componentes, modulos, etc…

A CLI conta com um comando para os ajudar na penosa tarefa de criar a estrutura básica de um componente, ou módulo. O generate vai te ajudar gerar o que for necessário para isto. No terminal, esteja na raiz do projeto, e por exemplo, para gerar um componente, usamos o seguinte comando: ng generate component nomedocompoente . Com este comando vais ser gerado os arquivos do componente e já atualizado o app.module.ts, para você já usar seu componente.

Para ver todas as possibilidade do generate confira a documentação.

Buildando a aplicação

Fazer o build de uma aplicação usando um “framework javascript” nunca foi tão fácil, se não fosse pela CLI. Em outro terminal, ou no mesmo (parando a execução do servidor local – com ctrl c) é só executar o comando ng build. A CLI criará uma pasta dist   na raiz do projeto. Esta pasta conterá os arquivos estáticos para você apenas enviar para seu servidor web e ver tudo funcionando lindamente!

Existem algumas opções/flags para este comando muito interessantes para otimizar o build do projeto.

execução do comando ng build
Executando o comando ng build

Em dezembro de 2017, participei do FrontInPoa, e lá fiz uma palestra sobre Angular CLI, onde conto mais detalhes, confiram:

Chegando ao fim, é possível concluir que a CLI do Angular é uma ferramenta muito importante e seu uso está cada vez mais interessante. Aproveite para baixar e aprender Angular usando ela!

2 Comentários

  1. Ivan 19/03/2018 at 14:39 #

    Olá Vanessa,

    Excelente post!

    Estou aprendendo Angular 5 e tenho uma dúvida, não diretamente relacionada ao post. Quando devo ou não criar módulos na minha aplicação? Vamos supor que eu tenha uma funcionalidade para inclusão, exclusão e edição de um cadastro de clientes. A boa prática é sempre utilizar módulos, ou seja, colocar um módulo chamado ClienteModule e ter os componentes para inclusão, exclusão e alteração ligados a esse módulo?
    Obrigado.

  2. Leonardo 20/03/2018 at 14:54 #

    Muito bom o Post Vanessa,

    Estou aprendendo Angular e no curso (Udemy) o instrutor realiza a configuração do Angular manualmente, acredito que no dia-a-dia as empresas utilizam o Angular CLI para começar um projeto em Angular, certo? Existe alguma outra ferramenta que tenha a mesma função que o Angular CLI?

    Obrigado

Deixe uma resposta