かずきのBlog@hatena

日本マイクロソフトに勤めています。このブログは個人ブログなので、ここに書いている内容は個人的な意見で会社の公式見解ではない点にご注意ください。好きなものは XAML と C# 。苦手なものは型の無い言語です。

TypeScriptとAngularJSでボタンクリックしてみよう

ボタンクリックに反応するようにしてみました。やり方は簡単でボタン系のタグにng-click属性つけてやればいいみたいです。

コントローラとスコープのコードは以下のような感じ。

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

module MyApp {
    interface GreetScope extends ng.IScope {
        message: string;

        greet: () => void;
    }

    class GreetCtrl {
        constructor(private $scope: GreetScope) {
            this.$scope.greet = this.greet.bind(this);
        }

        greet(): void {
            this.$scope.message = "Hello at " + Date()
        }
    }

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

HTMLは以下のような感じ。今回のポイントはng-clickの部分。スコープの、greetメソッドを呼び出してるところです。

<!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.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

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

クリックするとメッセージが出る。いい感じ。

f:id:okazuki:20140525184711j:plain