feat(directives): auto provide IONIC_DIRECTIVES to all components

Closes #6092

Author: adamdbradley

ionic/components/nav/test/basic/index.ts

@@ -1,13 +1,12 @@
 import {Component, Type, ViewChild} from 'angular2/core';
 import {App, NavController, Alert, Content} from 'ionic-angular';
 import {Page, Config, IonicApp} from 'ionic-angular';
-import {NavParams, ViewController, IONIC_DIRECTIVES} from 'ionic-angular';;
+import {NavParams, ViewController} from 'ionic-angular';;
 
 
 @Component({
   selector: 'my-cmp',
-  template: `<p>My Custom Component Test <ion-icon name="star"></ion-icon></p>`,
-  directives: [IONIC_DIRECTIVES]
+  template: `<p>My Custom Component Test <ion-icon name="star"></ion-icon></p>`
 })
 class MyCmpTest{}
 

ionic/decorators/app.ts

@@ -1,4 +1,4 @@
-import {Component, ChangeDetectionStrategy, ViewEncapsulation, enableProdMode, Type} from 'angular2/core';
+import {Component, ChangeDetectionStrategy, ViewEncapsulation, enableProdMode, Type, provide, PLATFORM_DIRECTIVES} from 'angular2/core';
 import {bootstrap} from 'angular2/platform/browser';
 import {ionicProviders, postBootstrap} from '../config/bootstrap';
 import {IONIC_DIRECTIVES} from '../config/directives';
