Componentes AngularJS

Vamos começar a criar nossa aplicação. Mas antes temos que organizar o espaço de trabalho, pois é muito fácil se perder em meio a tantos arquivos.

Criaremos a pasta do nosso projeto. Lá, vamos guardar tudo o que precisamos para que este tutorial seja um sucesso! Há pastas específicas para guardar o que precisamos. Nomeie sua pasta (vamos usar o nome 'tutorial'), baixe o AngularJS e o Bootstrap. Sua pasta deverá ficar assim (renomeie as pastas, se necessário):

Repare que temos bootstrap, img, js, angular.js e index.html na raiz de tutorial. Vamos abrir o arquivo index.html, que ainda está vazio, e escrever:

    <!DOCTYPE html>
    <html ng-app = 'catalogo'>
      <head>
        <meta charset="utf-8">
        <title> Catálogo de carros </title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.css">

      </head>
      <body>

          <!-- início do Catálogo -->

        <div class="row" ng-controller = "catalogoControlador" style="margin-top: 100px; margin-left: 35px; width: 95%"> <!-- Eu sei que é feio.... -->
          <span style="font-family: PT Sans">
          <div class="col-sm-6 col-md-4" ng-repeat = "carro in carros">
            <div class="thumbnail">
              <img ng-src = "{{ carro.imagem }}">
              <div class="caption">
                <h3 class="text-center"><b>{{ carro.marca + " " + carro.modelo}}</b> <small>{{ carro.ano }}</small></h3>
                <table class="table table-striped" style="margin-top: 30px">
                  <tr>
                    <td class="text-uppercase"><b>Velocidade</b> <small>(km/h)</small></td>
                    <td class="text-center"><b>{{ carro.velocidade }}</b></td>
                  </tr>
                  <tr>
                    <td class="text-uppercase"><b>Motor</b> <small>(cc/cv)</small></td>
                    <td class="text-center"><b>{{ carro.motor }}</b></td>
                  </tr>
                  <tr>
                    <td class="text-uppercase"><b>Consumo</b> <small>(km/l)</small></td>
                    <td class="text-center"><b>{{ carro.consumo }}</b></td>
                  </tr>
                  <tr>
                    <td class="text-uppercase"><b>Conforto</b> <small>(0 a 5)</small></td>
                    <td class="text-center"><b>{{ carro.conforto }}</b></td>
                  </tr>
                  <tr>
                    <td class="text-uppercase"><b>Seguraça</b> <small>(0 a 5)</small></td>
                    <td class="text-center"><b>{{ carro.seguranca }}</b></td>
                  </tr>
                </table>
              </div>
            </div>
            </div>
          </span>
        </div>

        <!-- Fim do catálogo -->

        <!-- AngularJS -->
        <script src="angular.js"></script>

        <!-- Módulos -->
        <script src="js/app.js"></script>

        <!-- Controladores -->
        <script src="js/controllers/catalogoControlador.js"></script>

        <!-- JQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

        <!-- Javascript -->
        <script src="bootstrap/js/bootstrap.js"></script>

      </body>
    </html>

É possível ver palavras com prefixo ng, como ng-controller e ng-app. Elas são diretivas internas do AngularJS, necessárias para o correto funcionamento da aplicação.

