みんなだいすきAngularJSですが、無駄に学習コストが高いです。
この本をじっくり読めば大抵の機能は載っています。めちゃんこ便利です。
本題
Directiveってなんじゃらほい
AngularJSではngなんちゃらとか独自のタグとか要素をHTMLのDOMに追加することができます。これをDirectiveと呼ばれる機能で全て統括しています。
Directiveは主にHTMLのパーツを小分けにしたり、特定のタグを上書きして動作を変更したりすることができます。
代表的なのはng-formですが、aも使用しています。
(aはhrefが空の時、ブラウザの標準動作を抑止するため)
命名規則的な何か
ng-bind等の標準のモジュールも同じような方法でDOMに追加されているため、後から読み込まれるであろう、君のコード内でng-xxxをDirectiveを通して追加すれば名前を衝突して、標準の動作を上書きしてしまいます。
かと言ってtext等の安易な名前を指定してしまうと、将来的にHTMLの仕様に追加された際に名前が衝突してしまったり、他のライブラリと衝突してしまう可能性があります。
命名は自分のアプリの名前を先頭に付ければユニークなものとなり確実でしょう。
ライブラリ等に切り出して他で使う際も問題は起きにくいと推測されます。
例: mb-board air-main-menu
実装方法
JavaScript上ではcamelCaseで記述して、HTML上ではlower-caseで参照します。
angular.module "ChatBoard", []
.directive "mainParts", ->
return {
templateUrl: "/template/board_main.html"
}
尚、標準では属性のみでDOMに登録されるため、これを使用する場合は
<main-parts></main-parts>
といった呼び出し方に制限されてしまいます。
ng-bind等のように要素として呼び出したり、その両方で登録することもできます。
restrict: 'A' # 属性のみ
restrict: 'E' # 要素のみ
restrict: 'AE' # 属性または要素
Directiveを外部のライブラリに切り出す
これが今回の肝です。
AngularJSではMockの注入やngResouces等を使用して、疎結合に設計することが重視されています。
しかし、JavaScriptで記述されたロジックの疎結合は完璧なのに、Viewの部分はハードコーディング なんて事にはなっていないでしょうか。
そんな時に使用できるかもしれません。
また、ライブラリとして公開するときにも使えると思います。
記述方法
先ほどのサンプルコードと同じで構いません。
これを他のファイル名で保存して、ブラウザ上で読み込み、
angular.module "Test", ["ngRoute", "ChatBoard"]
と読み込んでやれば完璧です。
お疲れ様でした。