web-dev-qa-db-ja.com

CRUDリソースを処理するAngularJSの「方法」とは

クライアントの「ロジック」の多くをRails AngularJSへのルーティング）から遠ざけることに興味があります。1つのトピックで少し混乱していて、それがリンクしています。今、複数あることを理解していますこれを処理する方法ですが、リソースのCRUDを処理する際にURLを処理するためのAngularJSコミュニティでの一般的な方法は何ですか？アスリートの場合、すべてのアスリートをリストする次のようなURLがあるとします。

http://example.com/athletes

個々のアスリートを表示するには：

http://example.com/athletes/1

個々のアスリートを編集するには：

http://example.com/athletes/1/edit

新しいアスリートを作成するには：

http://example.com/athletes/new

AngularJSでは、作成/編集/更新するために同様のURLに再ルーティングすることは一般的な方法ですか？ 1つのインターフェースですべてのCRUDタイプのアクションを処理するURLを1つだけ用意し、URLを変更しないでください。 URLを変更する場合、ng-clickを介して処理されますか。クリックイベントでは$location URLを変更するオブジェクト？私はこれらのような一般的な慣習を読みたいと思っていますが、AngularJSのコンテキストでそれに関するより最近の文献を見つけるのに苦労しています。

** 注意 **

サーバー側のリソースとやり取りするために、バックエンドへのRESTfulなルートを引き続き使用できることは完全にわかります。私の質問は、クライアント側でURLを更新するときに使用することをお勧めするスタイルは何ですか。 AngularJSを使用して、CRUD操作ごとにそれを行っていますか？

javascriptruby-on-railsangularjsruby-on-rails-4
29
randombits

直接リンクを有効にするために、操作ごとに別々のURLを使用することをお勧めします。あなたが提案するものはうまく見えます。

AngularJSでは、$routeサービスをngViewディレクティブと組み合わせて使用​​して、各操作に適切なテンプレートをロードし、ブラウザーの場所と履歴のメカニズムを処理できます。

AngularJSチュートリアルのステップ7 は、ここで説明する方法でビュー、ルーティング、およびテンプレートを使用する例を示しています。以下は、例の簡略化されたバージョンです。

ルートを定義する

メインアプリケーションスクリプト（例：app.js）：

angular.module('AthletesApp', []).
  config(['$routeProvider', function($routeProvider, $locationProvider) {
  // Configure routes
  $routeProvider.
      when('/athletes', {templateUrl: 'partials/athletes-list.html',   controller: AthleteListCtrl}).
      when('/athletes/:athleteId', {templateUrl: 'partials/athlete-detail.html', controller: AthleteDetailCtrl}).
      when('/athletes/:athleteId/edit', {templateUrl: 'partials/athlete-edit.html', controller: AthleteEditCtrl}).
      when('/athletes/:athleteId/new', {templateUrl: 'partials/athlete-new.html', controller: AthleteNewCtrl}).
      otherwise({redirectTo: '/athletes'});
  // Enable 'HTML5 History API' mode for URLs.
  // Note this requires URL Rewriting on the server-side. Leave this
  // out to just use hash URLs `/#/athletes/1/edit`
  $locationProvider.html5Mode(true);
}]);

また、URLの「HTMLモード」も有効にします。下記の注を参照してください。

2. ngViewディレクティブをHTMLに追加します

メインindex.htmlで、選択した部分テンプレートをレイアウト全体のどこに配置するかを指定します。

<!doctype html>
<html ng-app="AthletesApp">
...
   <!-- Somewhere within the <body> tag: -->
   <div ng-view></div>
...
</html>

3.テンプレートとコントローラーを作成する

次に、部分的なビューテンプレートと、操作ごとに一致するコントローラーを作成します。例えば。アスリート詳細ビューの場合：

partials/athelete-detail.html：

<div>
    ... Athete detail view here
</div>

athleteDetailCtrl.js：

