AngularJS 1 – 1 Configurando seu ambiente Windows

Olá pessoas,

Pretendo escrever uma série de posts ajudando quem quer começar a desenvolver aplicações web utilizando AngularJS, o famoso framework do Google, de maneira prática, rápida e o mais próxima possível do que uso no meu dia-a-dia.

Acompanhe abaixo os links da série:

Série AngularJS1

1. Configurando seu ambiente Windows
2. Conceitos Básicos

Tenho percebido que alguns colegas sofrem ao instalar seu ambiente dev para trabalhar com aplicações usando NPM, Bower, e nosso geradores do Yeoman no Windows.

Pequeno Glossário antes de começar:

Grunt e Gulp: Grunt e Gulp são automatizadores de tarefas. A grosso modo, eles são os responsáveis por minificar todos seus arquivos e deixar tudo pronto numa linda pasta “dist”, da onde você irá simplesmente publicar seus arquivos em seu servidor de hospedagem.

NPM: NPM (Node Pakage Manager) é um repositório (gerenciador de pacotes) de instalações do Node.js. Para quem ja teve experiência com OSX e Linux, é como se fosse um apt-get da vida…

BOWER: Bower também é um repositório. Em geral usamos os dois, mas você pode usar só o Node ou somente o Bower, de qualquer forma, quando você inicializar seu projeto com o gerador Angular do Yeoman ele irá criar as pastas bower_components e node_modules.

SASS e Compass: SASS é o que eu considero assim uma evolução natural do CSS. Imagine você poder variáveis dentro de seu css, ao passo que “background-color:#ccc;” se torne uma váriavel chamada: “.aquele-bg-cinza”. Existe toda uma possibilidade de você “componentizar”elementos do seu CSS.

Yeoman: Nosso querido Yeoman é uma ferramenta capaz de acelerar a criação de projetos “do zero”, por meio de “generators”. Imagine que chato ter que iniciar toda vez um projeto criando todas as pastas, configurar dependências de seus módulos NPM e componentes do Bower, enfim um super trabalho duro. E graças ao Yeoman, desnecessário.

Agora que você já sabe do que estamos falando, vamos começar a fazer as coisas funcionar. Hoje me dia você não precisa mais se revirar e se debater tantando configurar variáveis de ambiente no windows:

Windows-build-tools

Antes de mais nada instale o Windows-build-tools em seu sistema caso contrário você tera problemas com várias dependências do node como por exemplo o node-sass.

Execute o seguinte comando em uma janela do PowerShell com permissões de Administrador:

npm install --global --production windows-build-tools

1 Instale o Git for Windows

Basta acessar o este link, baixar e instalar o cliente do Github para Windows.

2 Instale o Node.js

Basta acessar este link e escolher uma versão estável do Node.js para Windows. Repare que o próprio instalador já configura as variáveis de ambiente para você.

3 Instale o Ruby Installer

Sim, você vai precisar do Ruby for windows para poder instalar o Compass via gem (repositório de instalações do Ruby, semelhante ao NPM para JavaScript ou o PIMP para Python)

Basta acessar este link e baixar o instalador do Ruby para Windows.

4 Reinicie seu PC

É extremamente recomendado que você reinicie seu PC neste ponto para conseguir executar os comandos do Ruby e do Node.

5 Verifique se o Node e o Ruby foram instalados

Se tudo deu certo até aqui, os comandos abaixo devem retornar a versão atual do Node e do Ruby instados:

git --version

npm - v

ruby -v

Seu resultado deve ser algo parecido com isto:

5 Instalando Compass

Agora vamos instalar o Compass usando gem (nosso npm do ruby).

Antes de mais nada, vamos adicionar o caminho pelo qual será pesquisada nossa gem.

gem sources --add http://rubygems.org/

E em seguida, confirme com [Y] e execute:

gem install compass

OK. Git, Node, Ruby e Compass instalados com sucesso até aqui.

6 Instalando Yeoman

Agora a coisa ficou bem fácil, basta instalar globalmente o Yeoman:

npm install -g yo

E só pra garantir, nós vamos usar o yo doctor para verificar se tudo está instalado como deveria.

yo doctor

E no final ele deve retornar: “Everything looks all right!“.

7 Instalando generator Angular

Angular é um dos generators mais populares no yo, foi desenvolvido pelos próprios yeoman team. Você encontrar generators para outros tipos de app no próprio site do yo, neste link. E você também pode visitar o git do generator Angular neste link.

Para instalar esse generator utilize o seguinte comando:

npm install -g grunt-cli bower yo generator-karma generator-angular

Esse comando bacana faz um monte de coisas na sequencia ele instala globalmente o grunt, o bower, o karma (havia me esquecido de mencionar este. Karma é uma ferramenta de testes para seu código JS) e o generator angular.

Após todo esse trabalhinho (nem foi tão difícil assim…) você pode navegar até a pasta aonde seu projeto será criado e inciá-lo com o seguinte comando:

yo angular [nome-do-seu-app]

Então o Yeoman aparecerá e te fará umas perguntas sinistras, de primeiro momento responda não para o uso do Gulp (experimental) e responda sim para o uso de Sass, compass, e a versão sass do Bootstrap.

Feito isso veja que os arquivos de seu projeto já foram criados e você poderá testar seu projeto com o seguinte comando:

grunt serve

Caso você encontre erros você ainda pode forçar a execução do projeto com:

grunt serve --force

E quando quiser publicar seu projeto basta utilizar o comando:

grunt

Você verá que foi criada uma pasta “dist” na raiz de seu projeto. É lá que você encontrará todos os arquivos minificados para publicação em seu servidor de hospedagem seja ela qual for.

Por hoje é só.

Sim isso será uma série sobre Angular1 e sim, eu já estou estudando Angular2 e pretendo em breve começar a compartilhar mais sobre… Sim também falarei sobre Ionic Framework. 😉

Este post é dedicado aos amigos Gabriel Gois e Apolo Roberto e acredito que escrevendo e guardando isso em algum lugar me ajudarei e os ajudarei.