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.