Breeze/Angular テンプレート

作成者: Mads Kristensen

Breeze/Angular MVC テンプレートは Ward Bell によって作成されました

Breeze/Angular MVC テンプレートをダウンロードする

AngularJS は、シングル ページ アプリケーション (SPA) を構築するための Google のオープン ソース ライブラリです。 データ バインディング、依存関係の挿入、画面管理が提供されます。 データ モデリングとデータ管理のための別のオープン ソース ライブラリである BreezeJS と組み合わせると、優れた HTML/JavaScript クライアント アプリに不可欠な要素が得られます。

Breeze/Angular SPA テンプレートは、ASP.NET and Web Tools 2012.2 の更新プログラムに含まれる KnockoutJS SPA テンプレートのバリエーションです。 Visual Studio を使用している場合は、SPA のサンプルが 60 秒未満で稼働します。

アプリケーションは、一見すると KnockoutJS SPA テンプレートによく似ています。 しかし、それは内部ではまったく異なります。 KnockoutJS テンプレートでは、データ バインディングに Knockout を使用し、データ アクセスには生の AJAX を使用します。 Breeze/Angular テンプレートでは、データ バインディングに Angular を使用し、データ アクセスには Breeze を使用します。 これらのライブラリを使用すると、ページ ナビゲーションや履歴など、追加の機能を使用できます。

アプリケーションの [バージョン情報] ページには、現在のユーザー セッション中に次のようなイベントの実行中のログが表示されます。

• ページング。 Todo コントローラーの作成に注意してください。
• リモート クエリとローカル キャッシュ クエリ。
• 新しいエンティティと変更されたエンティティの保存。
• 変更はクライアントで検証されるため、ユーザーはデータベースに変更をコミットする前に間違いを修正できます。

このテンプレートには、他にも次のような要素が含まれます。

• HTML ビュー テンプレートの動的な読み込み。
• Angular "ディレクティブ" を使用したカスタム データ バインディング。
• モジュール性と依存関係の挿入。
• クエリ フィルター、並べ替え、ページング、プロジェクション、および関連エンティティの包含。
• 複数の画面でのデータ共有。
• 複数の変更の 1 つのトランザクションとしての保存。
• サーバーから JavaScript クライアントに自動的に伝達される検証規則。

では、始めましょう。

Breeze/Angular テンプレート プロジェクトを作成する

上の [ダウンロード] ボタンをクリックして、テンプレートをダウンロードしてインストールします。 テンプレートは、Visual Studio 拡張機能 (VSIX) ファイルとしてパッケージ化されています。 Visual Studio を再起動することが必要な場合があります。

