• Yeoman
  • Ferramentas
  • Generators
• AngularJS
  • Gerando o App
  • Instalando uma nova dependência (bower)
  • Yeoman Generators
  • Tests

• Você precisa ter conhecimentos básicos de linha de comando
• Ter o NodeJS e NPM instalados
• Bons conhecimentos em Javascript, CSS e HTML

Conjunto de ferramentas e boas práticas, fazendo com que o desenvolvimento para a web seja melhor e mais ágil.

Foco em aumentar a produtividade.

        npm install -g yo
      

Essa instrução já vai instalar o Yeoman, Grunt e Bower automaticamente.

São como receitas para você inicializar uma aplicação

A idéia por trás desse conceito é você criar os esqueletos dos seus projetos com as suas boas práticas e convenções.

Já existe uma série de Generators disponíveis. Você pode encontrar executando essa instrução no seu terminal.

        npm search yeoman-generator
      

Nós vamos usar o generator no AngularJS.

        npm install -g generator-angular
      

É um framework com uma série de peculiaridades e características eficientes e poderosas.

Gerando um app AngularJS com Yeoman

Para gerar o App você só precisa disso:

        yo angular
      

O Generator vai fazer uma série de perguntas do que você pretende instalar. Você pode responder sim para todas, nesse caso.

O Yeoman vai criar vários arquivos e pastas, executar o bower install (para instalar as dependências da aplicação) e executar o npm install (para instalar as dependências das tarefas do grunt).

Acabamos de criar uma aplicação e entender o que acontece durante o processo.

Para executá-la, basta executar esse comando no seu terminal:

        grunt server
      

Ele executa algumas tarefas, subir um servidor HTTP e iniciar a tarefa watch, que fica observando a sua pasta app/ e exectua algumas tarefas quando algum arquivo é alterado, por fim, ele vai abrir seu navegador já com a aplicação executando.

Como já vimos antes, o bower é um gerenciador de dependências. Nele você vai encontrar frameworks, como o Twitter Bootstrap, bibliotecas Javascript, plugins de jQuery e outras coisas.

Nesse exemplo vamos usar uma biblioteca chamada Angular Bootstrap, do Angular-UI, são os plugins do Twitter Bootstrap exportados para o AngularJS.

Para instalar

        bower install angular-bootstrap --save
      

A flag --save diz ao bower que essa dependência tem que ser salva no seu arquivo bower.json.

Em alguns segundos você já está com a biblioteca instalada no seu projeto, na pasta app/bower_components/.

Para isso vamos precisar adicionar o script à aplicação, adiconando essa linha junto com os outros scripts no app/index.html.

        

        <script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
      

Agora, no arquivo app/scripts/app.js vamos adicionar a dependência à aplicação, o início do seu arquivo vai ficar mais ou menos assim:

        'use strict';

        angular.module('appExempleApp', [
          'ngCookies',
          'ngResource',
          'ngSanitize',
          'ui.bootstrap' // adicione a dependência
        ])
        ...
      

Fazendo isso o seu app já vai estar hábil a utilizar a biblioteca.

Vamos alterar a view pricipal para utilizar algum recurso da biblioteca. Alterando o arquivo app/views/main.html, adicionando algumas linhas.

        <ul>
          <li class="dropdown">
            <a class="dropdown-toggle">
              Click me to see some awesome things!
            </a>
            <ul class="dropdown-menu">
              <li ng-repeat="thing in awesomeThings">
                <a>{{thing}}</a>
              </li>
            </ul>
          </li>
        </ul>
      

O generator já cria na sua aplicação alguns testes para executar, basta você executar:

        grunt test
      

Ele vai executar algumas tarefas para preparar os testes, vai executar os testes e exibir o relatório de todos os testes no final.

Vamos forçar um erro. No arquivo /app/scripts/controllers/main.js, adicione um item em awesomeThings. Ele vai ficar parecido com isso:

        'use strict';

        angular.module('appExempleApp')
          .controller('MainCtrl', function ($scope) {
            $scope.awesomeThings = [
              'HTML5 Boilerplate',
              'AngularJS',
              'Karma',
              'DevFest 2013' // novo item
            ];
          });
      

Ao executar o grunt test novamente ele vai indicar que um dos tests deu erro.

Para corrigir é só alterar o arquivo tests/spec/controllers/main.js, indicando que o awesomeThings deve ter 4 itens.

        expect(scope.awesomeThings.length).toBe(4);
      

Executando o grunt test mais uma vez todos os testes vão ser executados com sucesso.

Por fim vamos preparar a nossa aplicação para o ambiente final.

Executando no terminal:

        grunt build
      

O Grunt vai executar uma série de tarefas incluindo cssmin, htmlmin, imagesmin, uglify dos js e por fim ele vai criar um pasta dist/ com a sua aplicação pronta para o ambiente final.

O AngularJS por si só já é um framework poderoso.

Com o apoio do Yeoman vimos como fica mais ágil e produtivo:

• Iniciar o projeto
• Gerênciar dependências
• Gerar partes da aplicação (controllers, routes, etc)
• Executar tests
• Finalizar a aplicação para deploy

• Source do app exemplo: https://github.com/egermano/devfest2013-app-exemple
• http://angularjs.org/
• http://yeoman.io/
• http://gruntjs.com/
• http://bower.io/
• http://github.com/yeoman/generator-angular
• http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/