かずきのBlog@hatena

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

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

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