この記事では、
$resource
RESTFUL APIとの対話のための便利なインターフェイスを提供することにより、CRUD操作を合理化します。
$resource
セットアップと構成:angular-resource.js
メソッド:ngResource
5つのデフォルトのメソッド($resource
、)を使用して、安らかなエンドポイントと相互作用します。
get()
query()
拡張remove()
カスタムメソッドを追加したり、URLパラメーターやデータ変換などの構成を変更したりすることでカスタマイズを許可します。
delete()
$resource
前提条件:始めましょう:
angular-resource.js
ngResource
このように構成されたエンドポイントを備えたRESTFULバックエンドを期待しています。
angular.module('myApp', ['ngResource']);
この例では、バックエンドにnode.js、express、およびmongodbを使用しますが、RESTFUL APIは動作します。
どのように機能するか: $resource
依存関係の宣言:
リソースの作成:$resource
RESTエンドポイントURLを使用してに電話します。 これにより、リソースクラスが返されます。
$resource
$resource()
angular.module('myApp.services').factory('Entry', function($resource) { return $resource('/api/entries/:id'); });
:新しいリソース(投稿)を作成します。
get()
query()
save()
remove()
delete()
非getメソッド(、、
)は、angular.module('myApp.controllers').controller('ResourceController', function($scope, Entry) { Entry.get({id: $scope.id}, function(entry) { console.log(entry); }); Entry.query(function(entries) { console.log(entries); }); $scope.entry = new Entry(); $scope.entry.data = 'some data'; $scope.entry.$save(function() { /* data saved */ }); });
アップデートを実行するには(PUT)、カスタムメソッドを追加します:
angular.module('myApp', ['ngResource']);
$resource()
。
stripTrailingSlashes
記事では、コントローラー、ビュー、ルーティングを含む
を使用してフルムービーアプリケーションの構築を詳述しています(を使用)。 バックエンドAPIはcors対応で、$resource
でアクセスできます。 この例は、映画のエントリの作成、読み取り、更新、削除をカバーしています。
ui-router
http://movieapp-sitepointdemos.rhcloud.com/api/movies
よくある質問(FAQ):
この記事は、他のAngularモジュールとのエラー処理、カスタマイズ、テスト、互換性など、CRUD操作にを使用することに関する一般的な質問に対処する包括的なFAQセクションで終了します。 また、AngularJSの異なるバージョンでのAPIとさまざまなバージョンでの使用を明確にします。
以上がAngular' s $リソースを使用して数分でCRUDアプリを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。