TypeScript + AngularJSのHelloWorldしてみた

何事もHelloWorldみたいなのから。HelloWorldといっても、モジュールとスコープとコントローラ使う感じで。

プロジェクト

以下のライブラリをNuGetから突っ込みます。

angularjs
angularjs.TypeScript.DefinitelyTyped

スコープの定義

とりあえず、挨拶用の文字列をつっこむプロパティを持ったGreetingScopeを定義します。スコープはng.IScopeを拡張する感じで。

interface GreetingScope extends ng.IScope {
    greet: string;
}

コントローラの定義

スコープを受け取って、そこに文字列を突っ込むだけの簡単なコントローラ。

class GreetingCtrl {
    constructor($scope: GreetingScope) {
        $scope.greet = "こんにちは世界 at " + Date();
    }
}

AngularJSのモジュールにする

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

この書き方が、まだ慣れなくてキモイんですが、myAppというモジュールにGreetingCtrlを定義しています。コンストラクタにスコープをインジェクションしてもらうための$scopeを使ってるのがポイントなんでしょうか。

TypeScriptのモジュールで括る

全体をTypeScriptのモジュールで括って、グローバルな名前空間？を、なるべく汚さないようにしておきます（趣味です）。ということで、TypeScriptの完成です。

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

module MyApp {
    interface GreetingScope extends ng.IScope {
        greet: string;
    }

    class GreetingCtrl {
        constructor($scope: GreetingScope) {
            $scope.greet = "こんにちは世界 at " + Date();
        }
    }

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

Viewの作成

htmlタグにng-app="myApp"としてmyAppモジュールを使うように指定するっぽいので、追加します。そして、適当なdivタグにng-controllerでGreetingCtrlを設定して{{greet}}でscopeの中の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.min.js"></script>
    <script src="app.js"></script>
</head>
<body>
    <h1>TypeScript HTML App</h1>

    <div id="content" ng-controller="GreetingCtrl">
        <span>{{greet}}</span>
    </div>
</body>
</html>

実行

実行すると、いい感じに表示されます。

f:id:okazuki:20140525163749j:plain

なんとなく、定義の仕方がわかってきたかも。

かずきのBlog@hatena

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