AngularJSいいですね。
普通にJavaScriptのオブジェクトいじってたら知らないうちにビューが更新される感じがとても好きです。
ASP.NET MVCとかASP.NET Web APIとかいいですよね。C#でCoCな感じがとても好きです。
Razorもさくっと書かせてやろうという感じがとても好きです。
なのでこのへんを使ってWebアプリを作ってみましょう。

この記事では空のASP.NET WebアプリケーションプロジェクトからシンプルなTodoアプリを作ります。
ベースはAngularJSにあるTodoのサンプルで、
これをサーバサイドとつなげてデータの永続化までするように実装します。

アプリを作成する流れは以下のとおり。

Entity Framework Code Firstでモデルを作成
- データベースはEntity Frameworkにテーブルを作ってもらいます
HTTPサービスAPIを公開するASP.NET Web API Controllerを作成
HTTPサービスAPIを使用するASP.NET MVCビュー(Razor)を作成
- AngularJSを使ってHTTPサービスAPIを呼び出す
- Bootstrapを使ってレスポンシブルデザイン

利用する主なツールやフレームワークは以下のとおり。

Visual Studio 2013 Update1
ASP.NET Web API 2.1 (5.1.1)
ASP.NET MVC 5.1.1
Entity Framework 6.0.2
AngularJS 1.2.12
Bootstrap 3.1.0

ASP.NET Webアプリケーションプロジェクトの作成

ASP.NET Webアプリケーションプロジェクトの作成します。

テンプレートの選択では「Empty」を選び、下の「MVC」と「Web API」にチェックをつけて「OK」ボタンを押します。

最低限のファイルだけのプロジェクトが作成されます。

プロジェクトテンプレートで追加されるパッケージは少し古いので、NuGetパッケージの管理画面で更新しておきます。

パッケージのインストール

Bootstrapをインストールします。
NuGetで「Bootstrap」をインストールします。
二つあるかもしれませんが、識別が「bootstrap」となっている方をインストールします。

AngularJSをインストールします。
NuGetで「AngularJS Core」をインストールしてください。
「Angular JS」の方は古いバージョンのまま更新されていないのでこちらをインストールしないよう注意してください。

Entity Frameworkをインストールします。
NuGetで「Entity Framework 日本語リソース」をインストールします。

Web.configの編集

AngularJSを使うとエラーが起きることがあるのでブラウザリンクを無効にしておきます。
以下の行を/configuration/appSettingsの下に追加します。

<add key="vs:EnableBrowserLink" value="false" />

以上で準備完了です。