AngularJSのかなり強力なディレクティブという機能のハローワールドしてみました。こいつAngularJSでDOM操作する処理をカプセル化する素敵なやつです。とりあえず、JavaScriptではなくてTypeScriptでは、どういう風にかくのかというのをつかむために、Hello worldを書いてみようと思います。
JSでのディレクティブとかについては、以下のサイトがとても参考になります。
ディレクティブの作り方
ディレクティブが持つべきプロパティを定義した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><htmllang="ja" ng-app="myApp"><head><metacharset="utf-8" /><title>TypeScript HTML App</title><linkrel="stylesheet"href="app.css"type="text/css" /><scriptsrc="Scripts/angular.min.js"></script><scriptsrc="app.js"></script></head><body><div okazuki-hello-world></div></body></html>
実行すると、ちゃんとディレクティブが動いていることがわかります。
