AngularJS : Création d'objets qui correspondent à des ressources REST (style ORM)

Question

Je suis assez novice en matière d'AngularJS, mais je ne sais pas vraiment comment le relier au backend REST Api de mon serveur.

Par exemple, disons que j'ai une ressource "image" que j'obtiens par GET-ing : myApi/image/1/. Cela renvoie un objet json avec divers champs. Disons quelque chose comme :

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

Maintenant, je veux une sorte de représentation de cet objet "Image" dans mon application AngularJS. Cette représentation est plus qu'un simple mappage des champs - je veux ajouter des fonctions "d'aide", par exemple une fonction qui convertit le champ date_create en quelque chose de lisible par l'homme.

Je connais le service $resource, mais je ne sais pas exactement ce que je dois faire pour créer une "classe" de base dans Angular, qui utilise Resource pour obtenir l'objet JSON, mais qui l'améliore ensuite en ajoutant diverses fonctions d'aide.

Des points bonus :

Je ne sais pas non plus comment ajouter des "relations" entre les modèles. Par exemple, je peux avoir une ressource "user" qui contient une ressource "image", et je veux saisir la ressource User, mais être capable d'appeler les fonctions d'aide "Image" sur la partie "Image" du modèle.

Answer 1

JSData
Un projet qui a débuté sous le nom d'angular-data est maintenant "un magasin de données agnostique construit pour la facilité d'utilisation et la tranquillité d'esprit". Il dispose d'une excellente documentation et prend en charge les relations, les backends multiples (http, localStorage, firebase), la validation et bien sûr l'intégration angular.
http://www.js-data.io/

BreezeJS
Le site Chaîne YouTube AngularJS caractéristiques ce vidéo utilisant BreezeJS

Il s'agit d'un ORM avancé qui prend même en charge le filtrage côté client et d'autres fonctions intéressantes. Il convient mieux aux backend qui supportent OData mais il est possible de le faire fonctionner avec d'autres types de backends.

ngResource
Une autre option consiste à utiliser le ngResource Dans le cadre de l'application de la loi sur la protection de l'environnement, voici un exemple de la façon dont vous pouvez l'étendre avec vos propres fonctions :

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;
});

J'ai trouvé que ngResource était très limité, même comparé à Backbone.Model qui a :

• Analyse JSON personnalisée via Model.parse
• Possibilité d'étendre un BaseModel (No the baseUrl in ngResource)
• D'autres crochets comme Backbone.sync, qui permet le LocalStorage, etc.

Restangulaire
"Service AngularJS pour gérer les ressources Rest API Restful correctement et facilement"
https://github.com/mgonto/restangular

Ou essayez d'autres ORM.
https://stackoverflow.com/questions/6786307/which-javascript-orm-to-use

Answer 2

Je suis le créateur de Restangular, mon opinion peut donc être biaisée.

Mais comme Bob l'a dit, vous pouvez utiliser Restangular pour cela.

Restangular utilise vos ressources Restful API pour parcourir l'arbre. Vous pouvez également y ajouter de nouvelles méthodes.

C'est un exemple de codage : https://github.com/mgonto/restangular#lets-code

Et de cette façon vous pouvez ajouter de nouvelles méthodes à votre objet (Les points bonus :)) https://github.com/mgonto/restangular#creating-new-restangular-methods

J'espère que cela fonctionnera pour vous :).

Sinon, vous pouvez également utiliser ngResource ($resource) pour cela, mais à mon avis, cela nécessite un peu d'"amour" et de "sucre".

Bests

Answer 3

Pour une interaction simple, vous pouvez utiliser Angular-Resource ( http://docs.angularjs.org/api/ngResource .$resource) qui peut s'avérer très pratique pour une simple interaction REST (pour le télécharger, rendez-vous à l'adresse suivante http://code.angularjs.org/1.0.6/ )

Malheureusement, vous n'avez qu'un contrôle limité en utilisant les ressources angulaires, et pour tout ce qui est plus avancé, vous devrez créer vos propres services basés sur le service $http d'Angularjs -. http://docs.angularjs.org/api/ng .$http.

J'espère que cela vous aidera.

Answer 4

ModelCore ( https://github.com/klederson/ModelCore ) fonctionne à peu près comme ça, et est très très facile à mettre en œuvre :

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 5

Angulaire Rest-Mod est une autre bonne option pour les modèles / ORM basés sur Angular.

Restmod crée des objets que vous pouvez utiliser depuis Angular pour interagir avec votre API RESTful. Il prend également en charge les collections, les relations, les crochets de cycle de vie, le renommage des attributs et bien plus encore.