AngularJS: Tạo các đối tượng ánh xạ tới tài nguyên REST (ORM-Style)

Question

Tôi khá mới với AngularJS, nhưng tôi không rõ ràng về cách liên kết nó với phần phụ trợ REST Api của máy chủ của tôi.

Ví dụ: giả sử tôi có tài nguyên "hình ảnh" mà tôi nhận được bằng cách lấy: myApi/image/1 /. Điều này trả về một đối tượng json với các trường khác nhau. Hãy nói điều gì đó như:

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

Bây giờ, tôi muốn có một loại đại diện trong ứng dụng AngularJS của đối tượng "Hình ảnh" này. Biểu diễn này không chỉ là một ánh xạ của các trường - tôi muốn thêm các hàm "helper", ví dụ một hàm chuyển đổi trường date_create thành một cái gì đó mà con người có thể đọc được.

Tôi biết về dịch vụ tài nguyên $, nhưng tôi không rõ mình cần làm gì để tạo "lớp" cơ bản trong Angular, sử dụng Tài nguyên để lấy đối tượng JSON, nhưng sau đó tăng cường nó bằng cách thêm các hàm trợ giúp khác nhau .

điểm

Bonus:

Tôi cũng không rõ ràng làm thế nào để thêm "mối quan hệ" giữa các mô hình. Ví dụ: tôi có thể có tài nguyên "người dùng" đã nhúng bên trong tài nguyên "hình ảnh" và tôi muốn lấy tài nguyên Người dùng nhưng có thể gọi chức năng trợ giúp "Hình ảnh" trên phần "Hình ảnh" của ngươi mâu.

Answer 1

JSData
Một dự án mà bắt đầu như là góc dữ liệu bây giờ là "một lưu trữ dữ liệu khung-agnostic xây dựng để dễ sử dụng và an tâm." Nó có tài liệu tuyệt vời và có hỗ trợ cho các mối quan hệ, nhiều phụ trợ (http, localStorage, firebase), xác nhận và tích hợp góc khóa học.
http://www.js-data.io/

BreezeJS
Các AngularJS YouTube channel tính năng this video sử dụng BreezeJS

Đó là một ORM tiên tiến mà thậm chí hỗ trợ lọc client-side và các công cụ mát mẻ khác. Nó phù hợp nhất cho chương trình phụ trợ hỗ trợ OData, nhưng có thể được thực hiện để hoạt động trên các loại phụ trợ khác.

ngResource
Một lựa chọn khác là sử dụng ngResource, đây là một ví dụ về cách mở rộng nó với các chức năng của riêng bạn:

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

tôi thấy ngResource là rất hạn chế, thậm chí so với Xương sống.Mô hình trong đó có:

• tùy chỉnh JSON phân tích qua Model.parse
• Có thể mở rộng một BaseModel (Không những baseUrl trong ngResource)
• móc khác như Backbone.sync, cho phép LocalStorage vv

Restangular
"AngularJS dịch vụ để xử lý phần còn lại RESTful API Tài đúng cách và dễ dàng"
http://ngmodules.org/modules/restangular

Hoặc thử một số khác ORM
What options are available for client-side JavaScript ORM?

Answer 2

Đối với tương tác đơn giản, bạn có thể sử dụng góc-Resource (http://docs.angularjs.org/api/ngResource. $ Tài nguyên) mà có thể khá hữu ích cho tương tác REST của đơn giản (tải nó đi đến http://code.angularjs.org/1.0.6/)

Đáng buồn là bạn chỉ có thể kiểm soát hạn chế khi sử dụng tài nguyên góc và đối với bất kỳ thứ gì nâng cao hơn, bạn sẽ cần tạo các dịch vụ của riêng mình dựa trên dịch vụ $ http Angularjs - http://docs.angularjs.org/api/ng. $ http.

Hy vọng điều đó sẽ hữu ích.

Answer 3

Tôi giả của Restangular nên quan điểm của tôi có thể bị sai lệch.

Nhưng như Bob đã nói, bạn có thể sử dụng Restangular cho nó.

Restangular sử dụng tài nguyên API Restful của bạn để đi qua cây. Bạn cũng có thể thêm các phương thức mới vào điều này.

này được mã hóa ví dụ: https://github.com/mgonto/restangular#lets-code

Và bằng cách này bạn có thể thêm các phương pháp mới để đối tượng của bạn (Điểm thưởng :)) https://github.com/mgonto/restangular#creating-new-restangular-methods

Hope này làm việc ra cho bạn :).

Nếu không, bạn cũng có thể sử dụng ngResource ($ tài nguyên) cho điều này nhưng theo ý kiến ​​của tôi, nó cần một số "tình yêu" và "đường".

trẻ ưa vận động

Answer 4

ModelCore (https://github.com/klederson/ModelCore) hoạt động khá nhiều như thế này, và rất rất dễ thực hiện:

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

hơn Một ví dụ về helper cho ngResource. Điều này dựa trên thực tế là đại đa số các dịch vụ là một cái gì đó như thế:

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

Vì vậy, nhiệm vụ là tạo ra một người trợ giúp tạo ra các đối tượng tài nguyên AngularJS ánh xạ trên các dịch vụ đó. Ở đây là:

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

Vì vậy, để sử dụng nó chỉ đơn giản gọi helper này

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

Và sau đó bạn có thể sử dụng bài viết và PostComment trong mã với params cần thiết như: POST_ID

Answer 6

Angular Rest-Mod là một lựa chọn tốt cho Mô hình dựa trên góc/ORM.

Restmod tạo các đối tượng mà bạn có thể sử dụng từ bên trong Angular để tương tác với RESTful API của bạn. Nó cũng hỗ trợ các bộ sưu tập, quan hệ, móc vòng đời, đổi tên thuộc tính và nhiều hơn nữa.

Answer 7

Sau nhiều nghiên cứu, đây là một danh sách toàn diện của tất cả các giải pháp có sẵn:

• 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

nhưng thành thật mà nói tôi không vui lắm, nên tôi quyết định thêm vào danh sách giải pháp của riêng mình haha. Hãy xem tại đây: $modelFactory.

mã kết thúc-Kết quả của bạn kết thúc lên tìm kiếm cái gì đó như:

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

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

return module; 

Tôi tin rằng đây là một giải pháp tốt hơn so với phần còn lại vì chủ yếu là định nghĩa mô hình gần giống với góc của ngResource, thêm chỉ ở mức độ thấp tính năng một nhu cầu nó thiếu. Siêu nhẹ của nó (1.45k gzip/phút) và chỉ có một vài phụ thuộc nhỏ (không có lodash, jquery, vv).