From 0a83f2f26026fdf1519688a3ac15c05d51373766 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 18 Apr 2016 17:30:50 -0500 Subject: [PATCH] feat(directives): auto provide IONIC_DIRECTIVES to all components Closes #6092 --- ionic/components/nav/test/basic/index.ts | 5 +- ionic/decorators/app.ts | 14 +++-- ionic/decorators/page.ts | 54 ++++--------------- .../generators/component/component.tmpl.js | 4 +- .../generators/component/component.tmpl.ts | 4 +- 5 files changed, 23 insertions(+), 58 deletions(-) diff --git a/ionic/components/nav/test/basic/index.ts b/ionic/components/nav/test/basic/index.ts index ba4fb24999..5b52e09d47 100644 --- a/ionic/components/nav/test/basic/index.ts +++ b/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: `

My Custom Component Test

`, - directives: [IONIC_DIRECTIVES] + template: `

My Custom Component Test

` }) class MyCmpTest{} diff --git a/ionic/decorators/app.ts b/ionic/decorators/app.ts index 896d599e5a..a946eb1d4c 100644 --- a/ionic/decorators/app.ts +++ b/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 if (!args.templateUrl && !args.template) { args.template = ''; @@ -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(); } diff --git a/ionic/decorators/page.ts b/ionic/decorators/page.ts index 3eaff8175b..f00e16c020 100644 --- a/ionic/decorators/page.ts +++ b/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: `
- * - *
`, - * 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 ``, so although + * Pages have their content automatically wrapped in ``, 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'; diff --git a/tooling/generators/component/component.tmpl.js b/tooling/generators/component/component.tmpl.js index a1285b9835..d13ca07ecd 100644 --- a/tooling/generators/component/component.tmpl.js +++ b/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() { diff --git a/tooling/generators/component/component.tmpl.ts b/tooling/generators/component/component.tmpl.ts index a1285b9835..d13ca07ecd 100644 --- a/tooling/generators/component/component.tmpl.ts +++ b/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() {