De maneira resumida, uma diretiva vincula comportamentos a elementos HTML. Quando o aplicativo é executado , AngularJS precorre cada elemento HTML procurando diretivas. Quando encontra uma, ele desencadeia aquele comportamento. Por enquanto, vamos apresentar somente as diretivas que usaremos no projeto, mas você pode conhecer várias outras aqui:

  • ng-app: usado geralmente dentro de uma tag <body> ou <html>. Ela permite a auto-inicialização de uma aplicação AngularJS dentro dessas tags;
  • ng-controller: anexa um controlador à view. Esta diretiva é um exemplo de como o AngularJS trabalha segundo a perspectiva MVC (Model-View-Controller). Também é declarado na View, dentro de tags da escolha do programador;
  • ng-repeat: pode ser usado em conjunto com um array para exibir sistematicamente todos os valores na View sem precisar escrevê-los manualmente. Sua sintaxe é assim: ng-repeat= “carro in carros”, considerando que há um array chamado carros, e que nele há vários carros registrados. O nome carro é como uma variável temporária, usada somente para “apelidar” o que estiver dentro do array em questão;
  • ng-scr: é uma diretiva que configura o elemento scr de uma tag <img> para ser uma propriedade dentro de um controlador. Sua sintaxe é assim usamos <img ng-src="">;
  • ng-click: é uma diretiva que permite especificar um comportamento quando um elemento é clicado. Ela é escrita dentro de uma tag html assim ng-click=”plusOne($index)”, onde plusOne é o nome de uma função declarada como $scope.plusOne (em controller.js) que tem index como parâmetro. Neste exemplo, quando a tag que tiver ng-click=”plusOne($index)” for clicada, ng-click diz para o AngularJS executar a função associada a esta diretiva ($scope.plusOne);

Nas linhas finais de index.html, estamos dizendo para a aplicação onde estão nossas ferramentas de trabalho, como o AngularJS e os módulos e controladores, por exemplo.

No entanto, caso você tente abrir index.html, vai notar que só aparece texto na tela. Isso é porque ainda não criamos o módulo nem o controlador, mas vamos resolver isso agora. Na pasta de projeto, acesse a pasta js e crie um documento chamado app.js, que será nosso módulo de aplicação. Dentro dele, vamos declarar a aplicação escrevendo assim:

 var app = angular.module ("catalogo",[]);

De volta ao index.html, você reparou nos textos entre as chaves duplas? Todos eles estão tentando acessar informações de dentro do controlador, através do $scope. Como sabemos, $scope é responsável por fazer a mediação entre a view e o controlador. Mas ainda não temos um controlador!

Vamos criá-lo acessando tutorial/js/controllers/. Dentro da pasta, crie um novo arquivo chamado catalogoControlador.js e escreva dentro dele o seguinte:

    app.controller('catalogoControlador', ['$scope', function($scope){
        $scope.carros = [
            {imagem: "img/golf.jpg", marca: "Volkswagen", modelo: "Golf Highline", ano: "2015", velocidade: 212, motor: "1.4/140", consumo: 11.7, conforto: 5.0, seguranca: 5}

            //cadastre mais carros!

        ];
    }]);

Como podemos ver, o trecho function($scope) é o que vincula a view e o controlador. Lembra da variável var app, que declaramos em app.js como sendo um módulo de aplicação? Ela é a mesma que está em app.controller, ou seja, 'app' é apenas um nome que escolhemos para facilitar as coisas. Poderia ser até 'lasanha', se quisesse!

$scope.carros é um array, que contém como elemento um outro array. Ele representa, na verdade, um carro com as propriedades imagem, marca, modelo, ano, velocidade, motor, consumo, conforto e segurança. Tudo isso será exibido na view do projeto. Aliás, nossa aplicação já deve funcionar, agora que declaramos o módulo e o controlador.

Em index.html, nesta linha <div class="col-sm-6 col-md-4" ng-repeat = "carro in carros"> temos ng-repeat. Esta pequena palavra é responsável por representar os elementos do array $scope.carros de forma cíclica dentro daquela div, para que você não tenha que fazer isso manualmente. Mas só temos um carro cadastrado, lembra? Que tal cadastrar mais?

Siga o modelo abaixo para cadastrar mais carros, substituíndo os campos pelos de sua preferência:

            ,{imagem: "insira endereço da imagem do carro", marca: "insira marca", modelo: "insira modelo", ano: "insira ano", velocidade: insira, motor: "insira cilindrada e potência do motor", consumo: insira consumo, conforto: insira conforto, seguranca: insira segurança}

Não importa quantos carros você adicionar, cada um deles vai aparecer na view! Incrível!