Começamos nossa aplicação, porém quero entender alguns detalhes: Primeiro, por quê estamos usando o "Bootstrap" se quase não estamos utilizando um layout decente? Segundo, toda vez que mudamos algo no servidor teremos que derrubá-lo e iniciá-lo novamente? E terceiro, cadê a vantagem em usar o "AngularJS"? Do jeito que está acho que um simples HTML resolve. Armei algumas perguntas e nesta postagem pretendo corrigí-las.
Usando Realmente o Bootstrap e o AngularJS
Antes de mais nada quero confessar que sou um leitor compulsivo, então vamos mudar um pouco o escopo dessa aplicação de "discos" para "livros". Alteramos a variável ficheInfo no arquivo app.js para a seguinte variável:
var fichaLivro=[
{nome:'Effective Java', autor:'Joshua Bloch'},
{nome:'Year without Pants', autor:'Scott Berkun'},
{nome:'Confessions of public speaker', autor:'Scott Berkun'},
{nome:'JavaScript Good Parts', autor:'Douglas Crockford'},
{nome:'AngularJS', autor:'Brad Green & Shyam Seshadri'},
{nome:'Node.js in Action', autor:'Mike Cantelon, TJ Holowaychuk & Nathan Rajlich'},
{nome:'Node: Up and Running', autor:'Tom Hughes-Croucher & Mike Wilson'}
]
...
app.get('/api/ficha', function(req, res) {
res.json(fichaLivro);
});
Devemos pensar que em breve esses dados virão do MongoDB (em um próximo artigo). Vamos manter essa tabela relativamente simples, com o nome do livro e seus respectivos autores, apenas para não termos que nos preocupar em aprender comandos complexos do banco (o objetivo é aprender Arquitetura REST). Modificamos o arquivo hello.js de forma a armazenar os dados da página JSON gerada em uma variável:
function lstControl($scope,$http){
$http.get('/api/ficha').success(function(data){
$scope.livros = data;
})
$scope.index = -1;
$scope.select = function(index) {
$scope.index = index;
$livro = $scope.livros[index];
}
}
Um novo método select armazena um livro selecionado na tabela para fins de modificação. Por fim, trabalhamos sobre o HTML, iremos utilizar às praticidades do Bootstrap e do AngularJS como se deve, modificamos o arquivo hello.html para:
<!doctype html>
<html>
<head>
<meta Charest="UTF-8">
<title>Teste AngularJS/NodeJS</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="lib/angular.min.js"></script>
<script src="javascript/hello.js"></script>
</head>
<body ng-app ng-controller="lstControl">
<div class="container">
<h2>Meus Livros</h2>
<div class="btn-toolbar">
<div class="brn-group">
<a class="btn btn-large" href="">Editar</a>
</div>
</div>
<label for="criteria" class="label" style="margin-right:6px;">Pesquisar</label>
<input id="criteria" type="search" ng-model="criteria">
<table class="table table-striped table-hover table-bordered">
<thead>
<th>Título</th>
<th>Autor(es)</th>
</thead>
<tr ng-repeat="livro in livros | filter:criteria | orderBy:'nome'"
ng-click="select($index)" ng-class="{'info': $index == index}">
<td>{{livro.nome}}</td>
<td>{{livro.autor | uppercase}}</td>
</tr>
</table>
</div>
</body>
</html>
Toda a especificação CSS3 virá do Bootstrap, logo no começo temos um DIV que pertence a classe "container" que é a principal, então todos os outros elementos seguirão esta informação. Ganhamos uma barra de botões (futuramente será utilizada para I-A-E). Nossa tabela recebeu mais um item no qual podemos filtrar os livros (seja pelo título ou autor), isso acontece graças a um filtro (filter) do elemento ng-repeat. A tabela também está ordenada (orderBy) pelo campo 'nome'. Todos esses novos detalhes são realizados dinamicamente através do Ajax. Outra brincadeira foi quanto ao nome dos autores, que agora aparece sempre em letras maiúsculas (observe o 'uppercase'). Podemos selecionar cada elemento da tabela (futuramente para editar/excluir) que será destacado dos outros (através da ng-class), para realizar isso, capturamos o ng-click que é enviado para o método select que guarda este registro.
Supervisor
O que se entende por "hot-deploy"? É a capacidade de um servidor detectar se ocorreram mudanças em seus arquivos e disponibilizar para o cliente uma nova versão da aplicação. Supervisor é um pequeno script para o Node.js, simplesmente fica "escutando" as mudanças no código, e em caso positivo realiza um "hot-deploy", porém sem se preocupar com vazamentos de memória ou se certificar de limpar todas as referências inter-módulo, ou seja, excelente para um ambiente de desenvolvimento mas terrível para um de produção. Podemos proceder sua instalação pelo NPM da seguinte forma:
npm install supervisor -g
E agora iniciamos o servidor com:
supervisor app.js
Qualquer alteração em qualquer arquivo, será automaticamente detectada e servidor será reiniciado. Como dever de casa para a próxima lição, tente fazer com que ao clicar no botão editar seja chamado um formulário contendo o livro.
Obrigado e até a próximaFernando Anselmo
0 comentários:
Postar um comentário