Este meu artigo foi sobre como usar os recursos do AngularJS com o Silex. O AngularJS é excelente e quando tenho que voltar para o JQuery parece que voltei 10 anos em relação ao desenvolvimento web, mas negócios são negócios e preciso viver com o JQuery também. Por causa disso, este artigo é sobre como utilizar os recursos RestFull do Silex do artigo anterior, mas desta vez com o Jquery. Vamos começar!
Vamos criar um objeto javascript simples para manipular o recurso RestFull usando o Jquery:
var Resource = (function (jQuery) { function Resource(url) { this.url = url; } Resource.prototype.query = function (parameters) { return jQuery.getJSON(this.url, parameters || {}); }; Resource.prototype.get = function (id, parameters) { return jQuery.getJSON(this.url + '/' + id, parameters || {}); }; Resource.prototype.remove = function (id, parameters) { return jQuery.ajax({ url:this.url + '/' + id, xhrFields:JSON.stringify(parameters || {}), type:'DELETE', dataType:'json' }); }; Resource.prototype.update = function (id, parameters) { return jQuery.post(this.url + '/' + id, JSON.stringify(parameters || {}), 'json'); }; Resource.prototype.create = function (parameters) { return jQuery.post(this.url, JSON.stringify(parameters || {}), 'json'); }; return Resource; })(jQuery);
Como você pode ver, a biblioteca retorna promises ajax do JavaScript, então podemos usar callbacks done() e error() callbacks para trabalhar com os dados do servidor.
Aqui está nosso aplicativo de exemplo:
var host = document.location.protocol + '//' + document.location.host; var resource = new Resource(host + '/api/message/resource'); resource.create({ id: 10, author: 'myname', message: 'hola'}).done(function (data) { console.log("create element", data); }); resource.query().done(function (data) { console.log("query all", data); }); resource.update(10, {message: 'hi'}).done(function (data) { console.log("update element 1", data); }); resource.get(10).done(function (data) { console.log("get element 1", data); }); resource.remove(10).done(function (data) { console.log("remove element 1", data); }); resource.query().done(function (data) { console.log("query all", data); });
E é só isso. Você pode pegar o código completo do exemplo da minha conta do github.