かずきのBlog@hatena

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

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