環境構築篇からの続きです。
サーバーサイドのAPIを作る
環境ができたのでまずサーバーサイドから作ります。今回は雰囲気をつかむためなのですごく適当なAPIを作ります。
namespace TypeScriptHTMLApp.Contollers
{
public class Value
{
public string Text { get; set; }
}
public class ValuesController : ApiController
{
private static Value _Value { get; set; }
public Value Get()
{
return _Value;
}
public HttpResponseMessage Post(Value value)
{
_Value = value;
return Request.CreateResponse(HttpStatusCode.Created);
}
}
}
静的プロパティにアクセスするだけです。実際はここがDB操作になったりなんらかのデータ作成の処理になると思います。
今回はValueというモデルを使います。こいつはMVVMでいうとModelですね。
なんと素敵なことにサーバーサイドはこれで終わりです。ありがとうASP.Net WebAPI!!
クライアントサイドを作る
まずはTypeScriptでMVVMのVMを作ります。好きなところにTypeScriptファイルを追加してください。名前も好みでいいですが、サンプルではMainController.tsとします。解説はあとでするとして完成品がこちら
module Main {
export class Value {
Text: string;
}
export interface Scope {
value: Value;
newText: string;
setValue: Function;
}
export class Controller {
private httpService: any;
constructor($scope: Scope, $http: any) {
this.httpService = $http;
var controller = this;
$scope.setValue = function () {
var value = new Main.Value();
value.Text = $scope.newText;
controller.postValue(value, function (data) {
controller.getValue(function (data) {
$scope.newText = "";
$scope.value = data;
});
});
}
}
getValue(successCallback: Function) {
this.httpService.get("/api/values").success(function (data, status) {
successCallback(data);
});
}
postValue(value: Value, successCallback: Function) {
this.httpService.post("/api/values", value).success(function (data, status) {
successCallback(data);
});
}
}
}
MainモジュールにValueとScopeとControllerを宣言しています。
Valueはサーバーサイドとの通信用のモデルです。
ScopeはMVVMのVMに当たります。バインディング担当です。
Controllerはその名の通りコントローラで、クライアント側の処理を担当します。
Scopeには現在保持しているValueオブジェクトvalueと、input要素とバインディングするnewText、ボタンをおした時の動作setValueが定義されています。
Controllerは長いので読んで理解してもらいたいです。
constructor()はwindow.load時に呼ばれます（多分）。そしてそこでScopeのイベントハンドラを登録しています。getValueとpostValueはAPIを叩いているだけです。非同期なのでコールバック関数を渡してあげます。
最後に静的なhtmlファイルで枠組みを作りましょう。プロジェクトに最初から入ってるはずのdefault.htmを使います。
今回は<input>と<button>と<h1>だけのシンプルな形です。そこにバインディング用の属性を定義して、必要なjsファイルを読み込んで完成です。tsファイルはビルド後はjsファイルを吐き出すので、参照を間違わないようにしましょう。
<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<script src="../Scripts/angular.js" type="text/javascript"></script>
<script src="MainController.js" type="text/javascript"></script>
</head>
<body>
<div ng-controller="Main.Controller">
<form ng-submit="setValue()">
<input type="text" ng-model="newText">
<button type="submit">Set</button>
</form>
<h1>{{value.Text}}</h1>
</div>
</body>
</html>
これで実行すると、input要素に入力したテキストがボタンを押すと下に表示されるはずです。
だいぶ駆け足ですが、ASP.Net WebAPIと、TypeScript、AngularJSがVS2013で楽にかけるよ！という記事でした。ASP.Net MVCもっと流行れ！！