[AngularJS]独自module + directiveを試してみる(夏休み企画1)

学生生活最後の夏休みに入りました。

アルバイト先の社員さんに相談して、たくさんお休みをいただいたので 遊びに勉強に充実させたいです。

とりあえず夏休み中にどうにかまとめて時間を取りたいなぁ、と考えていることが いくつかあります。そのうちの一つがJavascriptのMVCフレームワークであるAngularJSに 関しての調査です。

ドットインストールのAngularJS関連のコースや、公式サイトのチュートリアルなんか を、一応終えたり、実際に使ったりもしてはいるんですが、正直あんまり ピンときていない・・・・。

個人的に長く使いたいと考えているフレームワークなので、掘り下げて調べたいと考えました。

とは言っても、公式チュートリアルの延長線ですが・・・。

制作を進めていく上で疑問に思っている、理解して書いてない部分をなくすためのもの なので、どういう順番で、どういう内容をやっていこう、という明確な目標が 現段階であるわけではありませんが、疑問がなくなるまでは続けてみようと思います。

現段階でちゃんと分かるまでやりたいな、と思ってるのは

  1. module + directiveについて
  2. $scopeについて
  3. $onと$watchについて
  4. $routeProviderについて
  5. ngViewとtemplateについて

順番は変わると思いますが、最低限これに関しては自分の 中で整理したいと思ってます。

今回はmoduleの作成とdirectiveに関して。


既存のチュートリアルでは、ng-model、ng-controllerの説明は、大体どのページにもあるんですが moduleとdirectiveに関して、あんまり理解が進みませんでした・・・。 (※英語の理解が追いついてない、ということも大きく影響してるんですが・・・。)

というわけで、その辺をざっくりと。 (※最初のほうの内容はtutorialにも同じようなことが書いてあります)

まずはスタートはこちら。ヘッダとフッタがあって、その中に、コンテンツがあって・・・ そんな感じです。

ダミーテキストはblindtextgenerator.comで生成してました。 今は適当なテキストですが、後ほどコンテンツもモデル化した何かに変えようと思います。

加えて、ソースコードとプレビューにはPlunkerを利用しています。 似たようなサービスはいくつかあり、僕の周りではJSFIDDLEを利用している 人が多いのですが、見た目がかっこいいので今回はPlunkerを試してみました。

リンクを開いて、デフォルトで表示されているのが、プレビュー画面で、ソースコードを見たければ左上の『source code』を選択すれば見たいソースコードを選ぶことができます。

サンプル1

スタートはこちらから。本来は埋め込みで、このサイト上に表示したかったんだけど、 wordpressのiframe制約が多くて、埋め込み上手く行かなかった・・・。

というわけで別リンクで、少し見づらいかもしれませんがご了承ください・・・。

本当はこんな感じにしたかった・・・

サンプル1に対してやりたいこと

  1. header, footerをテンプレート化
  2. コンテンツのモデル化と、テンプレート化

まず、オリジナルのdirectiveを定義するには、独自moduleを定義する必要があります。 というわけで作成したのが、こちら。サンプル2

これでmoduleを定義します。angular.module()の第二引数はインポートする他のmoduleを記述します。 今回はサンプルなので、何もなし。ngResourceを使ったサンプルを今度ちゃんと作りたいです。

これでdirectiveを定義。restrictは’E’がelement、’A’がattributeです。他にもあるけどとりあえずこの二つで。

linkの部分は、このdirectiveに紐づくメソッドなどを定義するところ。 ここにEventListenerなんかを定義すると、便利です。Gist

例えばjqueryと組み合わせて、特定のイベントや動作に独自の関数を紐付けたりが可能になってます。

templateは直接テンプレートをjs内に記述するならtemplate: ”

hogehoge

“とすればOKですが 今回はheaderまるごと、なので別ファイルにしました。

ng-includeというattributeでも、templateの呼び出しができます。

これを利用すれば、HTML/CSS + Javascriptだけでも、テンプレートを用いて効率的にページを量産すること ができます。

これでfooter,headerそしてコンテンツをモデル化し、それをテンプレートで呼び出す、 というところまで実現できました。

moduleを定義することのメリット

module化しなくても、チュートリアルにあるような基本機能は利用できますが、 moduleを定義することで可能になることも多くあるので、明確にしておきます。

Most applications have a main method which instantiates, wires, and bootstraps the application. Angular apps don’t have a main method. Instead modules declaratively specify how an application should be bootstrapped.(※AngularJS公式より引用)Link

つまり、アプリケーション起動時に、特有の設定などを呼び出すためのもの、ということらしいです。

ほかに挙がってるメリットとして

  1. 独自のdirevtive、filterの定義
  2. Routeの設定
  3. テストがmoudle単位で行える
  4. サードパーティ製のコードを含めることに便利(moduleのインポート)

ここに載ってるmoduleAPIで指定できる ようなことが、独自に設定できる、ということがメリットです。

AngularJSではmoduleの定義に関して、以下の内容を推奨しています。

  1. Serviceを提供するmoduleを定義する
  2. Directiveを提供するmoduleを定義する
  3. Filterを定義するmoduleを定義する
  4. アプリケーションの初期化や1-3のmoduleをインポートするmoduleを定義する

確かに、Githubなどで、AngularJSを利用しているプロジェクトのコードを見ると、このように分離されている ことが多いです。

今後の課題

今回はmodulenとdirectiveの定義をざっくりと書きましたが、moduleAPIを利用した アプリケーション独自の設定を、掘り下げて調べたいと思ってます。

ただ、間違いなく感じるのは、『便利な機能は多いけど、書式は独特で学習コストは高い』 という点です。僕がアホなだけかもしれませんが・・・。

サーバサイド、クライアントサイド関係なく、今まで触れたフレームワークのなかでは一番 難しいです・・・。(javascriptだから、っていう部分も僕にとってはあるかもしれません)

次回はmoduleAPIの利用を掘り下げて、サンプルを用意してみます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です