วิธีที่แนะนำในการรับข้อมูลจากเซิร์ฟเวอร์


145

เป็นวิธีที่แนะนำในการเชื่อมต่อกับแหล่งข้อมูลเซิร์ฟเวอร์ใน AngularJS $resourceโดยไม่ต้องใช้อะไร

$resourceมีข้อ จำกัด หลายอย่างเช่น:

  1. ไม่ได้ใช้ฟิวเจอร์สที่เหมาะสม
  2. ไม่ยืดหยุ่นเพียงพอ

6
ยังคงเป็นความจริงหรือไม่ที่ $ resource มีข้อ จำกัด ในการไม่ใช้ฟิวเจอร์สที่เหมาะสมเนื่องจากปัญหานี้(https://github.com/angular/angular.js/issues/415)ถูกปิด? (ฉันใหม่กับ Angular ขอโทษถ้าคำถามเกิดความสับสน) แก้ไข - การกระทำนี้ ( github.com/angular/angular.js/commit/ … ) ดูเหมือนว่าจะแนะนำว่า $ resource อาจไม่มีข้อ จำกัด อีกต่อไปหรือไม่
Jason Sydes

1
มันถูกกฎหมายที่นี่เพื่อตอบคำถามของคุณเอง .. กดปุ่ม "ถามคำถาม" ที่เรียกว่า "แบ่งปันความรู้ของคุณ"
Holms

คำตอบ:


229

มีหลายกรณีที่ทรัพยากร $ อาจไม่เหมาะสมเมื่อพูดคุยกับแบ็กเอนด์ สิ่งนี้แสดงวิธีตั้งค่า $ resource เช่นพฤติกรรมโดยไม่ต้องใช้ทรัพยากร

angular.module('myApp').factory('Book', function($http) {
  // Book is a class which we can use for retrieving and 
  // updating data on the server
  var Book = function(data) {
    angular.extend(this, data);
  }

  // a static method to retrieve Book by ID
  Book.get = function(id) {
    return $http.get('/Book/' + id).then(function(response) {
      return new Book(response.data);
    });
  };

  // an instance method to create a new Book
  Book.prototype.create = function() {
    var book = this;
    return $http.post('/Book/', book).then(function(response) {
      book.id = response.data.id;
      return book;
    });
  }

  return Book;
});

จากนั้นภายในคอนโทรลเลอร์ของคุณคุณสามารถ:

var AppController = function(Book) {
  // to create a Book
  var book = new Book();
  book.name = 'AngularJS in nutshell';
  book.create();

  // to retrieve a book
  var bookPromise = Book.get(123);
  bookPromise.then(function(b) {
    book = b;
  });
};

1
อาจเป็นคำถาม noob แต่จะขยายนี้เพื่อให้ได้รับ () ที่ตอบกลับหลายคำตอบไม่ใช่แค่คำตอบเดียว?
Nate Bunney

2
@NathanBunney คุณสามารถมีวิธีการรับแบบคงที่ของคุณด้านบนวนผลและสร้างอาร์เรย์ของหนังสือ
เบ็นเลช

4
@NathanBunney 'Book.getAll = function () {ส่งกลับ $ http.get (' / Book ') จากนั้น (ฟังก์ชัน (ตอบกลับ) {var books = []; สำหรับ (var i = 0; i <response.data.length ; i ++) {books.push (หนังสือเล่มใหม่ (response.data [i]));} ส่งคืนหนังสือ;}); };'
Yair Nevet

2
คุณจะแชร์bookหรือสะสมbooks ระหว่างคอนโทรลเลอร์อย่างไร?
Lukas

1
นี่เป็นสิ่งที่ยอดเยี่ยม (เห็นได้ชัดตั้งแต่ Misko สร้างกรอบ) แต่ฉันพยายามดิ้นรนหาวิธีทำให้มันสามารถใช้ซ้ำได้ ถ้าฉันต้องการที่จะใช้ฟังก์ชั่น CRUD เพียงครั้งเดียวแล้วสืบทอดการทำงานของพวกเขาในโรงงาน / บริการเด็กที่ต้องการเพียงอาร์กิวเมนต์ urlBase (เก็บไว้ในต้นแบบโดยเฉพาะเพื่อให้แต่ละอินสแตนซ์ไม่ต้องการสำเนาใหม่ของ urlBase) ผมทำนั่น?
Dean Stamler

26

ผมขอแนะนำให้คุณใช้$ ทรัพยากร

มันอาจรองรับ (แทนที่ URL) ในรุ่นถัดไปของ Angularjs จากนั้นคุณจะสามารถเขียนโค้ดดังนี้:

// need to register as a serviceName
$resource('/user/:userId', {userId:'@id'}, {
    'customActionName':    {
        url:'/user/someURI'
        method:'GET',
        params: {
            param1: '....',
            param2: '....',
        }
    },
     ....
});

และการโทรกลับสามารถจัดการได้ในขอบเขต ctrl ดังนี้

// ctrl scope
serviceName.customActionName ({
    paramName:'param',
    ...
}, 
function (resp) {
    //handle return callback
}, 
function (error) {
    //handler error callback
});

อาจเป็นไปได้ว่าคุณสามารถจัดการกับรหัสในระดับที่สูงกว่านามธรรม


2
เวอร์ชันปัจจุบันของ angular.js รองรับการแทนที่ url ในโมดูล $ resource
Thanksnote

16
ฮ่าฮ่าคุณกำลังแนะนำผู้สร้างกรอบจริงเกี่ยวกับวิธีการทำบางสิ่งบางอย่าง: P
HeberLZ

11
พระเจ้าช่วย! ฉันรู้สึกละอายใจ
Thanksnote
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.