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:
yeoman 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:
grunt serve error
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!

4 thoughts on “Criando projeto em AngularJS

  • agosto 2, 2015 em 1:16 am
    Permalink

    Quero começar a mexer com AngularJS, mas acho muito complicado… Vou seguir seu tutorial! Excelente post.!

    Resposta
  • agosto 3, 2015 em 4:00 pm
    Permalink

    Muito bom Paulo, não sabia que a Google recomendava padrões para AngularJS. Parabéns.

    Resposta
  • Pingback: Internacionalização com AngularJS | Pride TI

  • novembro 3, 2016 em 11:21 am
    Permalink

    Essa e a grande sacada do AngularJS. Ao declarar a propriedade ng-app, estamos inicializando a nossa aplicacao. E a primeira de algumas novas propriedades que iremos utilizar. Todo o funcionamento do framework gira em torno dessas novas declaracoes.

    Resposta

Deixe um comentário

O seu endereço de e-mail não será publicado.