Como criar uma aplicação com Angular 4

Nesse primeiro post mostro como criar uma aplicação com Angular 4 e no seguinte mostro como você pode adicionar sua primeira rota.
Antes de começarmos precisamos ter algumas dependências instaladas.

  • Node.js com NPM (Node Package Manager)
  • TypeScript
  • Angular-CLI (Command Line Interface)

NodeJS
Para instalar o node visite NodeJS e faça o download referente a seu sistema operacional.
Após o download defina a pasta de instalação e aceite os termos.
Depois de instalado feche o terminal e abra novamente e execute o seguinte comando:

node -v

Seu resultado será semelhante ao a seguir, não se preocupe com a versão:

TypeScript
Para instalar a última versão basta executar o seguinte comando no terminal:

npm install -g typescript

Para usuários de Linux e Mac execute o comando como sudo!

Angular-CLI
Essa ferramenta permite que você crie seus projetos angular como vai ajudar você em várias outras partes durante o desenvolvimento. Para instalar execute o seguinte comando no terminal:

npm install –g @angular/cli

Para verificar se deu tudo certo e ver a versão instalada execute o seguinte comando no terminal:
ng –v
O resultado deverá ser algo parecido com isso:

Quando executamos o comando ng –v em um uma pasta de um projeto angular é mostrado a versão do Angular do projeto em particular.

Com as dependências instaladas já podemos criar nosso projeto.

Criar projeto Angular 4
Para criar o projeto navegue até a pasta onde deseja salvar o projeto e execute o seguinte comando no terminal:

ng new angular4-example

Onde (angular4-example) seria o nome do projeto. O resultado deverá ser semelhante ao a seguir:

 

Esta etapa geralmente demora um pouco pois o CLI está baixando as dependências necessárias para o novo projeto.

Feito isso podemos testar a nossa aplicação. Para testar navegue até a pasta do projeto e execute o seguinte comando:

ng serve

Após iniciado o resultado no terminal deverá ser parecido com o a seguir:


Depois disso só acessar o seguinte endereço em algum navegador: http://localhost:4200/
Você verá algo como:

Nosso aplicativo já está funcionado!

DEIXE UMA RESPOSTA