かずきのBlog@hatena

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

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

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