@@ -41,6 +41,9 @@ export interface AppMetadata {
 * property that has an inline template, or a `templateUrl` property that points
 * to an external html template. The `@App` decorator runs the Angular bootstrapping
 * process automatically, however you can bootstrap your app separately if you prefer.
+* Additionally, `@App` will automatically bootstrap with all of Ionic's
+* core components, meaning they won't all have to be individually imported and added
+* to each component's `directives` property.
 *
 * @usage
 * ```ts
@@ -71,9 +74,6 @@ export function App(args: AppMetadata = {}) {
 
     args.selector = 'ion-app';
 
-    // auto add Ionic directives
-    args.directives = args.directives ? args.directives.concat(IONIC_DIRECTIVES) : IONIC_DIRECTIVES;
-
     // if no template was provided, default so it has a root <ion-nav>
     if (!args.templateUrl && !args.template) {
       args.template = '<ion-nav></ion-nav>';
@@ -88,6 +88,12 @@ export function App(args: AppMetadata = {}) {
     // define array of bootstrap providers
     let providers = ionicProviders(args).concat(args.providers || []);
 
+    // auto add Ionic directives
+    let directives = args.directives ? args.directives.concat(IONIC_DIRECTIVES) : IONIC_DIRECTIVES;
+
+    // automatically provide all of Ionic's directives to every component
+    providers.push(provide(PLATFORM_DIRECTIVES, {useValue: [directives], multi:true}));
+
     if (args.prodMode) {
       enableProdMode();
     }

ionic/decorators/page.ts

@@ -1,5 +1,4 @@
 import {Component, ChangeDetectionStrategy, ViewEncapsulation, Type} from 'angular2/core';
-import {IONIC_DIRECTIVES} from '../config/directives';
 
 const _reflect: any = Reflect;
 
@@ -33,12 +32,15 @@ export interface PageMetadata {
  * @description
  *
  * The Page decorator indicates that the decorated class is an Ionic
- * navigation component, meaning it can be navigated to using a NavController.
+ * navigation component, meaning it can be navigated to using a
+ * [NavController](../../nav/NavController).
  *
- * Pages have all `IONIC_DIRECTIVES`, which include all Ionic components and directives,
- * as well as Angular's [CORE_DIRECTIVES](https://angular.io/docs/js/latest/api/core/CORE_DIRECTIVES-const.html)
- * and [FORM_DIRECTIVES](https://angular.io/docs/js/latest/api/core/FORM_DIRECTIVES-const.html),
- * already provided to them, so you only need to supply custom components and directives to your pages:
+ * Since the app has already been bootstrapped with Ionic's core directives, it
+ * is not needed to include `IONIC_DIRECTIVES` in the directives property. Additionally,
+ * Angular's [CORE_DIRECTIVES](https://angular.io/docs/ts/latest/api/common/CORE_DIRECTIVES-let.html)
+ * and [FORM_DIRECTIVES](https://angular.io/docs/ts/latest/api/common/FORM_DIRECTIVES-let.html),
+ * are also already provided, so you only need to supply any custom components and directives
+ * to your pages:
  *
  * @usage
  *
@@ -53,44 +55,7 @@ export interface PageMetadata {
  * class MyPage {}
  * ```
  *
- * Here [Content](../../../components/content/Content/) will load because
- * it is in `IONIC_DIRECTIVES`, so there is no need to add a `directives` array.
- *
- *
- * Say you built a custom component that uses the already existing Ionic component.
- * In this case, you would add `IONIC_DIRECTIVES` to your directives array.
- *
- * ```ts
- * import {IONIC_DIRECTIVES} from 'ionic-angular';
- * @Component({
- *   selector: 'my-component'
- *   template: `<div class="my-style">
- *   						  <ion-checkbox></ion-checkbox>
- *   						</div>`,
- *   directives: [IONIC_DIRECTIVES]
- * })
- * class MyCustomCheckbox {}
- *```
-
- * Alternatively, you could:
- *
- * ```ts
- * import {Checkbox, Icon} from 'ionic-angular'
- * ```
- *
- * along with any other components and add them individually:
- *
- * ```
- * @Component({
- *   ...
- *   directives: [Checkbox, Icon]
- * })
- * ```
- *
- * However, using IONIC_DIRECTIVES will always *Just Work* with no
- * performance overhead, so there is really no reason to not always use it.
- *
- * Pages have their content automatically wrapped in `<ion-view>`, so although
+ * Pages have their content automatically wrapped in `<ion-page>`, so although
  * you may see these tags if you inspect your markup, you don't need to include
  * them in your templates.
  *
@@ -99,7 +64,6 @@ export interface PageMetadata {
 export function Page(config: PageMetadata) {
   return function(cls) {
     config.selector = 'ion-page';
-    config.directives = config.directives ? config.directives.concat(IONIC_DIRECTIVES) : IONIC_DIRECTIVES;
     config.host = config.host || {};
     config.host['[hidden]'] = '_hidden';
     config.host['[class.tab-subpage]'] = '_tabSubPage';

tooling/generators/component/component.tmpl.js

@@ -1,5 +1,4 @@
 import {Component} from 'angular2/core';
-import {IONIC_DIRECTIVES} from 'ionic-angular';
 
 /*
   Generated class for the <%= jsClassName %> component.
@@ -9,8 +8,7 @@ import {IONIC_DIRECTIVES} from 'ionic-angular';
 */
 @Component({
   selector: '<%= fileName %>',
-  templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html',
-  directives: [IONIC_DIRECTIVES] // makes all Ionic directives available to your component
+  templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html'
 })
 export class <%= jsClassName %> {
   constructor() {

tooling/generators/component/component.tmpl.ts

@@ -1,5 +1,4 @@
 import {Component} from 'angular2/core';
-import {IONIC_DIRECTIVES} from 'ionic-angular';
 
 /*
   Generated class for the <%= jsClassName %> component.
@@ -9,8 +8,7 @@ import {IONIC_DIRECTIVES} from 'ionic-angular';
 */
 @Component({
   selector: '<%= fileName %>',
-  templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html',
-  directives: [IONIC_DIRECTIVES] // makes all Ionic directives available to your component
+  templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html'
 })
 export class <%= jsClassName %> {
   constructor() {