AngularJSのDirectiveについて、初学者が進める時に、みておくとよい記事をロードマップ的にまとめました。上から順番に見ていけば、Directiveの基礎はひと通り理解できることと思います。
事前知識
以下がわかればひとまずおーけーです。
- AngularJS: Developer Guide: Data Binding
- AngularJS: Developer Guide: Scopes
- AngularJS: Developer Guide: Controllers
4つのステップ
参考になった記事をピックアップし、これから勉強を始めてみようと思う人がスムースに学べるよう、以下の4つのステップを用意してみました。
1. 概要を理解する
はじめに、Directiveの概要をざっくりと理解しましょう。基本的にDirectiveは「DOMの操作をコンポーネント化する」のにつかうものです。
- AngularJS: Developer Guide: Directives
- ディレクティブ | AngularJS 1.2 日本語リファレンス
- AngularJS - First Directive - Thinkster・・・（動画）
- JavaScript - AngularJSのDirectiveを理解する. - Qiita
- AngularJS の custom directive まとめ - Qiita
2. Link Functionを理解する
概要で理解したように、Directive（Custom Directive）では、DOMに対するひとつの機能をカプセル化できます。その中でも、Link FunctionはDOM操作の要となります。
- AngularJS - Useful Behaviors - Thinkster・・・（動画）
- Directiveで実現できたこと・・・（スライド）
- JavaScript - Angular.js入門 (4)ディレクティブ その1 - Qiita
- AngularJSのDirectiveで俺俺タグつくっちゃお・・・（スライド）
3. Directive同士の間での連携を理解する
Directive同士の間での連携を学びます。次のScopeの理解にもつながってくるので、丁寧にみてゆきたいところです。
a. 連携について
- JavaScript - Angular.js入門 (5)ディレクティブ その2 - Qiita
- AngularJS - Directive to Directive Communication - Thinkster・・・（動画）
- AngularJS - Directive Communication - Thinkster・・・（動画）
b. Directive同士の連携において重要になってくるTransclusionについての解説
- AngularJS - Transclusion Basics - Thinkster・・・（動画）
- AngularJS - Components and Containers - Thinkster・・・（動画）
4. DirectiveにおけるScopeを理解する
DirectiveのScopeについて学びます。Isolated Scope・Binding Scope・Expressionを理解して、Directiveをコントローラーと連携してみましょう。
a. 記事
- AngularJS Directive チュートリアル STEP1〜STEP5 - A Memorandum・・・（こちらの記事の「Step4」以降）
- AngularJS's tutorial - あなたとともにAngularJS・・・（こちらの記事の「directiveを複雑に使ってみる」のセクション）
- JavaScript - Angular.js入門 (5)ディレクティブ その2 - Qiita
- ここらでDirective Scopeの@=&をまとめておきたいと思う - Qiita
b. 動画
- AngularJS - Understanding Isolate Scope - Thinkster
- AngularJS - Isolate Scope "@" - Thinkster
- AngularJS - Isolate Scope "=" - Thinkster
- AngularJS - Isolate Scope "&" - Thinkster
- AngularJS - Isolate Scope Review - Thinkster
c. 実例
まとめ
AngularJsのDirectiveについて、初学者が学習しやすい4つのステップと参考になる記事を紹介しました。
以上を理解すれば、あとは実際に動かすのを繰り返してゆくのみとなります。参考になれば幸いです。