doc(directives): add inline documentation

Closes angular#1240

Author: vicb

modules/angular2/src/directives/for.js

@@ -5,6 +5,35 @@ import {isPresent, isBlank} from 'angular2/src/facade/lang';
 import {ListWrapper} from 'angular2/src/facade/collection';
 
 /**
+ * The `For` directive instantiates a template once per item from an iterable. The context for each
+ * instantiated template inherits from the outer context with the given loop variable set to the
+ * current item from the iterable.
+ *
+ * It is possible to alias the `index` to a local variable that will be set to the current loop
+ * iteration in the template context.
+ *
+ * When the contents of the iterator changes, `For` makes the corresponding changes to the DOM:
+ *
+ * * When an item is added, a new instance of the template is added to the DOM.
+ * * When an item is removed, its template instance is removed from the DOM.
+ * * When items are reordered, their respective templates are reordered in the DOM.
+ *
+ * # Example
+ *
+ * ```
+ * <ul>
+ * <li *for="error in errors; #i = index">
+ * Error {{i}} of {{errors.length}}: {{error.message}}
+ * </li>
+ * </ul>
+ * ```
+ *
+ * # Syntax
+ *
+ * - `<li *for="#item of items; #i = index">...</li>`
+ * - `<li template="for #item of items; #i=index">...</li>`
+ * - `<template [for]="#item" [of]="items" #i="index"><li>...</li></template>`
+ *
  * @publicModule angular2/directives
  */
 @Viewport({

modules/angular2/src/directives/if.js

@@ -3,6 +3,25 @@ import {ViewContainer} from 'angular2/src/core/compiler/view_container';
 import {isBlank} from 'angular2/src/facade/lang';
 
 /**
+ * The `If` directive removes or recreates a portion of the DOM tree based on an {expression}. If
+ * the expression assigned to `if` evaluates to a false value then the element is removed from the
+ * DOM, otherwise a clone of the element is reinserted into the DOM.
+ *
+ * # Example:
+ *
+ * ```
+ * <div *if="errorCount > 0" class="error">
+ * <!-- Error message displayed when the errorCount property on the current context is greater than 0. -->
+ * {{errorCount}} errors detected
+ * </div>
+ * ```
+ *
+ * # Syntax
+ *
+ * - `<div *if="condition">...</div>`
+ * - `<div template="if condition">...</div>`
+ * - `<template [if]="condition"><div>...</div></template>`
+ *
  * @publicModule angular2/directives
  */
 @Viewport({

modules/angular2/src/directives/non_bindable.js

@@ -1,6 +1,18 @@
 import {Decorator} from 'angular2/src/core/annotations/annotations';
 
 /**
+ * The `NonBindable` directive tells Angular not to compile or bind the contents of the current
+ * DOM element. This is useful if the element contains what appears to be Angular directives and
+ * bindings but which should be ignored by Angular. This could be the case if you have a site that
+ * displays snippets of code, for instance.
+ *
+ * Example:
+ *
+ * ```
+ * <div>Normal: {{1 + 2}}</div> // output "Normal: 3"
+ * <div non-bindable>Ignored: {{1 + 2}}</div> // output "Ignored: {{1 + 2}}"
+ * ```
+ *
  * @publicModule angular2/directives
  */
 @Decorator({

modules/angular2/src/directives/switch.js

@@ -20,7 +20,7 @@ import {Parent} from 'angular2/src/core/annotations/visibility';
  * evaluated. If a matching expression is not found via a when attribute then an element with the
  * default attribute is displayed.
  *
- * Example:
+ * # Example:
  *
  * ```
  * <ANY [switch]="expression">
@@ -29,6 +29,7 @@ import {Parent} from 'angular2/src/core/annotations/visibility';
  * <template [switch-default]>...</template>
  * </ANY>
  * ```
+ *
  * @publicModule angular2/directives
  */
 @Decorator({
@@ -181,6 +182,8 @@ export class SwitchWhen {
  *
  * @publicModule angular2/directives
  * ```
+ *
+ * @publicModule angular2/directives
  */
 @Viewport({
  selector: '[switch-default]'