Criando projeto em AngularJS

Deseja iniciar um projeto em AngularJS e não sabe por onde começar? Não sabe a estrutura básica? Os padrões usados pelo mercado? Então você veio ao lugar certo! Desde já aviso que o objetivo desse post não é ensinar vocês a programar em AngulasJS e sim mostrar os padrões mais usados pela comunidade em relação a estrutura do projeto.

Então os projetos em AngularJS possuem uma padrão correto? Hmm.. sim e não, depende das suas necessidades. Devido a tantas dúvidas a Google criou este documento que recomenda alguns padrões, sendo eles o uso do projeto AngularSeed ou o uso da ferramenta Yeoman. Nesse tutorial vou ensinar usas os dois, começando pelo AngularSeed.

AngularSeed

• O que é? O AngularSeed é um projeto em AngularJS (obvio) contendo simplesmente o esqueleto de um projeto para desenvolvedores desenvolverem em cima dele.

• Como usar? É bem simples, basta você ter instalado em seu computador o NodeJS e o Git. Considerando que você já tenha eles, basta então fazer um clone do projeto com o comando:

git clone https://github.com/angular/angular-seed.git

PS: O clone do projeto irá trazer também todo o histórico de alterações nele. Caso você não queira isso, utilize esse comando:

git clone --depth=1 https://github.com/angular/angular-seed.git <SeuProjeto>

Feito o clone, agora só precisamos baixar as dependências do projeto. Para fazer isso, entre dentro do diretório do projeto e execute o seguinte comando:

npm install

Pronto! Já temos nosso projeto em AngularJS com uma estrutura que a Google recomanda, Para rodar ele, basta dar um

npm start

 e ser feliz. Para acessar sua aplicação, abra a url: http://localhost:8000/app/index.html.

Yeoman

• O que é? É uma ferramenta que auxilia na criação de novos projetos, usando as melhores praticas e melhores ferramentas.

• Como usar? É tão simples quanto o AngularSeed, basta você ter instalado o NodeJS e o Git. Primeiramente iremos instalar o Yeoman com o seguinte comando:

npm install -g yo

O parâmetro -g diz que esse módulo será instalado de forma global. É importante lembrar que com esse comando o Grunt e o Bower serão instalados também.

O Yeoman possui vários geradores de projetos, porém iremos usar somente o do AngularJS nesse exemplo. Para isso, adicione ele com esse comando:

npm install -g generator-angular

Com tudo instalado, crie um diretório que você deseje que fiquei seu projeto e depois execute o comando:

yo angular

Ele irá perguntar se você deseja usar o Sass e o bootstrap, caso você queira, basta apenas dar um Yes e eles já estarão no seu projeto. É possível ver todas as opções de projetos que o yeoman gera executando o comando: yo

Caso de tudo certo, você vera esse menu:

Caso você queria outros geradores, bastá ir em Install a generator e escolher outro gerador. Como é possível ver, também é possível gerar um projeto Angular a partir deste menu.

Com tudo a instalação finalizada, basta dar o comando:

grunt serve

e seu projeto já vai estar rodando.

Para usuários de windows, é possível obter o seguinte erro ao executar o grunt serve:

Para corrigir isso, basta instalar o Ruby e rodar o comando gem install compass que o problema será resolvido. Rode o grunt serve novamente e o aplicativo será aberto no seu navegador padrão.

Bom, era isso. Espero ter ajudado as pessoas que pretendem iniciar em Angular e não fazem ideia de como criar seu primeiro projeto. Até mais!