C#
ASP.NET
TypeScript
AngularJS

TypeScript with AngularJSをASP.Net MVCで使う 環境構築篇

More than 5 years have passed since last update.

タイトル通りのことをやっていきます。だいぶコアな内容ですがめちゃくちゃ開発捗る組み合わせなのでお勧めです。

参考にしたのはこのページです

Using TypeScript with AngularJS and Web API

長くなるので2つに記事を分けます


環境構築

VisualStudio2013で進めていきます。無料のVS2013 Express for Webでも問題ないです。

VS2013のセットアップが済んだら、TypeScript for VisualStudioをインストールします

TypeScript for Visual Studio 2012 and 2013

VS2013→TSforVSの順番でインストールしないとテンプレートが読み込まれないことがあるので、すでにインストールしていたら再インストールしたほうがいいかもです。

ここまで出来たらVS2013を起動して新しいプロジェクト→インストール済みテンプレートから「TypeScriptを使用したHTMLアプリケーション」を選択します

newproject.PNG

作成されるプロジェクトはすでに実行するとTypeScriptのデモとして時計のHTMLアプリケーションが作られています。app.tsをいじるだけでもけっこう楽しいです。

このプロジェクトにNuGetでAngularJSを導入します。NuGetでangularjsで検索したら出てくるので、

AngularJSと、TypeScriptの AngularJS用定義ファイル の2つをインストールします

angularjs.PNG

次にWebApiを使う準備をします。プロジェクトにControllersフォルダを追加し、右クリックして「追加」→「コントローラー...」でダイアログが開きます。

今回はWeb APi 2の空のコントローラを追加します。コントローラ名はValuesControllerにします。

webapicontroller.PNG

ここで一度ビルドをかけると、WebApiの方で参照が足りていないので、


  • System

  • System.Web

の2つ参照を追加してください。

デモ篇に続く…