かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

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

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内なら、見通しのいいこっちのほうが好みなんだけどどうなんだろう。