title: What is an AngularJS directive?
body: <p>I have spent quite a lot of time reading through AngularJS documentation and several tutorials, and I have been quite surprised at how unapproachable the documentation is.</p>
  
  <p>I have a simple, answerable question that may also be useful to others looking to pick up AngularJS:</p>
  
  <p><strong>What is an AngularJS directive?</strong></p>
  
  <p>There should be a simple, precise definition of a directive somewhere, but the <a href="https://angularjs.org/#create-components" rel="noreferrer">AngularJS website</a> offers these surprisingly useless definitions:</p>
  
  <p><a href="https://angularjs.org/#create-components" rel="noreferrer">On the home page</a>:</p>
  
  <blockquote>
    <p>Directives are a unique and powerful feature available in AngularJS. Directives let you invent new HTML syntax, specific to your application.</p>
  </blockquote>
  
  <p>In the <a href="http://docs.angularjs.org/guide/directive" rel="noreferrer">developer documentation</a>:</p>
  
  <blockquote>
    <p>Directives are a way to teach HTML new tricks. During DOM compilation directives are matched against the HTML and executed. This allows directives to register behavior, or transform the DOM.</p>
  </blockquote>
  
  <p>And there is a <a href="http://blog.angularjs.org/2012/11/about-those-directives.html" rel="noreferrer">series of talks</a> about directives which, ironically, seem to assume the audience already understands what they are.</p>
  
  <p>Would anyone be able to offer, for clear reference, a precise definition of what a directive is that explains:</p>
  
  <ol>
  <li>What it is (see the clear <a href="http://jquery.com/" rel="noreferrer">definition of jQuery</a> as an example)</li>
  <li>What practical problems and situations it is intended to address</li>
  <li>What design pattern it embodies, or alternatively, how it fits into the purported MVC/<a href="https://plus.google.com/104744871076396904202/posts/DRUAkZmXjNV" rel="noreferrer">MVW</a> mission of AngularJS.</li>
  </ol>