Como instalar o Ambiente de Desenvolvimento com Angular

Um ambiente de desenvolvimento simples e que suporta a stack escolhida é sempre necessário para começarmos a desenvolver para aquela tecnologia, neste post vamos falar um pouco de como iniciar esse ambiente no Angula r.Para começar com o Angular devemos ter três coisas:

• Uma IDE que suporte ele, iremos usar o Visual Studio Code;
• Node.js, com ele teremos o gerenciador de pacotes npm, que iremos instalar as dependências;
• O Angular em si, iremos usar o npm para isso.

Visual Studio Code

A instalação do VSCode é muito simples, não tem muita atenção que devemos tomar aqui, basta baixar no site oficial e avançar nela. Sem observações quanto a isso:

Baixar Ferramentas do Visual Studio – Instalação gratuita para Windows, Mac e Linux (microsoft.com)

Setup NodeJS

NodeJS é um ambiente que roda JavaScript puro por trás de tudo, que nos permite trabalhar do lado do servidor.

Vamos usá-lo para fazer a instalação e gerenciamento das dependências do Angular, via npm (node package manager).

Basta fazer o download e instalá-lo:

Download | Node.js (nodejs.org)

Setup Angular

Aqui vamos precisar fazer algumas coisinhas, mas nada muito elaborado também, segue o tutorial:

Windows:

Vamos abrir nosso cmd, basta abrir a barra de pesquisa do Windows e digitar cmd e rodar como administrador.

Mac:

Abra Applications > Utilities e clica no Terminal.

Linux:

Aperte Ctrl+Alt+T e abra o terminal.

Agora vamos digitar as linhas de comandos correspondente ao seu Sistema Operacional:

Windows:

npm install -g @angular/cli@latest

Mac e Linux:

sudo npm install -g @angular/cli@latest

Irei pontuar duas coisas sobre os comandos acima:

• A flag –g diz que iremos instalar o Angular globalmente e isso significa que ele está disponível no sistema e que poderemos utilizá-lo sem grandes preocupações;
• @latest é opcional e significa que iremos utilizar a última versão disponível.

Durante a instalação será feita algumas perguntas para nós.

• Would you like to share anonymous usage data with the Angular Team? Geralmente eu respondo NO, porém caso você queira, sinta-se à vontade.

Workspace

Com tudo instalado, agora podemos criar nosso ambiente de trabalho para o Angular e assim começar a dar vida aos nossos projetos futuros.

• Primeiro precisamos criar em nosso computador alguma pasta que será a pasta para trabalhar com o Angular, podemos nomear com qualquer nome, mas irei usar este “Angular-Projects”.
• Agora vamos começar a usar o poder do CLI e gerar nosso projeto, como sempre vemos por aí vamos dar o nome de “my-app”, mas nada impede de dar o nome que você desejar. Vamos rodar o comando no terminal dentro da pasta que criamos:

ng new my-app

Uma observação é que não podemos usar o nome “test” para um projeto, pois é uma palavra reservada do Angular.

Será feito algumas perguntas e responderemos o seguinte:

• Do you want to enforce stricter type checking? R: yes
• Would you like to add Angular routing? R: no
• Which stylesheet format would you like to use? R: CSS ou SCSS

Você irá reparar que dentro da nossa pasta do projeto, agora existe o caminho “/my-app/” e poderemos inicializar o nosso projeto.

Angular Development Server

Com o Angular, podemos rodar um servidor de desenvolvimento que irá olhar todas as mudanças que fazemos em nossa aplicação e irá recarregar a página automaticamente, como o plugin “liveserver” do VSCode. Isso nos dá uma agilidade para ficar de olho no que está acontecendo na tela.

Para iniciar isso vamos rodar o comando “ng serve” dentro da pasta “/my-app/”:

Ng serve

Vamos usar o terminal para fazer isso, eu particularmente uso o terminal da IDE (VSCode) para fazer isso, não tem muita necessidade de ter outros abertos.

Agora vamos abrir o nosso projeto no VSCode, vai em “File -> Open Folder” e procure a pasta e basta abrir normalmente.

Por padrão o Angular usa o http://localhost:4200/ para rodar.

Caso haja algum erro, pode ser que esse endereço esteja em uso por algum motivo. Basta mudar ele durante o comando “ng serve –host localhost:3333 (ou qualquer outro que vc prefira)”.

Agora quando queremos que o servidor pare, basta dar o comando “Ctrl+C” dentro do terminal.

Com tudo isso, estamos prontos para iniciar nossos projetos.