AngularJS: creazione di oggetti mappati a risorse REST (stile ORM)

Question

Sono abbastanza nuovo su AngularJS, ma non sono abbastanza chiaro su come collegarlo al backend del mio REST Api del mio server.

Ad esempio, supponiamo di avere una risorsa "immagine" che ottengo tramite GET-ing: myApi/image/1 /. Questo restituisce un oggetto json con vari campi. Diciamo qualcosa di simile:

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

Ora, voglio un qualche tipo di rappresentazione nel mio AngularJS applicazione di questo oggetto "Immagine". Questa rappresentazione è più di una semplice mappatura dei campi: voglio aggiungere le funzioni di "aiuto", ad esempio una funzione che converte il campo date_create in qualcosa di leggibile.

Conosco il servizio risorse $, ma non sono chiaro cosa devo fare per creare una "classe" di base in Angular, che utilizza la risorsa per ottenere l'oggetto JSON, ma poi la migliora aggiungendo varie funzioni di supporto .

punti

bonus:

Sono anche poco chiaro come aggiungere "relazioni" tra i modelli. Ad esempio, potrei avere una risorsa "utente" che ha incorporato al suo interno una risorsa "immagine" e vorrò prendere la risorsa User, ma essere in grado di chiamare le funzioni helper "Immagine" nella parte "Immagine" di il modello.

Answer 1

JSData
Un progetto che è iniziato come angolare dei dati è ora "un archivio dati quadro-agnostic costruito per la facilità d'uso e la pace della mente". Ha un'ottima documentazione e supporto per le relazioni, backend multipli (http, localStorage, firebase), validazione e, naturalmente, integrazione angolare.
http://www.js-data.io/

BreezeJS
Il AngularJS YouTube channel caratteristiche this video utilizzando BreezeJS

Che è un ORM avanzata che supporta anche il filtraggio sul lato client e altre cose interessanti. È più adatto per il back-end che supporta OData, ma può essere fatto per funzionare su altri tipi di back-end.

ngResource
Un'altra opzione è quella di utilizzare il ngResource, ecco un esempio di come estendere con le proprie funzioni:

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

ho trovato ngResource ad essere molto limitato, anche rispetto ad Spina dorsale.Modello che ha:

• personalizzata JSON parsing tramite Model.parse
• possibile estendere un BaseModel (No l'baseurl in ngResource)
• Altri ganci come Backbone.sync, che consente LocalStorage, ecc

Restangular
"servizio AngularJS per gestire riposo RESTful API risorse correttamente e facilmente"
http://ngmodules.org/modules/restangular

Oppure provate alcune delle altre ORM del
What options are available for client-side JavaScript ORM?

Answer 2

Per semplice interazione è possibile utilizzare angolare-Resource (http://docs.angularjs.org/api/ngResource. $ Risorsa), che può essere molto utile per una semplice interazione REST (per scaricare vai a http://code.angularjs.org/1.0.6/)

Purtroppo si ottiene solo un controllo limitato quando si utilizzano risorse angolare e per qualcosa di più avanzato dovrai creare i tuoi servizi basati sul servizio $ http di Angularjs - http://docs.angularjs.org/api/ng. $ http.

Spero che questo aiuti.

Answer 3

Sono creatore di Restangular quindi il mio parere può essere prevenuto.

Ma come ha detto Bob, è possibile utilizzare Restangular per questo.

Restangular utilizza le risorse API restful per andare oltre l'albero. Puoi anche aggiungere nuovi metodi a questo.

Questo è Esempio di codifica: https://github.com/mgonto/restangular#lets-code

E in questo modo è possibile aggiungere nuovi metodi per l'oggetto (i punti bonus :)) https://github.com/mgonto/restangular#creating-new-restangular-methods

Spero che questo funziona per voi :).

Altrimenti, è anche possibile utilizzare ngResource ($ risorsa) per questo, ma a mio parere, ha bisogno di un po 'di "amore" e "zucchero".

Bests

Answer 4

ModelCore (https://github.com/klederson/ModelCore) funziona più o meno come questo, ed è molto molto facile da implementare:

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

più Un esempio di aiuto per ngResource. Questo si basa sul fatto che la stragrande maggioranza dei servizi è qualcosa di simile:

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

Quindi, il compito è quello di fare un aiuto che creano AngularJS oggetti risorsa che mappe su tali servizi. Eccolo:

'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, 
        } 
       } 
      ); 
     } 
    ]); 
} 

Quindi, per utilizzarlo è sufficiente chiamare questo helper

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

E poi è possibile utilizzare Post e Postcomment in codice con params necessari come: post_id

Answer 6

Angular Rest-Mod è un altro buona opzione per modelli angolari/ORM.

Restmod crea oggetti che è possibile utilizzare all'interno di Angular per interagire con l'API RESTful. Supporta inoltre collezioni, relazioni, hook del ciclo di vita, rinomina degli attributi e molto altro.

Answer 7

Dopo un sacco di ricerca, ecco un elenco completo di tutte le soluzioni disponibili:

• 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

ma sinceramente non ero molto contento, quindi ho deciso di aggiungere alla lista la mia soluzione haha. Dai un'occhiata qui: $modelFactory.

Il codice risultato finale finisce per guardare qualcosa di simile:

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

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

return module; 

Credo che questa sia una soluzione migliore rispetto al resto, perché soprattutto la definizione del modello è molto simile angolare di ngResource, aggiungendo solo di basso livello dispone di un esigenze che manca. È super leggero (1,45k gzip/min) e ha solo poche piccole dipendenze (niente lodash, jquery, ecc.).