it-swarm.com.de

AngularJS: Objekte erstellen, die REST Resources (ORM-Style)) zugeordnet sind

Ich bin ziemlich neu in AngularJS, aber ich bin ziemlich unklar, wie ich es mit dem REST Api-Backend meines Servers verknüpfen soll.

Angenommen, ich habe eine "Bild" -Ressource, die ich mit GET-ing erhalte: myApi/image/1 /. Dies gibt ein JSON-Objekt mit verschiedenen Feldern zurück. Sagen wir mal so etwas wie:

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

Jetzt möchte ich in meiner AngularJS-App eine Art Darstellung dieses "Image" -Objekts. Diese Darstellung ist mehr als nur eine Abbildung der Felder - ich möchte "Hilfsfunktionen" hinzufügen, zum Beispiel eine Funktion, die das date_create Feld in etwas für Menschen lesbares.

Ich kenne den $ resource-Dienst, aber mir ist nicht klar, was ich tun muss, um eine grundlegende "Klasse" in Angular zu erstellen, die Resource verwendet, um das JSON-Objekt abzurufen, es dann aber durch Hinzufügen verschiedener Hilfsfunktionen erweitert.

Bonuspunkte:

Mir ist auch unklar, wie man "Beziehungen" zwischen Modellen hinzufügt. Zum Beispiel könnte ich eine "Benutzer" -Ressource haben, in die eine "Bild" -Ressource eingebettet ist, und ich möchte die Benutzer-Ressource greifen, kann aber die Hilfsfunktionen "Bild" für den Teil "Bild" von aufrufen das Model.

64
Edan Maor

JSData
Ein Projekt, das als Angular-Data begann, ist jetzt "ein Framework-agnostischer Datenspeicher, der auf Benutzerfreundlichkeit und Sicherheit ausgelegt ist". Es ist hervorragend dokumentiert und unterstützt Relationen, mehrere Backends (http, localStorage, firebase), Validierung und natürlich angular integration.
http://www.js-data.io/

BreezeJS
Der AngularJS YouTube-Kanal bietet dieses Video mit BreezeJS

Das ist ein fortschrittliches ORM, das sogar clientseitige Filterung und andere coole Dinge unterstützt. Es eignet sich am besten für Backends, die OData unterstützen, kann aber auch für andere Arten von Backends verwendet werden.

ngResource
Eine andere Möglichkeit ist die Verwendung von ngResource . Hier ist ein Beispiel, wie Sie es mit Ihren eigenen Funktionen erweitern können:

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

Ich fand ngResource sehr begrenzt, auch im Vergleich zu Backbone.Model mit:

  • Benutzerdefinierte JSON-Analyse über Model.parse
  • Möglichkeit ein BaseModel zu erweitern (Nein das baseUrl in ngResource)
  • Andere Hooks wie Backbone.sync, die LocalStorage aktivieren, usw.

Restangular
"AngularJS-Service für den korrekten und einfachen Umgang mit Rest API Restful Resources"
http://ngmodules.org/modules/restangular

Oder probieren Sie einige der anderen ORMs
Welche Optionen stehen für clientseitiges JavaScript ORM zur Verfügung?

80
Bob Fanger

Ich bin der Schöpfer von Restangular, daher kann meine Meinung voreingenommen sein.

Aber wie Bob sagte, können Sie Restangular dafür verwenden.

Restangular verwendet Ihre Restful-API-Ressourcen, um den Baum zu durchsuchen. Sie können diesem auch neue Methoden hinzufügen.

Dies ist ein Codierungsbeispiel: https://github.com/mgonto/restangular#lets-code

Und auf diese Weise können Sie Ihrem Objekt neue Methoden hinzufügen (Die Bonuspunkte :)) https://github.com/mgonto/restangular#creating-new-restangular-methods

Hoffe das klappt für dich :).

Ansonsten kannst du auch ngResource ($ resource) verwenden, aber meiner Meinung nach braucht es etwas "Liebe" und "Zucker".

Beste

15
mgonto

Für eine einfache Interaktion können Sie Angular-Resource ( http://docs.angularjs.org/api/ngResource . $ Resource) verwenden, was für einfache REST = Interaktion (zum Herunterladen gehen Sie zu http://code.angularjs.org/1.0.6/ )

Leider haben Sie bei der Verwendung von angular resource nur eingeschränkte Kontrolle, und für etwas Fortgeschritteneres müssen Sie Ihre eigenen Dienste auf der Grundlage von Angulars $ http service - http: // docs erstellen. angularjs.org/api/ng .$http.

Hoffentlich hilft das.

7
Guy Nesher

Nach vielen Recherchen finden Sie hier eine umfassende Liste aller verfügbaren Lösungen:

aber ehrlich gesagt war ich nicht sehr glücklich, also habe ich beschlossen, meine eigene Lösung in die Liste aufzunehmen, haha. Probieren Sie es hier aus: $ modelFactory .

Ihr Endergebniscode sieht ungefähr so ​​aus:

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

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

return module;

Ich glaube, dies ist im Übrigen eine bessere Lösung, da die Modelldefinition hauptsächlich Angulars ngResource sehr ähnlich ist und nur Features auf niedriger Ebene hinzufügt, die man benötigt, denen es fehlt. Es ist superleicht (1,45k Gzip/Min.) Und hat nur ein paar kleine Abhängigkeiten (kein Lodash, JQuery usw.).

5
amcdnl

ModelCore ( https://github.com/klederson/ModelCore ) funktioniert ungefähr so ​​und ist sehr einfach zu implementieren:

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());
});
4
Klederson Bueno

Angular Rest-Mod ist eine weitere gute Option für Angular-basierte Modelle/ORM.

Restmod erstellt Objekte, die Sie in Angular zur Interaktion mit Ihrer RESTful-API verwenden können. Außerdem werden Sammlungen, Beziehungen, Lifecycle-Hooks, Attributumbenennungen und vieles mehr unterstützt.

3
amcdnl

Ein weiteres Beispiel für einen Helfer für ngResource. Dies beruht auf der Tatsache, dass die überwiegende Mehrheit der Dienstleistungen in etwa so ist:

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

Die Aufgabe besteht also darin, einen Helfer zu erstellen, der AngularJS-Ressourcenobjekte erstellt, die solchen Diensten zugeordnet sind. Hier ist es:

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

Um es zu benutzen, rufen Sie einfach diesen Helfer auf

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

Und dann können Sie Post und PostComment in Code mit den erforderlichen Parametern wie post_id verwenden

2
Denis