From 902fbd0f62109b6fd0841cf6e1b4b90ea39a75cb Mon Sep 17 00:00:00 2001
From: Mike Hartington <mikehartington@gmail.com>
Date: Tue, 19 Apr 2016 14:18:40 -0400
Subject: [PATCH] docs(ionicDirectives): add docs for IONIC_DIRECTIVES

---
 ionic/config/directives.ts | 160 +++++++++++++++++++++----------------
 1 file changed, 92 insertions(+), 68 deletions(-)

diff --git a/ionic/config/directives.ts b/ionic/config/directives.ts
index 8db68a0a71..a2e1e64bff 100644
--- a/ionic/config/directives.ts
+++ b/ionic/config/directives.ts
@@ -44,79 +44,103 @@ import {ShowWhen, HideWhen} from '../components/show-hide-when/show-hide-when';
 
 /**
  * @name IONIC_DIRECTIVES
- * @private
  * @description
- * The core Ionic directives as well as Angular's CORE_DIRECTIVES and
- * FORM_DIRECTIVES.  Automatically available in every [@Page](../Page/) template.
+ * The core Ionic directives as well as Angular's `CORE_DIRECTIVES` and `FORM_DIRECTIVES` are
+ * avaialbe automatically when you bootstrap your app with the `@App` decorator. This means
+ * if you are using custom components you no longer need to import `IONIC_DIRECTIVES` as they
+ * are part of the `@App`s default directives.
  *
- * **Angular**
+ * If you would like to **not** have them included by default, you would need to bootstrap
+ * the app differently.
+ *
+ * Instead of starting your app like so:
+ *
+ * ```typescript
+ * @App({
+ *  template: "<ion-nav></ion-nav>"
+ * })
+ *
+ * export class MyApp{
+ *
+ * }
+ * ```
+ *
+ * We would use Angulars default way of bootstrap an app, import `IONIC_DIRECTIVES` and `ionicProviders`, then
+ * declare `ionicProviders` as a dependencey.
+ *
+ * ```typescript
+ *  import {IONIC_DIRECTIVES, ionicProviders} from 'ionic-angular';
+ *  import {bootstrap} from 'angular2/platform/browser';
+ *
+ *  @Component({
+ *      //default selector, and theme.
+ *      directives: [IONIC_DIRECTIVES]
+ *  })
+ *  class App {}
+ *
+ *  bootstrap(App,ionicProviders())
+ * ```
+ *
+ *
+ *
+ * #### Angular
  * - CORE_DIRECTIVES
  * - FORM_DIRECTIVES
  *
- * **Content**
- * -  Menu
- * -  MenuToggle
- * -  MenuClose
- *
- * -  Button
- * -  Blur
- * -  Content
- * -  Scroll
- * -  InfiniteScroll
- * -  InfiniteScrollContent
- * -  Refresher
- * -  RefresherContent
- *
- * **Lists**
- * -  List
- * -  ListHeader
- * -  Item
- * -  ItemSliding
- * -  VirtualScroll
- * -  VirtualFor
- *
- * **Slides**
- * -  Slides
- * -  Slide
- * -  SlideLazy
- *
- * **Tabs**
- * -  Tabs
- * -  Tab
- *
- * **Toolbar**
- * -  Toolbar
- * -  ToolbarTitle
- * -  ToolbarItem
- *
- * **Media**
- * -  Icon
- * -  Spinner
- *
- * **Forms**
- * -  Searchbar
- * -  Segment
- * -  SegmentButton
- * -  Checkbox
- * -  RadioGroup
- * -  RadioButton
- * -  Select
- * -  Option
- * -  Toggle
- * -  TextInput
- * -  Label
- *
- * **Nav**
- * -  Nav
- * -  NavbarTemplate
- * -  Navbar
- * -  NavPush
- * -  NavPop
- * -  NavRouter
- * -  IdRef
- *
- * -  ShowWhen
- * -  HideWhen
+ * #### Ionic
+ * - Menu
+ * - MenuToggle
+ * - MenuClose
+ * - Badge
+ * - Button
+ * - Blur
+ * - Content
+ * - Scroll
+ * - InfiniteScroll
+ * - InfiniteScrollContent
+ * - Refresher
+ * - RefresherContent
+ * - Img
+ * - List
+ * - ListHeader
+ * - Item
+ * - ItemSliding
+ * - VirtualScroll
+ * - VirtualItem
+ * - VirtualHeader
+ * - VirtualFooter
+ * - Slides
+ * - Slide
+ * - SlideLazy
+ * - Tabs
+ * - Tab
+ * - Toolbar
+ * - ToolbarTitle
+ * - ToolbarItem
+ * - Icon
+ * - Spinner
+ * - Searchbar
+ * - SearchbarInput
+ * - Segment
+ * - SegmentButton
+ * - Checkbox
+ * - RadioGroup
+ * - RadioButton
+ * - Select
+ * - Option
+ * - Toggle
+ * - TextArea
+ * - TextInput
+ * - Label
+ * - Nav
+ * - NavbarTemplate
+ * - Navbar
+ * - NavPush
+ * - NavPop
+ * - NavRouter
+ * - IdRef
+ * - ShowWhen
+ * - HideWhen
  */
 export const IONIC_DIRECTIVES = [
   // Angular