Como instalar o Ambiente de Desenvolvimento com Angular
por Dener Troquatte | | angular | 0 Comentários
Mac e Linux:
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.
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)
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)
Aqui vamos precisar fazer algumas coisinhas, mas nada muito elaborado também, segue o tutorial:
Vamos abrir nosso cmd, basta abrir a barra de pesquisa do Windows e digitar cmd e rodar como administrador.
Abra Applications > Utilities e clica no Terminal.
Aperte Ctrl+Alt+T e abra o terminal.
Agora vamos digitar as linhas de comandos correspondente ao seu Sistema Operacional:
sudo npm install -g @angular/[email protected]
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.
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:
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.
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/":
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)".