29

クライアントの「ロジック」の多くを Rails ルーティングから AngularJS に移行することに関心があります。あるトピックで少し混乱していますが、それはリンクです。これを処理する方法が複数あることは理解していますが、リソースの 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 タイプのアクションを 1 つの URL で処理し、URL を変更しないでください。URL を変更する場合、それは ng-click を介して処理され、クリック イベントで$locationオブジェクトを使用して URL を変更しますか? これらのような一般的な慣行について読みたいと思っていますが、AngularJS のコンテキストでそれに関する最新の文献を見つけるのに苦労しています。

** ノート **

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

4

5 に答える 5

45

操作ごとに個別の 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 モード」も有効にします。以下の注を参照してください。

ngView2. 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>

アスリート詳細Ctrl.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 の比較

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

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

于 2013-08-04T12:46:27.190 に答える
2

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

または、$resource に追加機能を持つrestangularを使用することもできます。

完全に制御したい場合は、http と対話するための低レベルの角度コンポーネントである$httpサービスをいつでも使用できます。

于 2013-08-01T19:48:32.260 に答える