angular.module('AthletesApp').controller('AtheleteDetailCtrl',
    function($scope, $routeParams) {
        $scope.athleteId = $routeParams.athleteId;
        // Load the athlete (e.g. using $resource) and add it
        // to the scope.
    }

:athleteIdサービスを介して、ルートパラメータ（ルート設定で$routeParamsを使用して定義）にアクセスできます。

4.リンクを追加する

最後のステップは、実際にHTMLにリンクとボタンを配置して、さまざまなビューに移動することです。標準のHTMLを使用して、次のようなURLを指定するだけです。

<a href="/athletes/{{athleteId}}/edit">Edit</a>

注：標準URLとハッシュURL

HTML5 History APIをサポートしていない古いブラウザーでは、URLはhttp://example.com/#/athletesやhttp://example.com/#/athletes/1のようになります。

$locationサービス（$routeによって自動的に使用される）がこれを処理できるため、最新のブラウザーではすっきりとしたURLを取得し、古いブラウザーではハッシュURLにフォールバックします。上記のようにリンクを指定しても、$locationは古いクライアントのリンクの書き換えを処理します。唯一の追加要件は、すべてのURLがアプリのメインのindex.htmlに書き換えられるように、サーバー側でURL書き換えを構成することです。詳細は AngularJS $ location Guide を参照してください。

45
Derek Hinchliffe

angular wayは安らかな方法です：

GET all http://example.com/athletes
GET one http://example.com/athletes/1
POST new http://example.com/athletes
PUT edit http://example.com/athletes/1
DELETE remove http://example.com/athletes/1

$ resource には、スラッシュで終わっていないリソースURL、更新されたリソースを返すPUTリクエストなど、他にもいくつかのことが期待されていることに注意してください。

APIがこれらの基準を満たさない場合、または単に柔軟性が必要な場合は、低レベルの $ http サービスに基づいて、独自の$ resourceのようなCRUDサービスを構築できます。後者を行う1つの方法について説明します ここ

16
holographic-principle

オプション1：$ httpサービス

AngularJSは $http service それはまさにあなたが望むことを行います：AJAX Webサービスへのリクエストを送信し、JSONを使用してそれらからデータを受信します（これはRESTサービス）。

例を示すには（AngularJSのドキュメントから抜粋して少し変更したもの）：

$http({ method: 'GET', url: '/foo' }).
  success(function (data, status, headers, config) {
    // ...
  }).
  error(function (data, status, headers, config) {
    // ...
  });

オプション2：$ resourceサービス

AngularJSには別のサービス $resource service これは、より高レベルの方法でRESTサービスへのアクセスを提供します（AngularJSのドキュメントからの例も使用しています）：

var Users = $resource('/user/:userId', { userId: '@id' });
var user = Users.get({ userId: 123 }, function () {
  user.abc = true;
  user.$save();
});

オプション3：直角

さらに、 Restangular などのサードパーティソリューションもあります。使い方は documentation をご覧ください。基本的に、それはより宣言的であり、あなたから離れた詳細をより抽象化します。

5
Golo Roden

AngularJSでは、RESTfulなサーバー側のデータソースを確実に使用できます。 $ resource というサービスが組み込まれています。

あるいは、$-resourceに追加の機能がある restangular を使用することもできます。

フルコントロールが必要な場合は、低レベルの $ http サービスをいつでも使用できますangular httpと対話するためのコンポーネント。

2
Tadeusz Wójcik

RESTfulなもの、つまりangularJSの方法を実装するだけです。 RESTfulが何であるかわからない場合、または少し知っていて、さらに多くのことを知りたい場合は、 this の記事を読むことをお勧めします。

基本的に、RESTはWEB URIの直感的な実装であると理解されているものです。また、すべてのHTTP動詞、実際には正しい使用法も使用します。REST Webアプリケーションを構築するためのアプローチとアーキテクチャです。

0
Games Brainiac