AngularJS: создание объектов, отображающих ресурсы REST (ORM-Style)

Я новичок в AngularJS, но я не совсем понимаю, как связать его с моим сервером REST Api.

Например, скажем, у меня есть ресурс "image", который я получаю с помощью GET-ing: myApi/image/1/. Это возвращает объект json с различными полями. Позвольте сказать что-то вроде:

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

Теперь я хочу какое-то представление в моем приложении AngularJS этого объекта "Изображение". Это представление больше, чем просто сопоставление полей - я хочу добавить "вспомогательные" функции, например функцию, которая преобразует поле date_create во что-то человекочитаемое.

Я знаю о службе $resource, но я не понимаю, что мне нужно сделать, чтобы создать базовый "класс" в Angular, который использует Resource для получения объекта JSON, но затем улучшает его, добавляя различные помощники функции.

Бонусные баллы:

Я также не понимаю, как добавить "отношения" между моделями. Например, у меня может быть "пользовательский" ресурс, который встроил в него ресурс "образ", и я хочу захватить ресурс пользователя, но иметь возможность вызвать вспомогательные функции "Image" в части "Изображение" модель.

Ответ 1

JSData​​STRONG >
Проект, который начинался с angular -data, теперь является "хранилищем данных с картой-агностиком, созданным для удобства использования и спокойствия". Он имеет отличную документацию и поддерживает отношения, несколько бэкэндов (http, localStorage, firebase), проверку и, конечно, интеграцию angular.
http://www.js-data.io/

BreezeJS
Канал AngularJS показывает это видео, используя BreezeJS

Это продвинутый ORM, который даже поддерживает фильтрацию на стороне клиента и другие интересные вещи. Он лучше всего подходит для бэкэнд, который поддерживает OData, но может быть сделан для работы с другими типами бэкэндов.

ngResource
Другой вариант - использовать ngResource, вот пример того, как расширить его своими собственными функциями:

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

Я нашел ngResource очень ограниченным, даже по сравнению с Backbone.Model, который имеет:

  • Пользовательский анализ JSON через Model.parse
  • Возможно расширение BaseModel (нет baseUrl в ngResource)
  • Другие крючки, такие как Backbone.sync, которые позволяют LocalStorage и т.д.

Restangular
"Служба AngularJS для правильной и легкой обработки ресурсов Rest API Restore"
http://ngmodules.org/modules/restangular

Или попробуйте использовать другие ORM
Какие опции доступны для клиентской JavaScript ORM?

Ответ 2

Я создатель Restangular, поэтому мое мнение может быть предвзятым.

Но, как сказал Боб, вы можете использовать Restangular для него.

Restangular использует ресурсы Restful API для перехода по дереву. Вы также можете добавить к этому новые методы.

Это пример кодирования: https://github.com/mgonto/restangular#lets-code

И таким образом вы можете добавить новые методы к вашему объекту (Бонусные очки:)) https://github.com/mgonto/restangular#creating-new-restangular-methods

Надеюсь, это сработает для вас:).

В противном случае вы также можете использовать ngResource ($ resource) для этого, но, на мой взгляд, ему нужны "любовь" и "сахар".

Bests

Ответ 3

Для простого взаимодействия вы можете использовать Angular -Resource (http://docs.angularjs.org/api/ngResource. $resource), который может быть весьма удобен для простого взаимодействия REST (чтобы загрузить его на http://code.angularjs.org/1.0.6/)

К сожалению, вы используете ограниченный контроль при использовании ресурса angular, а для чего-то более продвинутого вам нужно будет создать свои собственные услуги на основе сервиса Angularjs $http - http://docs.angularjs.org/api/ng. $HTTP.

Надеюсь, что это поможет.

Ответ 4

После многочисленных исследований, приведен полный список доступных решений:

но, честно говоря, я был не очень доволен, поэтому решил добавить в список свое собственное решение ха-ха. Посмотрите здесь: $modelFactory.

Ваш код конечного результата выглядит примерно так:

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

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

return module;

Я считаю, что это лучшее решение для остальных, потому что в основном определение модели очень напоминает Angular ngResource, добавляя только низкоуровневые функции, которых нужно, чтобы этого не хватало. Его сверхлегкий (1,45k gzip/min) и имеет только несколько небольших зависимостей (без lodash, jquery и т.д.).

Ответ 5

ModelCore (https://github.com/klederson/ModelCore) работает примерно так, и это очень легко реализовать:

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

Ответ 6

Angular Rest-Mod - еще один хороший вариант для моделей с Angular/ORM.

Restmod создает объекты, которые можно использовать из Angular для взаимодействия с вашим RESTful API. Он также поддерживает коллекции, отношения, крючки жизненного цикла, переименование атрибутов и многое другое.

Ответ 7

Еще один пример помощника для ngResource. Это зависит от того факта, что подавляющее большинство услуг - это нечто подобное:

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

Итак, задача состоит в том, чтобы создать помощника, который создает объекты ресурсов AngularJS, которые отображаются на таких сервисах. Вот он:

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

Итак, чтобы использовать его, просто наберите этот помощник

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

И тогда вы можете использовать Post и PostComment в коде с необходимыми параметрами, такими как: post_id