web-dev-qa-db-ja.com

AngularJSのベストプラクティスREST / CRUD

AngularJSでRESTを介してCRUD操作を実行するベストプラクティスは何ですか？

特にAngular-Wayはここにあります。これは、これを実現するために最小コードと最もデフォルトangular settingsを使用する方法を意味します。

私は$ resourceを知っており、それがデフォルトの操作です。エンドポイントを実装/命名する方法と使用するコントローラーがわからないところです。

この例では、ユーザーを作成/更新/削除/リストする単純なユーザー管理システムを実装します。私は自分でサーバーエンドポイントを実装しているので、angularフレンドリーな方法で完全に自由に実行できます。

私が答えとして好きなのは次のようなものです：

Server-Endpoints：

GET /service/users -> array of users
GET /service/user/new -> return an empty user with default values which has no id
POST /service/user/new -> store a new user and create an id. return the saved user.
POST /service/user/:ID -> save an existing user. Return the saved user
DELETE /service/user/:ID -> delete an existing user

Angular-Services：

.factory( 'User', [ '$resource', function( $resource ){

    return $resource( '/service/user/:userId', { userId: '@id' } )
    [...]

}])

ルーティング：

.when( '/users', {
    templateUrl: BASE + 'partials/user-list.html',
    controller: 'UserListCtrl' } )

.when( '/user/new', {
    templateUrl: BASE + 'partials/user-edit.html',
    controller: 'UserNewCtrl' } )

.when( '/user/:userId', {
    templateUrl: BASE + 'partials/user-edit.html',
    controller: 'UserEditCtrl' } )
...

コントローラ：

UserListCtrl:

    $scope.data = User.get(...)

UserNewCtrl:

    $scope.user = User.get( { userId: "new" } )

...

これを行うためのbest（tm）方法は何であるかについては、私は興味がないことに注意してください。 意図された角度方法（ほとんどのデフォルトを使用できるため、コードを最小限に抑える必要があると思います）。

編集：

私は全体像を探しています。たとえば、「オンラインで3つのエンドポイント[...]、2つのルート[...]、2つのコントローラー[...]を使用すると、これを実行できますthiswaythatdefaults ...を使用する方法

angularjsrestcrud
21
Scheintod

Angularあなたが求めていることについて規定された方法はありません。実装の詳細を決定するのはあなた次第です。

通常、リソースごとに2つのコントローラーとテンプレートのみを使用します。

  1. ListController
  2. FormController

フォームコントローラは、編集操作と作成操作の両方に使用されます。ルート定義でresolveオプションを使用して、User.get()またはUser.new()のいずれかと、これが編集操作か作成操作かを示すフラグを渡します。次に、このフラグをFormController内で使用して、呼び出すsaveメソッドを決定できます。以下に簡単な例を示します。

.when( '/users', {
  templateUrl: BASE + 'partials/user-list.html',
  controller: 'UserListCtrl' } )
.when( '/user/new', {
  templateUrl: BASE + 'partials/user-form.html',
  resolve: {
    data: ['User', function(User) { return User.new(); }],
    operation: 'create'
  }
  controller: 'UserFormCtrl' } )
.when( '/user/:userId', {
  templateUrl: BASE + 'partials/user-form.html',
  resolve: {
    data: ['User', '$route', function(User, $route) { return User.get($route.current.params.userId); }],
    operation: 'edit'
  }
  controller: 'UserFormCtrl' } )

そしてあなたのフォームコントローラー：

app.controller('UserFormCtrl', ['$scope', 'data', 'operation', function($scope, data, operation){
  $scope.data = data;
  $scope.save = function() {
    if (operation === 'edit') {
      // Do you edit save stuff
    } else {
      // Do you create save stuff
    }
  }
}]);

さらに一歩進んで、ベースリストとフォームコントローラーを作成して、エラー処理、サーバー側の検証通知などを移動できます。実際、CRUD操作の大部分では、保存ロジックをこのベースコントローラーに移動することもできます。

21
Beyers

同様のクエストを研究した結果、このプロジェクト "angular-schema-form" https://github.com/Textalk/angular-schema-form につながりました。

このアプローチでは...データを説明するJSON-Schemaを作成します。次に、「フォーム」を記述する別の小さなJSON構造体（つまり、データスキーマに属さない特定の情報を表示する）を追加して、UI（フォーム）を作成します。

Schemaは、データの検証にも役立ちます。 （クライアントとサーバー側）、それはおまけです。

どのイベントがGET/POST/...から発生してAPIに戻るかを理解する必要があります。しかし、それはあなたの好みでしょう、例えば。キーストロークごとにAPIをヒットOR従来の[送信]ボタンPOSTバックスタイルOR時限自動保存。

この考えを継続させるために、StrongLoopを使用して（再び）データのschemaを使用するクイックAPIを作成することは可能だと思います（ APIを定義するためのいくつかのストレージ詳細）。

<3のスキーマの使用はありません。このアプローチの中心となる[ http://json-schema.org/] を参照してください。

（読み取り：3つ以上:)

4
Nate-

混同しているかもしれません。 APIレベルでのCRUD操作は$ resourceを使用して行われ、これらはUIにマップされる場合とされない場合があります。したがって、$resouceリソースを次のように定義した場合

var r = $resource('/users/:id',null,   {'update': { method:'PUT' }});
r.query()  //does GET on /users and gets all users
r.get({id:1}) // does GET on /users/1 and gets a specific user
r.save(userObject)  // does a POST to /users to save the user
r.update({ id:1 }, userObject) // Not defined by default but does PUT to /users/1 with user object.

ご覧のように、APIはリソースがいっぱいですが、どのUIビューにもリンクされていません。

ビューの場合、定義した規則を使用できますが、Angularが提供する特定の規則はありません。

1
Chandermani