[テンプレート] ウィンドウで、[インストールされているテンプレート] を選択し、[Visual C#] ノードを展開します。 [Visual C#] で [Web] を選択します。 プロジェクト テンプレートの一覧で、[ASP.NET MVC 4 Web アプリケーション] を選択します。 プロジェクト名を指定して、 [OK] をクリックします。

新しいプロジェクト ウィザードで、Breeze Angular SPA を選択します。

Ctrl キーを押しながら F5 キーを押してデバッグなしでアプリケーションをビルドして実行するか、F5 キーを押してデバッグで実行します。

アプリケーションが最初に実行されると、ログイン画面が表示されます。 [サインアップ] リンクをクリックすると、新しいページが表示され、ユーザー名とパスワードを入力できます。 (ログイン ページと登録ページは、ASP.NET MVC を使用して構築されています)。登録フォームを送信すると、サーバーはアカウントの 2 つの項目を含む TodoList を生成します。 その後、黄色のノートでそれらを提示します。

SPA が主に使用される環境を考えます。 Todos の操作中に表示され、経験するすべてのものが、Knockout と Breeze の助けを借りてクライアントでレンダリングおよび管理されます。 アプリをユーザーとして探索します が、開発者の視点から行います。 ブラウザーの開発者ツールを使用して、ネットワーク トラフィックをキャプチャします。 (Internet Explorer で F12 キーを押し、[ネットワーク] タブをクリックし、[キャプチャの開始] をクリックします)。次の手順を試します。

• 新しい Todo 項目を追加します。
• ラベルをクリックして Todo 項目のタイトルを編集します
• チェック ボックスをオンにして、完了項目をマークします。 テキストボックスが無効になっているため、タイトルは編集できなくなっています。
• ラベルの右側にある [x] をクリックします。 項目が表示されなくなり、データベースから削除されます。
• 別の項目を選択し、そのタイトルをクリアします。 タイトルが必要であるという検証エラーが表示されます。 しばらくすると、前のタイトルが復元されます。
• 非常に長いタイトルを入力します。 タイトルが長すぎるという別の検証エラーが発生します。
• [Add Todo List]\(Todo リストの追加\) ボタンをクリックします。 前のリストの左側に新しいリストが表示されます。
• TodoList タイトルを使用して、必須の検証と長さの検証をトリガーします。
• タイトルのテキストボックスをクリックして、エラー メッセージをクリアします。
• 右上隅の円の [x] をクリックして、TodoList とその todo を削除します。
• 右上の [バージョン情報] リンクをクリックすると、これらのアクティビティのログが表示されます。

検証ロジックは、Breeze によってクライアント側で実行されます。 サーバー モデル クラスの検証属性は、クライアントに伝達され、クライアントがサーバーに接続する前に自動的に実行されます。

ネットワーク トラフィックを確認します。 Breeze がエラーを検出したときに、サーバーへの呼び出しがなかったことに注意してください。 有効な変更のたびに、"/api/Todo/SaveChanges" への POST 要求が発生しました。 Breeze は変更をバンドルし、それらを 1 つの要求として Web API コントローラーの SaveChanges メソッドに送信します。 これは、各項目に対して PUT、POST、DELETE 要求を個別に実行する KnockoutJS SPA テンプレートとは異なります。

また、TodoList ページと [バージョン情報] ページを切り替えるときに、ネットワーク トラフィックがないことにも注意してください。 これは、クエリがローカルの Breeze キャッシュに制限されているためです。

内部の仕組み

このアプリケーションには、クライアント側とサーバー側があります。 クライアント側スタックは、小さな HTML とアプリケーション JavaScript モジュール ("app" フォルダー内) とサードパーティの JavaScript ライブラリ ("Scripts" フォルダー内) の組み合わせで構成されます。

UI アーキテクチャでは、ビューの HTML ウィジェットとコントローラー内のサポート プレゼンテーション コードを分離します。 Angular データ バインディング システムは、ビューとコントローラーを調整して、それぞれが他の要素の詳しい知識を持たずにジョブを実行できるようにします。

コントローラーは、モデル エンティティを取得して保存するようにデータ コンテキストに要求します。 データ コンテキストは、ほとんどの作業を Breeze に委任し、JSON クエリ結果から自己追跡モデル オブジェクトを構築します。

サーバー側スタックは、開発者コードと 3 つのプリンシパル .NET ライブラリ (Web API、Entity Framework、Breeze.NET) で構成されます。

基本的なアーキテクチャは、KnockoutJS SPA テンプレートと同じです。 ただし、実装ははるかに簡単です。DTO は削除され、Entity Framework の詳細のほとんどは Breeze.NET に委任されています。

次のステップ

クライアント スタックとサーバー スタックの両方に関する広範な説明に従って、コードを確認することをお勧めします。

Breeze のクライアント側のクエリを試してみる場合は、いくつかのフィルターと並べ替えを追加します。 モデル プロパティやエンティティを追加して、エンドツーエンドの SPA 開発を詳しく確認できます。 設計に自信がある場合は、Todo の機能を破棄し、独自の機能に置き換えることができます。

すばらしいコーディングになりますように。