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" />
以上で準備完了です。