Angular＆＃x27; s $リソースを使用して数分でCRUDアプリを作成します

この記事では、$resource

重要な概念：

レバレッジ
• ：$resourceRESTFUL APIとの対話のための便利なインターフェイスを提供することにより、CRUD操作を合理化します。 $resourceセットアップと構成：
• モジュールへの依存関係を宣言する必要があります。 angular-resource.jsメソッド：ngResource 5つのデフォルトのメソッド（
、
• 、、$resource、）を使用して、安らかなエンドポイントと相互作用します。 get()query()拡張save()：remove()カスタムメソッドを追加したり、URLパラメーターやデータ変換などの構成を変更したりすることでカスタマイズを許可します。 delete()
実用的な例：
• 段階的なガイドは、現実世界のシナリオでCRUD機能を紹介し、ムービーアプリケーションを構築します。 $resource前提条件：
• ファイルはhtmlに含める必要があり、angularjsモジュールは
：

への依存関係を宣言する必要があります。

始めましょう：

angular-resource.jsngResourceこのように構成されたエンドポイントを備えたRESTFULバックエンドを期待しています。

angular.module('myApp', ['ngResource']);

この例では、バックエンドにnode.js、express、およびmongodbを使用しますが、RESTFUL APIは動作します。

どのように機能するか：

$resource

依存関係の宣言：

コントローラーまたはサービスに

を注入します

リソースの作成：$resourceRESTエンドポイントURLを使用してに電話します。 これにより、リソースクラスが返されます。

1. $resource
デフォルトメソッドの使用：
2. リソースクラスが提供しています： $resource()
：単一のリソースを取得します。

angular.module('myApp.services').factory('Entry', function($resource) {
  return $resource('/api/entries/:id');
});

：リソースのコレクションを取得します。

3. ：新しいリソース（投稿）を作成します。

   /
   • ：リソースを削除します。get()
   • query()
   • 例の使用：save()
   • remove() delete()
4. インスタンスメソッド：

   非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 */ });
});

5. 更新操作：

   アップデートを実行するには（PUT）、カスタムメソッドを追加します：

angular.module('myApp', ['ngResource']);

7. カスタム構成：4番目のパラメーターは、$resource()。 stripTrailingSlashes

ムービーアプリの構築（例）：

記事では、コントローラー、ビュー、ルーティングを含む

を使用してフルムービーアプリケーションの構築を詳述しています（

を使用）。 バックエンドAPIはcors対応で、$resourceでアクセスできます。 この例は、映画のエントリの作成、読み取り、更新、削除をカバーしています。 ui-routerhttp://movieapp-sitepointdemos.rhcloud.com/api/moviesよくある質問（FAQ）：

この記事は、他のAngularモジュールとのエラー処理、カスタマイズ、テスト、互換性など、CRUD操作にを使用することに関する一般的な質問に対処する包括的なFAQセクションで終了します。 また、AngularJSの異なるバージョンでのAPIとさまざまなバージョンでの使用を明確にします。

以上がAngular＆＃x27; s $リソースを使用して数分でCRUDアプリを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。