Um outro exemplo de AngularJS

exemplo-abj_js

No meu primeiro exemplo eu não dei muitas explicações do que se estava fazendo — isto é, não aqui mas o fonte estava razoavelmente comentado — então resolvi criar um novo exemplo, utilizando outras coisas e acrescentando algumas explicações por aqui.

O problema

Digamos que você precise completar as informações e exibir a informação abaixo (uma lista de notas comum e corrente):

Aluno 1º Bim 2º Bim 3º Bim 4º Bim Média
«nome do aluno» «nota 1» «nota 2» «nota 3» «nota 4» «média»

E, claro, a média das quatro avaliações de cada aluno também precisa ser calculada.

A parte HTML

A primeira coisa é indicar pro AngularJS qual a parte do DOM (do HTML) ele poderá mexer usando a diretiva ngApp, ela é comumente colocada nas tags (que dará acesso a todo o conteúdo da página) ou(ficará com acesso apenas ao que está dentro do elemento). No primeiro exemplo eu deixei emmesmo mas neste eu fiz assim:

...

ng-app="exemplo2">
...

Em seguida usa-se a diretiva ngController para fazer a mesma coisa com o controle BoletimCtrl:

...
ng-controller=”BoletimCtrl as boletim”> |

Desta forma ele só poderá alterar o conteúdo do que estiver dentro deste

e o “as boletim” é apenas um apelido (alias) para que eu eu não precisar escrever “BoletimCtrl” a todo instante.

Recorri à diretiva ngRepeat para montar o cabeçalho da tabela — já que eu não tenho mais idade pra ficar escrevendo um monte de…

:

...

Alunong-repeat='bimestre in boletim.bimestres'>
    | {{ bimestre }}º Bim
    Média

 

O que estou fazendo é replicar o elemento HTML (…

) para cada item do array bimestres (é a mesma coisa que se faz com o foreach do Perl e PHP).

A mesma coisa é feita no corpo da tabela, desta vez aninhado dois ngRepeat:

...

ng-repeat="aluno in boletim.turma">
  |{{ aluno.nome | uppercase }}
  |ng-repeat="nota in aluno.notas">
  | | {{ nota | number:2 }}
  |                     
  |{{ boletim.mediaAritmetica( aluno.notas ) | number:2 }}

 

Tanto “uppercase” quanto “number:«n»” são filtros, eles servem para formatar o conteúdo das variáveis. O primeiro para deixar o texto em caixa alta e o segundo para formatar os valores numéricos com duas casas decimais.

Finalizando o HTML está a linha:

...

Arquivo gerado automaticamente as {{ boletim.agora | date:’medium’ }}

E tudo gravado em exemplo-abj-2.html mas ainda falta a parte funcional.

A parte JavaScript

De acordo com o MVC no HTML eu defini a visão e aqui serão definidos os controles e também o modelo. Ao contrário do exercício anterior coloquei o a minha “base de dados” em um arquivo JSON ao invés de um objeto JavaScript.

Aqui está um trecho do arquivo exemplo-abj-2.json:

[
    {
        "nome": "Adão Nogueira",
        "notas": [
            9.89,
            8.75,
            6.34,
            8.05
        ]
    },
    ...
]

Basicamente é o mesmo conteúdo que eu escreveria no programa só que armazenado em um arquivo a parte e recuperado durante a execução.

Dicas: (1) Valide sempre o arquivo JSON antes de prosseguir na codificação e (2) há uma biblioteca bem legal com uma função bem útil, a JSON.stringify() — algo como o print_r do PHP — para visualizar o conteúdo dos objetos JavaScript e te ajudar a entender o que está dando errado.

E o único controle, o BoletimCtrl*:

var app=angular.module('exemplo2', [])
.controller("BoletimCtrl", [ '$http',function($http) {
   
  this.bimestres=[1,2,3,4];
  this.agora=Date.now();
        
  var exemplo2=this;
  exemplo2.turma=[];
  this.file=$http.get('exemplo-abj-2.json').success(function(data) {
  | exemplo2.turma=data;
  });

  this.mediaAritmetica=function(lista) {
  | var itens=lista.length;
  | var soma=0;
  | for ( i=0; i| | soma += lista[i];
  | }
  | return soma/itens;
  };
}]);

Na parte simples, o array bimestres contém os quatro elementos (1,2,3 e 4) usados para montar o cabeçalho, a variável agora pega a data e hora do computador.

Na parte complicada, eu crio um objeto chamado exemplo2 e dentro dele o array turma que armazenará o meu conteúdo Daí uso o serviço $http (um componente do AngularJS) para recuperar o arquivo via HTTP e o método .success() se encarrega de colocar o que foi lido (data) no lugar correto.

Do jeito que está não há necessidade de um servidor HTTP para carregar o conteúdo do arquivo JSON para dentro do programa.

Como sou otimista não defini o que fazer — o método .error() — no caso de alguma coisa dar errado.

A parte menos complicada, é uma função em JavaScript que calcula e retorna a média aritmética de qualquer array enviado para ela e tudo dentro de exemplo-abj-2.js.

(*) A partir da versão 1.6 do AgularJS o método success() deixou de existir sendo necessário substituí-lo pelo then().

Um resultado quase final

Colocando tudo junto o que temos é isto aqui:

exemplo-abj_plano

Tudo pronto, funcionando e sem precisar usar o Bootstrap 🙂

E agora o resultado final

Claro que agora é preciso “deixar mais bonito” apelando para o Bootstrap (ou fazer um CSS do zero). E eu já deixei o HTML mais ou menos pronto com a formatação que eu queria:


|

Outro exemplo simples com AngularJS

|

| |   |

|

…> | | | |
| | | … | ||

|

| | |

 

Daí foi acrescentar dentro de…:

... href="http://.../css?family=Titillium Web">
... href="http://.../bootstrap.min.css">    
... href="exemplo-abj-2.css">

No final de…:

... src="https://.../jquery.min.js">
... src="http://.../bootstrap.min.js">

Customizar alguma coisa em exemplo-abj-2.css e obter algo mais elegante:

exemplo-abj_css

E pronto!

Para acabar…

Os arquivos estão disponíveis no repositório específico para os arquivos do blog no GitHub  e, claro, comentários e sugestões são bem vindos.

Anúncios

8 comentários sobre “Um outro exemplo de AngularJS

  1. Pingback: Um outro exemplo de AngularJS: boletim e média de alunos - Peguei do

  2. Pingback: JSON em shell script | giovannireisnunes

  3. Pingback: Corrigindo o exemplo de AngularJS | giovannireisnunes

  4. Pingback: Dois Anos! | giovannireisnunes

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s