Angular 2/4 – Projetos com o Angular CLI

Curso básico gratuito de Angular 2 | kazale.comO objetivo dessa aula é demonstrar como criar projetos Angular utilizando o Angular CLI.

 

Digite seu email para se inscrever em nossa newsletter e receber atualizações sobre novos conteúdos.

Ao término dessa aula você aprenderá a criar aplicações Angular com o Angular CLI.

1. Introdução

O Angular CLI é o assistente oficial para criação e gerenciamento de aplicações com o Angular.

Apesar dele ser um projeto que está disponível para utilização a algum tempo, optei por falar sobre ele somente agora, porque agora que ele realmente está com uma maturidade e estrutura desejada para se criar uma aplicação Angular.

Ele é bastante parecido com o template que foi desenvolvido aqui pela Kazale, se você teve a oportunidade de ver as aulas anteriores sobre o template, você já possui os conhecimentos necessários para começar a utilizá-lo com mais facilidade.

Vamos agora entender melhor o que é o Angular CLI.

2. O Angular CLI

O Angular CLI é um cliente escrito em NodeJS que permite gerenciar projetos Angular.

Ele utiliza o Webpack, Jasmine, Karma, Protractor, e as principais ferramentas recomendadas na criação de aplicações Angular.

O comando ‘ng’ também fica disponível após sua instalação, assim é possível executar diversos comandos a partir dele.

3. Instalando o Angular CLI

Antes de sua utilização, será necessário realizar sua instalação.

Para isso, instale o pacote NodeJS ‘@angular/cli’ globalmente em seu computador (pode exigir permissão de administração para isso).

Execute o seguinte comando no terminal:

Para garantir que ele foi instalado corretamente, execute o seguinte comando para exibir a versão do mesmo:

4. Criando um projeto com 0 Angular CLI

Depois de realizar sua instalação, já é possível criar um projeto a partir dele.

O comando responsável pela criação é o ‘ng new’, seguido nome do projeto.

Na linha de comando, digite o seguinte código:

Esse comando demora alguns minutos para executar, pois após a criação dos arquivos, ele executa automaticamente o comando ‘npm install’, para instalar as dependências da aplicação.

Após a conclusão de todo o processo, acesse o diretório e execute a aplicação, através dos comandos:

Para visualizar a aplicação, acesse no seu navegador a url http://localhost:4200.

5. Utilitários do Angular CLI

Existem duas características importantes que você deverá aprender.

A primeira delas é utilizar alguns de seus utilitários para a criação de componentes, serviços, filtros, entre outros, conforme a tabela a seguir:

A ser criadoComando
Componente (Component)ng g component nome-do-componente
Diretiva (Directive)ng g directive nome-da-diretiva
Filtro (Pipe)ng g pipe nome-do-filtro
Serviço (Service)ng g service nome-do-servico
Módulo (Module)ng g module nome-do-modulo

A segunda delas são scripts de gerenciamento da aplicação, como:

ComandoDescrição
ng serveExecuta aplicação na porta 4200
ng lintExecuta validação de código fonte usando o lint
ng testExecuta os testes unitários
ng e2eExecuta os testes de integração
ng buildGera build da aplicação para desenvolvimento
ng build – -prodGera build da aplicação para produção

6. Conclusão

Conforme demonstrado no artigo, o Angular CLI se tornou a aplicação cliente padrão para criação e gerenciamento de aplicação Angular.

Ele facilita todo o fluxo de criação e gerenciamento do projeto, ajudando em todas as etapas do desenvolvimento, e seguindo as recomendações definidas pela equipe de desenvolvimento do próprio Angular.

Formação Angular 2 e 4 - Kazale

Deseja aprender mais Angular CLI na prática?

Conheça o curso que lancei na Udemy sobre Angular 2 e 4!

Nele você aprenderá Angular 2 e 4 criando 7 projetos na prática!

Não deixe de conferir esse curso, clique na imagem ao lado para saber mais sobre ele, e também ganhar um desconto exclusivo de 30%, vai perder essa oportunidade?

2 comentários em “Angular 2/4 – Projetos com o Angular CLI

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

seis − quatro =