Até o presente momento aprendemos como utilizar um monte de softwares de modo independente e agora começamos a juntar todas às ideias. Porém, gostaria de lembrar que REST é uma Arquitetura e que pode ser aplicada a qualquer software, escolhi JavaScript simplesmente para mostrar que é possível criar um sistema interessante com essa tecnologia.
Considere as postagens passadas como pré-requisitos obrigatórios.
Montando o Ambiente
Inicialmente precisamos baixar o AngularJS, para isso digite:bower install angular
Veja mais referências sobre o Bower na postagem anterior. Para montarmos a estrutura do nosso sistema digite
express app cd app npm install
Crie dentro da pasta "app" a seguinte estrutura de pastas:
/sist /css /javascript /lib
Copie os seguintes arquivos:
- Para a pasta "css" copie o arquivo "bower_components\bootstrap\docs\assets\css\bootstrap.css"
- Para a pasta "lib" copie o arquivo "bower_components\angular\angular.min.js"
Pronto, toda a estrutura do nosso projeto já está montada.
AngularJS através do Servidor NodeJS
Começamos nossa aplicação na pasta "app", modifique o arquivo app.js:
var ficheInfo=[
{ id:1, nom:"Paulinho", prenom:"Moska" },
{ id:2, nom:"Maria", prenom:"Gadú" },
{ id:3, nom:"Cássia", prenom:"Eller" }
]
var express = require('express'),
routes = require('./routes'),
fs = require('fs');
var app = module.exports = express.createServer();
app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
app.use('/javascript', express.static(__dirname + '/sist/javascript'));
app.use('/lib', express.static(__dirname + '/sist/lib'));
});
app.configure('development', function(){
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});
app.configure('production', function(){
app.use(express.errorHandler());
});
// Rotas do Sistema
app.get('/', function(req, res) {
fs.readFile('./sist/hello.html', function(error, content) {
if (error) {
res.writeHead(500);
res.end();
} else {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(content, 'utf-8');
}
});
});
app.get('/api/affiche', function(req, res) {
res.json(ficheInfo);
});
app.listen(3000);
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);
Lembramos que este arquivo é o "tiro inicial" do nosso servidor. As modificações neste arquivo foram:
- A criação de uma lista de artistas com a seguinte estrutura: id, nome e sobrenome.
- A adição da FS para lermos arquivos.
- A disponibilização de uso das duas pastas contidas na pasta "sist"
- A modificação da rota padrão "/" para a execução do arquivo "hello.html".
- A adição da rota "/api/affiche" que gera uma saída em formato JSON da nossa lista de artistas criada inicialmente.
Uma das características de um sistema REST é a pré-descrição da arquitetura de GET e POST, ou seja, todas as rotas devem existir como identificação no servidor. Na pasta "sist" crie um arquivo chamado "hello.html" e adicione as seguintes linhas:
<!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="monControl">
<h3>Listagem dos Cantores</h3>
<div ng-repeat="a in artistas">
<p>{{a.id}}. {{a.nom}} {{a.prenom}}</p>
</div>
</body>
</html>
Como visto na aula de Listas com o AngularJS, temos a tag "ng-repeat" que interage com coleções. Na pasta "javascript" crie um arquivo chamado "hello.js" e adicione as seguintes linhas:
function monControl($scope,$http){
$http.get('/api/affiche').success(function(data){
$scope.artistas = data;
})
}
No controller "monControl" carregado para a variável de escopo "list o resultado da chamada da pasta "/api/affiche" que será produzida via JSON através do NodeJS. É dessa forma que ocorre a interação entre o NodeJS e o AngularJS, o servidor produz um conteúdo e o cliente obtém através de uma URL. Agora resta apenas executar a aplicação com o comando:
node app.js
Acesse o endereço: http://localhost:3000/, e veja a aplicação funcionando.
Obrigado e até a próximaFernando Anselmo
0 comentários:
Postar um comentário