サーバーからデータを取得する推奨方法


145

を使用せずにAngularJSでサーバーデータソースに接続するための推奨される方法は何ですか$resource

には次の$resourceような多くの制限があります。

  1. 適切な先物を使用していない
  2. 十分な柔軟性がない

6
この問題(https://github.com/angular/angular.js/issues/415)がクローズされていることを考えると、$ resourceが適切なフューチャーを使用しないという制限があることはまだ本当ですか?(Angularは初めてですが、質問がわかりにくい場合はお詫びします。)編集-このコミット(github.com/angular/angular.js/commit/…)も、$ resourceにその制限がないことを示唆しているようです。
Jason Sydes 2013

1
自分の質問に答えることはここで合法です。「あなたの知識を共有する」と呼ばれる「質問する」を押してください
holms '20 / 07/20

回答:


229

バックエンドと通信するときに$ resourceが適切でない場合があります。これは、リソースを使用せずに$ 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の質問かもしれませんが、単一の応答だけでなく複数の応答を返すget()を可能にするためにこれをどのように拡張しますか?
ネイトバニー

2
@NathanBunney、あなたは静的なgetメソッドをループして結果をループし、Booksの配列を構築することができます。
Ben Lesh

4
@NathanBunney 'Book.getAll = function(){return $ http.get(' / Book ')。then(function(response){var books = []; for(var i = 0; i <response.data.length ; i ++){books.push(new Book(response.data [i]));}本を返す;}); }; '
Yair Nevet 2013年

2
コントローラ間bookbooksのコレクションをどのように共有しますか?
Lukas 2013

1
これは素晴らしいことです(明らかにミスコがフレームワークを作成して以来)、しかし、私はそれを再利用可能にする方法を理解するのに苦労しています。CRUD関数を1回だけ実装し、urlBase引数のみを必要とする子ファクトリー/サービスでその機能を継承したい場合(各インスタンスがurlBaseの新しいコピーを必要としないように、プロトタイプに保存することが望ましい)、どうすればよいでしょうか。私がする?
Dean Stamler 2014

26

$ resourceを使用することをお勧めします。

Angularjsの次のバージョンで(URLオーバーライド)をサポートする可能性があります。その後、次のようにコーディングできます。

// 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の現在のバージョンは、$ resourceモジュールでのURLオーバーライドをサポートしています。
thanksnote 2013年

16
あなたは何かをする方法についてフレームワークの実際の作成者を推薦しています:P
HeberLZ

11
ああ、神様!恥ずかしいです。
thanksnote
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.