Help us understand the problem. What is going on with this article?

【AngularJSの要】Directive初学者のための入門ロードマップ

More than 5 years have passed since last update.

AngularJSのDirectiveについて、初学者が進める時に、みておくとよい記事をロードマップ的にまとめました。上から順番に見ていけば、Directiveの基礎はひと通り理解できることと思います。

事前知識

以下がわかればひとまずおーけーです。

4つのステップ

参考になった記事をピックアップし、これから勉強を始めてみようと思う人がスムースに学べるよう、以下の4つのステップを用意してみました。

  1. 概要を理解する
  2. Link Functionを理解する
  3. Directive同士の間での連携を理解する
  4. DirectiveにおけるScopeを理解する

1. 概要を理解する

はじめに、Directiveの概要をざっくりと理解しましょう。基本的にDirectiveは「DOMの操作をコンポーネント化する」のにつかうものです。

2. Link Functionを理解する

概要で理解したように、Directive(Custom Directive)では、DOMに対するひとつの機能をカプセル化できます。その中でも、Link FunctionはDOM操作の要となります。

3. Directive同士の間での連携を理解する

Directive同士の間での連携を学びます。次のScopeの理解にもつながってくるので、丁寧にみてゆきたいところです。

a. 連携について

b. Directive同士の連携において重要になってくるTransclusionについての解説

4. DirectiveにおけるScopeを理解する

DirectiveのScopeについて学びます。Isolated Scope・Binding Scope・Expressionを理解して、Directiveをコントローラーと連携してみましょう。

a. 記事

b. 動画

c. 実例

まとめ

AngularJsのDirectiveについて、初学者が学習しやすい4つのステップと参考になる記事を紹介しました。

  1. 概要を理解する
  2. Link Functionを理解する
  3. Directive同士の間での連携を理解する
  4. DirectiveにおけるScopeを理解する

以上を理解すれば、あとは実際に動かすのを繰り返してゆくのみとなります。参考になれば幸いです。

okmttdhr
dmmcom
総合エンタテイメントサイト「DMM.com」を運営。会員数は2,900万人を突破。動画配信、FX、英会話、ゲーム、太陽光発電、3Dプリンタなど40以上のサービスを展開。沖縄での水族館事業参入、ベルギーでのサッカークラブ経営など、様々な事業を手掛ける。また2018年より若手起業家の支援を強化、「DMM VENTURES」による出資や、M&Aなどを積極的に展開している。
https://dmm-corp.com
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