javascript - services - AngularJS: creación de objetos que se correlacionan con recursos REST(estilo ORM)

spring rest angular

Question

Soy bastante nuevo en AngularJS, pero no tengo muy claro cómo vincularlo al backend REST Api de mi Servidor.

Por ejemplo, supongamos que tengo un recurso de "imagen" que obtengo por GET-ing: myApi / image / 1 /. Esto devuelve un objeto json con varios campos. Digamos algo como:

{url: "some/url", date_created: 1235845}

Ahora, quiero algún tipo de representación en mi aplicación AngularJS de este objeto "Imagen". Esta representación es más que solo un mapeo de los campos: deseo agregar funciones de "ayuda", por ejemplo, una función que convierta el campo date_create en algo legible por el ser humano.

Sé sobre el servicio de $ recursos, pero no tengo claro qué hacer para crear una "clase" básica en Angular, que usa Recurso para obtener el objeto JSON, pero luego lo mejora agregando varias funciones auxiliares.

Puntos extra:

Tampoco estoy claro cómo agregar "relaciones" entre los modelos. Por ejemplo, podría tener un recurso de "usuario" que haya incorporado en su interior un recurso de "imagen", y querré tomar el recurso de usuario, pero podré llamar a las funciones auxiliares de "Imagen" en la parte "Imagen" de el modelo.

Answer 1

Después de mucha investigación, aquí hay una lista completa de todas las soluciones disponibles:

• Restmod

• Modelizer

• ModelCore

• angular-watch-resource

• angular-restful

• ngResource

• angularjs-rails-resource

• angular-nested-resource

• Aar.js

• Angular Activerecord

• Angular-Data

• ngActiveResource

• restangular

• BreezeJS

• ng-backbone

pero sinceramente, no estaba muy feliz, así que decidí agregar a la lista mi propia solución jaja. Compruébelo aquí: $modelFactory .

El código de resultado final termina pareciéndose a:

var module = angular.module(''services.zoo'', [''modelFactory'']);

module.factory(''AnimalModel'', function($modelFactory){
  return $modelFactory(''api/zoo'');
});

return module;

Creo que esta es una solución mejor que el resto porque, principalmente, la definición del modelo se asemeja mucho a Angular''s ngResource , agregando solo las características de bajo nivel que uno necesita y de las que carece. Es súper liviano (1.45k gzip / min) y solo tiene algunas pequeñas dependencias (no lodash, jquery, etc.).

Answer 2

