かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

TypeScriptとAngularJS「スコープにオブジェクトを持たせる」

やってることは大したことではないけど、実際のプログラムでは、スコープに持たせるのは単純なプリミティブ型ではなくてオブジェクトですよね。ということでやってみた。結果としてはちゃんと動いた

TypeScript側

/// <reference path="scripts/typings/angularjs/angular.d.ts" />

module MyApp {
    // scopeに持たせるオブジェクト
    class MessageHolder {
        message: string;
    }

    // 
    interface MessageScope extends ng.IScope {
        messageHolder: MessageHolder;

        greet(): void;
    }

    class MessageCtrl {
        constructor(private $scope: MessageScope) {
            $scope.messageHolder = new MessageHolder();
            $scope.greet = () => {
                this.$scope.messageHolder.message = "Hello at " + Date();
            };
        }
    }

    angular.module("myApp", [])
        .controller("MessageCtrl", ["$scope", MessageCtrl]);
}

HTML側

<!DOCTYPE html>

<html lang="ja" ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="Scripts/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content" ng-controller="MessageCtrl">
        <span>{{messageHolder.message}}</span>
        <hr />
        <input type="button" ng-click="greet()" value="greet" />
    </div>
</body>
</html>

思ったこと

今回、コントローラのコンストラクタでスコープのメソッドに実体を差し込むのにラムダ式でさくっと差し込んだけど、このやり方よりはメソッドを切ったほうがいいのだろうか。コントローラのメソッドの中身がそんなに大きくなr内なら、見通しのいいこっちのほうが好みなんだけどどうなんだろう。