Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

AngularJSのDirectiveを切り出す

みんなだいすきAngularJSですが、無駄に学習コストが高いです。

AngularJSリファレンス | Amazon

この本をじっくり読めば大抵の機能は載っています。めちゃんこ便利です。

本題

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"]

と読み込んでやれば完璧です。

お疲れ様でした。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What are the problem?