ModelCore ( https://github.com/klederson/ModelCore ) funciona más o menos así, y es muy fácil de implementar:

var ExampleApp = angular.module(''ExampleApp'', [''ModelCore'']); //injecting ModelCore

ExampleApp.factory("Users",function(ModelCore) {
  return ModelCore.instance({
    $type : "Users", //Define the Object type
    $pkField : "idUser", //Define the Object primary key
    $settings : {
      urls : {
        base : "http://myapi.com/users/:idUser",
      }
    },
    $myCustomMethod : function(info) { //yes you can create and apply your own custom methods
        console.log(info);
    }
  });
});

//Controller
function MainCrtl($scope, Users) {
  //Setup a model to example a $find() call
  $scope.AllUsers = new Users();

  //Get All Users from the API
  $scope.AllUsers.$find();

  //Setup a model to example a $get(id) call
  $scope.OneUser = new Users();

  //Hey look there are promisses =)
  //Get the user with idUser 1 - look at $pkField
  $scope.OneUser.$get(1).success(function() {
    console.log("Done!",$scope.OneUser.$fetch());
});

Answer 3

Para una interacción simple puede usar Angular-Resource ( http://docs.angularjs.org/api/ngResource . $ Resource) que puede ser bastante útil para la interacción REST simple (para descargarlo vaya a http://code.angularjs.org/1.0.6/ )

Lamentablemente, solo obtiene un control limitado cuando usa el recurso angular, y para algo más avanzado deberá crear sus propios servicios basados ​​en el servicio http $ Angularjs - http://docs.angularjs.org/api/ng . $ Http.

Espero que ayude.

Answer 4

Soy creador de Restangular, por lo que mi opinión puede ser parcial.

Pero como dijo Bob, puedes usar Restangular para eso.

Restangular usa tus recursos de API relajante para navegar por el árbol. También puede agregar nuevos métodos a esto.

Este es un ejemplo de codificación: https://github.com/mgonto/restangular#lets-code

Y de esta manera puede agregar nuevos métodos a su objeto (Los puntos de bonificación :)) https://github.com/mgonto/restangular#creating-new-restangular-methods

Espero que esto funcione para usted :).

De lo contrario, también puede usar ngResource ($ recurso) para esto, pero en mi opinión, necesita un poco de "amor" y "azúcar".

Mejores

Answer 5

Un ejemplo más de ayuda para ngResource. Esto se basa en el hecho de que la gran mayoría de los servicios es algo así:

http://host/api/posts
http://host/api/posts/123
http://host/api/posts/123/comments
http://host/api/posts/123/comments/456

Por lo tanto, la tarea consiste en crear un helper que cree objetos de recursos AngularJS que se correlacione con dichos servicios. Aquí está:

''use strict'';

var api = angular.module(''api'', [''ngResource'']);

// RESTful API helper
api.addService = function (serviceNameComponents) {
    var serviceName = "";
    var resource = "/api"; // Root for REST services
    var params = {};

    serviceNameComponents.forEach(function (serviceNameComponent) {
        serviceName += serviceNameComponent;

        var lowerCaseServiceNameComponent = serviceNameComponent.toLowerCase();
        var collection = lowerCaseServiceNameComponent + ''s'';
        var id = lowerCaseServiceNameComponent + ''Id'';

        resource += "/" + collection + "/:" + id;
        params[id] = ''@'' + id;
    });

    this.factory(serviceName, [''$resource'',
        function ($resource) {
            return $resource(resource, {}, {
                    query: {
                        method: ''GET'',
                        params: params,
                        isArray: true
                    },
                    save: {
                        method: ''POST'',
                    },
                    update: {
                        method: ''PUT'',
                        params: params,
                    },
                    remove: {
                        method: ''DELETE'',
                        params: params,
                    }
                }
            );
        }
    ]);
}

Entonces, para usarlo simplemente llame a este ayudante

api.addService(["Post"]);
api.addService(["Post", "Comment"]);

Y luego puedes usar Publicar y PublicarComentario en el código con parámetros necesarios como: post_id

Answer 6

Restmod es otra buena opción para Modelos basados ​​en Angular / ORM.

Restmod crea objetos que puede usar desde dentro de Angular para interactuar con su API RESTful. También es compatible con colecciones, relaciones, ganchos de ciclo de vida, cambio de nombre de atributo y mucho más.

Answer 7

JSData
Un proyecto que comenzó como datos angulares ahora es "un almacén de datos agnóstico del marco creado para facilitar el uso y la tranquilidad". Tiene una excelente documentación y soporte para relaciones, múltiples backends (http, localStorage, firebase), validación y, por supuesto, integración angular.
http://www.js-data.io/

BreezeJS
El canal de AngularJS YouTube presenta this video usando BreezeJS

Que es un ORM avanzado que incluso admite el filtrado del lado del cliente y otras cosas interesantes. Es más adecuado para back-end que sea compatible con OData , pero puede funcionar para otros tipos de backends.

ngResource
Otra opción es usar ngResource , aquí hay un ejemplo de cómo extenderlo con sus propias funciones:

module.factory(''Task'', function ($resource) {
    var Task = $resource(WEBROOT + ''api/tasks/:id'', {id: ''@id''}, {update: { method: ''PUT''}});
    angular.extend(Task.prototype, {

        anExampleMethod: function () {
            return 4;
        },

        /**
         * Backbone-style save() that inserts or updated the record based on the presence of an id.
         */
        save: function (values) {
            if (values) {
                angular.extend(this, values);
            }
            if (this.id) {
                return this.$update();
            }
            return this.$save();
        }
    });
    return Task;
});

Encontré ngResource muy limitado, incluso comparado con Backbone.Model que tiene:

• Análisis JSON personalizado a través de Model.parse
• Posible extender un modelo base (No la baseUrl en ngResource)
• Otros ganchos como Backbone.sync, que permite LocalStorage, etc.

Restangular
"El servicio AngularJS maneja los recursos relajantes de la API Rest de forma adecuada y fácil"
http://ngmodules.org/modules/restangular

O pruebe algunos de los otros ORM
¿Qué opciones están disponibles para el ORM de JavaScript del lado del cliente?