Mudar a Camada de Visão
Dessa vez vamos mudar da visão ao servidor, nosso primeiro passo consiste em adicionar um botão na tela da listagem dos dados, para isso no arquivo \views\index.html adicionamos a seguinte codificação:
...
<h2>Meus Livros</h2>
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn btn-large" href="/novo">Novo</a>
</div>
</div>
<label for="criteria" class="label" style="margin-right:6px;">Pesquisar</label>
...
Devemos observar o local onde este botão será inserido. Nosso próximo passo consiste em adicionar o formulário a ser chamado quando este botão for pressionado. Na pasta \views criamos uma página chamada novo.html com a seguinte codificação:<!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/controllers.js"></script>
</head>
<body ng-app ng-controller="NovoCtrl">
<div class="container">
<h2>Novo Livro</h2>
<form ng-model="livro" name="livroform" class="form-horizontal">
<div>
<label for="nome" class="label" style="margin-right:6px;">Nome:</label>
<input id="nome" ng-model="livro.nome" size="80" />
</div>
<br />
<div>
<label for="autor" class="label" style="margin-right:6px;">Autor(es):</label>
<input id="autor" ng-model="livro.autor" />
</div>
<div class="form-actions">
<button ng-click="criar()" class="btn btn-primary">Salvar</button>
<a href="/" class="btn">Voltar</a>
</div>
</form>
</div>
</body>
</html>
Temos então um formulário para fornecer os dados a um objeto de Livro. Devemos lembrar que a arquitetura REST prega a utilização dos seguintes métodos:- POST para o evento de inclusão dos dados;
- PUT para o evento de alteração dos dados; e
- DELETE para o evento de exclusão dos dados.
Respeitaremos essas indicações, no arquivo \sist\javascript\controllers.js adicionamos a função NovoCtrl (abaixo da função ListaCtrl) que gerencia esta página:
function NovoCtrl ($scope, $http) {
$scope.criar = function() {
$http.post('/criar', $scope.livro)
.success(function(data){
if (data == 'err'){
alert("Houston, temos um problema");
} else {
alert("Livro Incluído...");
}
$scope.livro={};
})
}
}
Criamos uma função de escopo chamada criar que é utilizada pela tela (na Controller tudo o que é de $scope pode ser compartilhado com a tela), e ao ser chamada executa o método post da variável $http com a passagem do caminho e um objeto de Livro. Verifica a resposta se obteve ou não sucesso para inserir o novo livro.Mudar a Camada de Dados
No arquivo \views\dados\livroFuncoes.js adicionamos a função gravar (abaixo da função listar):
exports.gravar = function (req, res) {
var novoLivro = new livroModel({
nome:req.body.nome,
autor:req.body.autor
});
novoLivro.save(function (err) {
if (err) {
callback(err);
} else {
res.send();
}
});
}
Através do corpo da requisição (variável req) temos os dados do formulário. Certa vez me perguntaram se não era necessário gravar um id, perguntei se desejava trabalhar totalmente Orientado a Objetos ou não, não existem ids em OO (isso é coisa de banco relacional que precisa de chaves primárias para localizar registros), o que existe é o ObjectID que é mantido e controlado pelo banco, e com esse só vou me importar ao alterar um registro. Para adicionarmos um novo (repare o comando new) objeto no banco, disparamos o método save que envia se a informação foi ou não incluída no Banco.Mudar a Camada do Servidor
Precisamos de mais duas pequenas alterações, no arquivo \server\server.js adicionamos as novas rotas (na seção "Rotas do Sistema"), uma para chamar a tela e outra para disparar a função do banco:
app.get('/novo', routes.novo);
app.post('/criar', routes.criar);
E por fim adicionamos esses caminhos no arquivo \routes\index.js através da seguinte codificação:exports.novo = function(req, res){
fs.readFile('../views/novo.html', function(error, content) {
if (error) {
res.writeHead(500);
res.end();
} else {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(content, 'utf-8');
}
});
};
exports.criar = function(req, res) {
livro.gravar(req, res);
};
Já podemos inserir os registros em nosso banco (ou seja, concluímos a letra C), na próxima continuamos o nosso CRUD com a primeira parte da modificação dos dados na tabela.Obrigado e até a próxima
Fernando Anselmo
0 comentários:
Postar um comentário