AngularJSとTypeScript「Directiveのハローワールド」

AngularJSのかなり強力なディレクティブという機能のハローワールドしてみました。こいつAngularJSでDOM操作する処理をカプセル化する素敵なやつです。とりあえず、JavaScriptではなくてTypeScriptでは、どういう風にかくのかというのをつかむために、Hello worldを書いてみようと思います。

JSでのディレクティブとかについては、以下のサイトがとても参考になります。

ディレクティブ | AngularJS 1.2 日本語リファレンス | js STUDIO

ディレクティブの作り方

ディレクティブが持つべきプロパティを定義したng.IDirectiveインターフェースを実装します。linkとかが型指定で定義されているので、まぁ割と安心ですね。たとえば、こていの　テンプレートを流し込むだけのデイxれくてぃぶなら以下のように定義できます。

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

module TypeScriptAngularJSApp1 {
    // Hello worldと挿入するだけのディレクティブ
    class HelloWorldDirective implements ng.IDirective {
        template = "<p>Hello world</p>";
        replace = true;
    }

    // okazuki-HelloWorldで指定できるように登録する。
    // 第二引数は、ラムダ式で、先ほど作ったクラスをnewして返す。
    angular.module("myApp", [])
        .directive("okazukiHelloWorld", () => new HelloWorldDirective());
}

あとは、HTMLで使うだけです。何もないdivタグにokazuki-hello-worldを追加しています。

<!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>
    <div okazuki-hello-world></div>
</body>
</html>