From 73635f393974dc6c44f69cf7814d22243f80a5c5 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 31 May 2016 15:42:06 -0500 Subject: [PATCH 1/5] refactor(bootstrap): use ionicBootstrap() to bootstrap BREAKING CHANGES: - Ionic's custom decorators have been removed. - `@App` and `@Page` should be replaced with `@Component`. - `IonicApp` has been renamed to `App`. - `ionicBootstrap` is required to bootstrap the app. - Config is now the 3rd parameter in `ionicBootstrap(rootComponent, providers, config)`. - Property `prodMode` is now a config option, enabling or disabling production mode. --- src/components/app/app.ts | 34 ++----- src/components/app/structure.scss | 2 +- src/components/content/content.ts | 16 +-- src/components/input/input-base.ts | 4 +- src/components/input/input.ts | 6 +- src/components/modal/modal.ts | 32 +++--- src/components/modal/test/modal.spec.ts | 15 +-- src/components/nav/nav-controller.ts | 58 ++++++++--- src/components/nav/nav-portal.ts | 4 +- src/components/nav/nav.ts | 19 ++-- src/components/navbar/navbar.ts | 4 +- src/components/tabs/tab.ts | 4 +- src/components/tabs/tabs.ts | 8 +- src/components/tap-click/tap-click.ts | 4 +- src/config/bootstrap.ts | 125 ++++++++++++++++-------- src/config/test/config.spec.ts | 6 +- src/decorators/app.ts | 107 -------------------- src/decorators/page.ts | 36 +------ src/index.ts | 1 - 19 files changed, 210 insertions(+), 275 deletions(-) delete mode 100644 src/decorators/app.ts diff --git a/src/components/app/app.ts b/src/components/app/app.ts index c1adb6cda5..cc027d32bf 100644 --- a/src/components/app/app.ts +++ b/src/components/app/app.ts @@ -7,16 +7,14 @@ import {Platform} from '../../platform/platform'; /** - * App utility service. Allows you to look up components that have been - * registered using the [Id directive](../Id/). + * Ionic App utility service. */ @Injectable() -export class IonicApp { +export class App { private _disTime: number = 0; private _scrollTime: number = 0; private _title: string = ''; private _titleSrv: Title = new Title(); - private _isProd: boolean = false; private _rootNav: any = null; private _appInjector: Injector; @@ -48,23 +46,6 @@ export class IonicApp { } } - /** - * Returns if the app has been set to be in be in production mode or not. - * Production mode can only be set within the config of `@App`. Defaults - * to `false`. - * @return {boolean} - */ - isProd(): boolean { - return this._isProd; - } - - /** - * @private - */ - setProd(val: boolean) { - this._isProd = !!val; - } - /** * @private * Sets if the app is currently enabled or not, meaning if it's @@ -80,9 +61,14 @@ export class IonicApp { setEnabled(isEnabled: boolean, duration: number = 700) { this._disTime = (isEnabled ? 0 : Date.now() + duration); - if (duration > 32 || isEnabled) { - // only do a click block if the duration is longer than XXms - this._clickBlock.show(!isEnabled, duration + 64); + if (this._clickBlock) { + if (duration > 32) { + // only do a click block if the duration is longer than XXms + this._clickBlock.show(true, duration + 64); + + } else { + this._clickBlock.show(false, 0); + } } } diff --git a/src/components/app/structure.scss b/src/components/app/structure.scss index e2191cfdb3..3b7a50600e 100644 --- a/src/components/app/structure.scss +++ b/src/components/app/structure.scss @@ -85,7 +85,7 @@ body { text-size-adjust: none; } -ion-app, +ion-app.app-init, ion-nav, ion-tabs { position: absolute; diff --git a/src/components/content/content.ts b/src/components/content/content.ts index 1b906db387..99c6e07576 100644 --- a/src/components/content/content.ts +++ b/src/components/content/content.ts @@ -1,7 +1,7 @@ import {Component, ElementRef, Optional, NgZone, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core'; import {Ion} from '../ion'; -import {IonicApp} from '../app/app'; +import {App} from '../app/app'; import {Config} from '../../config/config'; import {Keyboard} from '../../util/keyboard'; import {nativeRaf, nativeTimeout, transitionEnd} from '../../util/dom'; @@ -28,10 +28,10 @@ import {ScrollView} from '../../util/scroll-view'; * you can use Angular's `@ViewChild` annotation: * * ```ts - * import {ViewChild} from '@angular/core'; + * import {Component, ViewChild} from '@angular/core'; * import {Content} from 'ionic-angular'; * - * @Page({...} + * @Component({...}) * export class MyPage{ * @ViewChild(Content) content: Content; * @@ -67,7 +67,7 @@ export class Content extends Ion { constructor( private _elementRef: ElementRef, private _config: Config, - private _app: IonicApp, + private _app: App, private _keyboard: Keyboard, private _zone: NgZone, @Optional() viewCtrl: ViewController @@ -217,10 +217,10 @@ export class Content extends Ion { * Scroll to the specified position. * * ```ts - * import {ViewChild} from '@angular/core'; + * import {Component, ViewChild} from '@angular/core'; * import {Content} from 'ionic-angular'; * - * @Page({ + * @Component({ * template: ` * * ` @@ -248,10 +248,10 @@ export class Content extends Ion { * Scroll to the top of the content component. * * ```ts - * import {ViewChild} from '@angular/core'; + * import {Component, ViewChild} from '@angular/core'; * import {Content} from 'ionic-angular'; * - * @Page({ + * @Component({ * template: ` * * ` diff --git a/src/components/input/input-base.ts b/src/components/input/input-base.ts index 07763786b5..ed06a3c4f7 100644 --- a/src/components/input/input-base.ts +++ b/src/components/input/input-base.ts @@ -5,7 +5,7 @@ import {Config} from '../../config/config'; import {Content} from '../content/content'; import {Form} from '../../util/form'; import {Item} from '../item/item'; -import {IonicApp} from '../app/app'; +import {App} from '../app/app'; import {isTrueProperty} from '../../util/util'; import {Label} from '../label/label'; import {pointerCoord, hasPointerMoved, closest, copyInputAttributes} from '../../util/dom'; @@ -41,7 +41,7 @@ export class InputBase { config: Config, protected _form: Form, protected _item: Item, - protected _app: IonicApp, + protected _app: App, protected _platform: Platform, protected _elementRef: ElementRef, protected _scrollView: Content, diff --git a/src/components/input/input.ts b/src/components/input/input.ts index c45572e0f8..386c460011 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -5,7 +5,7 @@ import {Config} from '../../config/config'; import {Content} from '../content/content'; import {Form} from '../../util/form'; import {InputBase} from './input-base'; -import {IonicApp} from '../app/app'; +import {App} from '../app/app'; import {Item} from '../item/item'; import {Label} from '../label/label'; import {NativeInput, NextInput} from './native-input'; @@ -79,7 +79,7 @@ export class TextInput extends InputBase { config: Config, form: Form, @Optional() item: Item, - app: IonicApp, + app: App, platform: Platform, elementRef: ElementRef, @Optional() scrollView: Content, @@ -170,7 +170,7 @@ export class TextArea extends InputBase { config: Config, form: Form, @Optional() item: Item, - app: IonicApp, + app: App, platform: Platform, elementRef: ElementRef, @Optional() scrollView: Content, diff --git a/src/components/modal/modal.ts b/src/components/modal/modal.ts index 63a87b5b81..82bdb4f4ba 100644 --- a/src/components/modal/modal.ts +++ b/src/components/modal/modal.ts @@ -1,11 +1,12 @@ -import {Component, ComponentRef, DynamicComponentLoader, ElementRef, ViewChild, ViewContainerRef} from '@angular/core'; +import {Component, ComponentRef, DynamicComponentLoader, ViewChild, ViewContainerRef} from '@angular/core'; -import {windowDimensions} from '../../util/dom'; -import {pascalCaseToDashCase} from '../../util/util'; -import {NavParams} from '../nav/nav-params'; -import {ViewController} from '../nav/view-controller'; +import {addSelector} from '../../config/bootstrap'; import {Animation} from '../../animations/animation'; +import {NavParams} from '../nav/nav-params'; +import {pascalCaseToDashCase} from '../../util/util'; import {Transition, TransitionOptions} from '../../transitions/transition'; +import {ViewController} from '../nav/view-controller'; +import {windowDimensions} from '../../util/dom'; /** * @name Modal @@ -35,7 +36,7 @@ import {Transition, TransitionOptions} from '../../transitions/transition'; * ```ts * import {Page, Modal, NavController, NavParams} from 'ionic-angular'; * - * @Page(...) + * @Component(...) * class HomePage { * * constructor(nav: NavController) { @@ -49,7 +50,7 @@ import {Transition, TransitionOptions} from '../../transitions/transition'; * * } * - * @Page(...) + * @Component(...) * class Profile { * * constructor(params: NavParams) { @@ -65,9 +66,10 @@ import {Transition, TransitionOptions} from '../../transitions/transition'; * modal. * * ```ts - * import {Page, Modal, NavController, ViewController} from 'ionic-angular'; + * import {Component} from '@angular/core'; + * import {Modal, NavController, ViewController} from 'ionic-angular'; * - * @Page(...) + * @Component(...) * class HomePage { * * constructor(nav: NavController) { @@ -89,7 +91,7 @@ import {Transition, TransitionOptions} from '../../transitions/transition'; * * } * - * @Page(...) + * @Component(...) * class Profile { * * constructor(viewCtrl: ViewController) { @@ -140,7 +142,7 @@ export class Modal extends ViewController { let originalNgAfterViewInit = this.instance.ngAfterViewInit; this.instance.ngAfterViewInit = () => { - if ( originalNgAfterViewInit ) { + if (originalNgAfterViewInit) { originalNgAfterViewInit(); } this.instance.loadComponent().then( (componentRef: ComponentRef) => { @@ -163,11 +165,13 @@ export class ModalCmp { @ViewChild('viewport', {read: ViewContainerRef}) viewport: ViewContainerRef; - constructor(protected _eleRef: ElementRef, protected _loader: DynamicComponentLoader, protected _navParams: NavParams, protected _viewCtrl: ViewController) { - } + constructor(protected _loader: DynamicComponentLoader, protected _navParams: NavParams) {} loadComponent(): Promise> { - return this._loader.loadNextToLocation(this._navParams.data.componentType, this.viewport).then(componentRef => { + let componentType = this._navParams.data.componentType; + addSelector(componentType, 'ion-page'); + + return this._loader.loadNextToLocation(componentType, this.viewport).then(componentRef => { return componentRef; }); } diff --git a/src/components/modal/test/modal.spec.ts b/src/components/modal/test/modal.spec.ts index a7fa498d34..725b1b1cf5 100644 --- a/src/components/modal/test/modal.spec.ts +++ b/src/components/modal/test/modal.spec.ts @@ -1,4 +1,5 @@ -import {Modal, ModalCmp, Page, NavController, ViewController} from '../../../../src'; +import {Component} from '@angular/core'; +import {Modal, ModalCmp, NavController, ViewController} from '../../../../src'; export function run() { describe('Modal', () => { @@ -51,19 +52,19 @@ export function run() { it('should return a componentRef object after loading component', (done) => { // arrange - let mockLoader = { + let mockLoader: any = { loadNextToLocation: () => {} }; - let mockNavParams = { + let mockNavParams: any = { data: { - componentType: "myComponentType" + componentType: function mockComponentType(){} } }; let mockComponentRef = {}; spyOn(mockLoader, "loadNextToLocation").and.returnValue(Promise.resolve(mockComponentRef)); - let modalCmp = new ModalCmp(null, mockLoader, mockNavParams, null); - modalCmp.viewport = "mockViewport"; + let modalCmp = new ModalCmp(mockLoader, mockNavParams); + modalCmp.viewport = "mockViewport"; // act modalCmp.loadComponent().then(loadedComponentRef => { @@ -91,7 +92,7 @@ let componentToPresentSpy = { _ionicProjectContent: () => {}, }; -@Page({ +@Component({ template: `
` }) class ComponentToPresent{ diff --git a/src/components/nav/nav-controller.ts b/src/components/nav/nav-controller.ts index 34d3583866..a8bdab35a0 100644 --- a/src/components/nav/nav-controller.ts +++ b/src/components/nav/nav-controller.ts @@ -1,11 +1,12 @@ -import {ViewContainerRef, DynamicComponentLoader, provide, ReflectiveInjector, ResolvedReflectiveProvider, ElementRef, NgZone, Renderer, Type} from '@angular/core'; +import {ViewContainerRef, DynamicComponentLoader, provide, ReflectiveInjector, ResolvedReflectiveProvider, ElementRef, NgZone, Renderer, Type, EventEmitter} from '@angular/core'; +import {addSelector} from '../../config/bootstrap'; +import {App} from '../app/app'; import {Config} from '../../config/config'; import {Ion} from '../ion'; -import {IonicApp} from '../app/app'; +import {isBlank, pascalCaseToDashCase} from '../../util/util'; import {Keyboard} from '../../util/keyboard'; import {NavParams} from './nav-params'; -import {pascalCaseToDashCase, isBlank} from '../../util/util'; import {MenuController} from '../menu/menu-controller'; import {NavPortal} from './nav-portal'; import {SwipeBackGesture} from './swipe-back'; @@ -59,12 +60,9 @@ import {ViewController} from './view-controller'; * * * ## Page creation - * _For more information on the `@Page` decorator see the [@Page API - * reference](../../../decorators/Page/)._ - * * Pages are created when they are added to the navigation stack. For methods * like [push()](#push), the NavController takes any component class that is - * decorated with `@Page` as its first argument. The NavController then + * decorated with `@Component` as its first argument. The NavController then * compiles that component, adds it to the app and animates it into view. * * By default, pages are cached and left in the DOM if they are navigated away @@ -75,10 +73,12 @@ import {ViewController} from './view-controller'; * * ## Lifecycle events * Lifecycle events are fired during various stages of navigation. They can be - * defined in any `@Page` decorated component class. + * defined in any component type which is pushed/popped from a `NavController`. * * ```ts - * @Page({ + * import {Component} from '@angular/core'; + * + * @Component({ * template: 'Hello World' * }) * class HelloWorld { @@ -171,6 +171,14 @@ export class NavController extends Ion { protected _trnsTime: number = 0; protected _views: Array = []; + pageDidLoad: EventEmitter; + pageWillEnter: EventEmitter; + pageDidEnter: EventEmitter; + pageWillLeave: EventEmitter; + pageDidLeave: EventEmitter; + pageWillUnload: EventEmitter; + pageDidUnload: EventEmitter; + /** * @private */ @@ -203,7 +211,7 @@ export class NavController extends Ion { constructor( parent: any, - protected _app: IonicApp, + protected _app: App, config: Config, protected _keyboard: Keyboard, elementRef: ElementRef, @@ -227,6 +235,14 @@ export class NavController extends Ion { this.providers = ReflectiveInjector.resolve([ provide(NavController, {useValue: this}) ]); + + this.pageDidLoad = new EventEmitter(); + this.pageWillEnter = new EventEmitter(); + this.pageDidEnter = new EventEmitter(); + this.pageWillLeave = new EventEmitter(); + this.pageDidLeave = new EventEmitter(); + this.pageWillUnload = new EventEmitter(); + this.pageDidUnload = new EventEmitter(); } /** @@ -508,6 +524,7 @@ export class NavController extends Ion { animation: enteringView.getTransitionName('back') }); + // present() always uses the root nav // start the transition return rootNav._insertViews(-1, [enteringView], opts); } @@ -819,9 +836,11 @@ export class NavController extends Ion { // Tabs can be a parent, but it is not a collection of views // only we're looking for an actual NavController w/ stack of views leavingView.fireWillLeave(); + this.pageWillLeave.emit(leavingView); return parentNav.pop(opts).then((rtnVal: boolean) => { leavingView.fireDidLeave(); + this.pageDidLeave.emit(leavingView); return rtnVal; }); } @@ -919,6 +938,7 @@ export class NavController extends Ion { // the first view to be removed, it should init leave view.state = STATE_INIT_LEAVE; view.fireWillUnload(); + this.pageWillUnload.emit(view); // from the index of the leaving view, go backwards and // find the first view that is inactive so it can be the entering @@ -952,7 +972,9 @@ export class NavController extends Ion { // apart of any transitions that will eventually happen this._views.filter(v => v.state === STATE_REMOVE).forEach(view => { view.fireWillLeave(); + this.pageWillLeave.emit(view); view.fireDidLeave(); + this.pageDidLeave.emit(view); this._views.splice(this.indexOf(view), 1); view.destroy(); }); @@ -987,6 +1009,7 @@ export class NavController extends Ion { // if no entering view then create a bogus one enteringView = new ViewController(); enteringView.fireLoaded(); + this.pageDidLoad.emit(enteringView); } /* Async steps to complete a transition @@ -1043,6 +1066,7 @@ export class NavController extends Ion { this.loadPage(enteringView, null, opts, () => { enteringView.fireLoaded(); + this.pageDidLoad.emit(enteringView); this._postRender(transId, enteringView, leavingView, isAlreadyTransitioning, opts, done); }); } @@ -1102,12 +1126,14 @@ export class NavController extends Ion { // only fire entering lifecycle if the leaving // view hasn't explicitly set not to enteringView.fireWillEnter(); + this.pageWillEnter.emit(enteringView); } if (enteringView.fireOtherLifecycles) { // only fire leaving lifecycle if the entering // view hasn't explicitly set not to leavingView.fireWillLeave(); + this.pageWillLeave.emit(leavingView); } } else { @@ -1214,12 +1240,14 @@ export class NavController extends Ion { // only fire entering lifecycle if the leaving // view hasn't explicitly set not to enteringView.fireDidEnter(); + this.pageDidEnter.emit(enteringView); } if (enteringView.fireOtherLifecycles) { // only fire leaving lifecycle if the entering // view hasn't explicitly set not to leavingView.fireDidLeave(); + this.pageDidLeave.emit(leavingView); } } @@ -1422,21 +1450,25 @@ export class NavController extends Ion { return; } + // add more providers to just this page let providers = this.providers.concat(ReflectiveInjector.resolve([ provide(ViewController, {useValue: view}), provide(NavParams, {useValue: view.getNavParams()}) ])); + // automatically set "ion-page" selector + addSelector(view.componentType, 'ion-page'); + // load the page component inside the nav this._loader.loadNextToLocation(view.componentType, this._viewport, providers).then(component => { - + // a new ComponentRef has been created // set the ComponentRef's instance to its ViewController view.setInstance(component.instance); - + // the component has been loaded, so call the view controller's loaded method to load any dependencies into the dom view.loaded( () => { - + // the ElementRef of the actual ion-page created let pageElementRef = component.location; diff --git a/src/components/nav/nav-portal.ts b/src/components/nav/nav-portal.ts index d5e25b1584..0000702832 100644 --- a/src/components/nav/nav-portal.ts +++ b/src/components/nav/nav-portal.ts @@ -1,6 +1,6 @@ import {Directive, ElementRef, Optional, NgZone, Renderer, DynamicComponentLoader, ViewContainerRef} from '@angular/core'; -import {IonicApp} from '../app/app'; +import {App} from '../app/app'; import {Config} from '../../config/config'; import {Keyboard} from '../../util/keyboard'; import {NavController} from './nav-controller'; @@ -16,7 +16,7 @@ export class NavPortal extends NavController { constructor( @Optional() viewCtrl: ViewController, @Optional() parent: NavController, - app: IonicApp, + app: App, config: Config, keyboard: Keyboard, elementRef: ElementRef, diff --git a/src/components/nav/nav.ts b/src/components/nav/nav.ts index 3a0f7361bb..3ddb6fc92c 100644 --- a/src/components/nav/nav.ts +++ b/src/components/nav/nav.ts @@ -1,6 +1,6 @@ import {Component, ElementRef, ViewContainerRef, DynamicComponentLoader, Input, Optional, NgZone, Renderer, Type, ViewChild, ViewEncapsulation, AfterViewInit} from '@angular/core'; -import {IonicApp} from '../app/app'; +import {App} from '../app/app'; import {Config} from '../../config/config'; import {Keyboard} from '../../util/keyboard'; import {isTrueProperty} from '../../util/util'; @@ -28,15 +28,18 @@ import {ViewController} from './view-controller'; * * @usage * ```ts - * import {GettingStartedPage} from 'getting-started'; - * @App({ - * template: `` + * import {Component} from '@angular/core'; + * import {ionicBootstrap} from 'ionic-angular'; + * import {GettingStartedPage} from './getting-started'; + * + * @Component({ + * template: `` * }) * class MyApp { - * constructor(){ - * this.rootPage = GettingStartedPage; - * } + * root = GettingStartedPage; * } + * + * ionicBootstrap(MyApp); * ``` * * ### Back Navigation @@ -117,7 +120,7 @@ export class Nav extends NavController implements AfterViewInit { constructor( @Optional() viewCtrl: ViewController, @Optional() parent: NavController, - app: IonicApp, + app: App, config: Config, keyboard: Keyboard, elementRef: ElementRef, diff --git a/src/components/navbar/navbar.ts b/src/components/navbar/navbar.ts index 71b88b1721..c71e276a4e 100644 --- a/src/components/navbar/navbar.ts +++ b/src/components/navbar/navbar.ts @@ -4,7 +4,7 @@ import {Ion} from '../ion'; import {Icon} from '../icon/icon'; import {ToolbarBase} from '../toolbar/toolbar'; import {Config} from '../../config/config'; -import {IonicApp} from '../app/app'; +import {App} from '../app/app'; import {isTrueProperty} from '../../util/util'; import {ViewController} from '../nav/view-controller'; import {NavController} from '../nav/nav-controller'; @@ -134,7 +134,7 @@ export class Navbar extends ToolbarBase { } constructor( - private _app: IonicApp, + private _app: App, @Optional() viewCtrl: ViewController, elementRef: ElementRef, config: Config, diff --git a/src/components/tabs/tab.ts b/src/components/tabs/tab.ts index 58b32f0f2c..91401e927e 100644 --- a/src/components/tabs/tab.ts +++ b/src/components/tabs/tab.ts @@ -1,6 +1,6 @@ import {Component, Inject, forwardRef, ElementRef, NgZone, Renderer, DynamicComponentLoader, ViewContainerRef, ViewChild, Type, ViewEncapsulation, ChangeDetectorRef, EventEmitter, Input, Output} from '@angular/core'; -import {IonicApp} from '../app/app'; +import {App} from '../app/app'; import {Config} from '../../config/config'; import {isTrueProperty} from '../../util/util'; import {Keyboard} from '../../util/keyboard'; @@ -208,7 +208,7 @@ export class Tab extends NavController { constructor( @Inject(forwardRef(() => Tabs)) parentTabs: Tabs, - app: IonicApp, + app: App, config: Config, keyboard: Keyboard, elementRef: ElementRef, diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts index 14a3e25041..fd645debf6 100644 --- a/src/components/tabs/tabs.ts +++ b/src/components/tabs/tabs.ts @@ -1,6 +1,6 @@ import {Component, Directive, ElementRef, Optional, Host, forwardRef, ViewContainerRef, ViewChild, ViewChildren, EventEmitter, Output, Input, Renderer, ViewEncapsulation} from '@angular/core'; -import {IonicApp} from '../app/app'; +import {App} from '../app/app'; import {Config} from '../../config/config'; import {Tab} from './tab'; import {TabButton} from './tab-button'; @@ -49,7 +49,7 @@ import {isBlank, isTrueProperty} from '../../util/util'; * * @usage * - * You can add a basic tabs template to a `@Page` using the following + * You can add a basic tabs template to a `@Component` using the following * template: * * ```html @@ -63,7 +63,7 @@ import {isBlank, isTrueProperty} from '../../util/util'; * Where `tab1Root`, `tab2Root`, and `tab3Root` are each a page: * *```ts - * @Page({ + * @Component({ * templateUrl: 'build/pages/tabs/tabs.html' * }) * export class TabsPage { @@ -223,7 +223,7 @@ export class Tabs extends Ion { constructor( @Optional() parent: NavController, @Optional() viewCtrl: ViewController, - private _app: IonicApp, + private _app: App, private _config: Config, private _elementRef: ElementRef, private _platform: Platform, diff --git a/src/components/tap-click/tap-click.ts b/src/components/tap-click/tap-click.ts index 33ee84c892..056747748f 100644 --- a/src/components/tap-click/tap-click.ts +++ b/src/components/tap-click/tap-click.ts @@ -1,6 +1,6 @@ import {Injectable, NgZone} from '@angular/core'; -import {IonicApp} from '../app/app'; +import {App} from '../app/app'; import {Config} from '../../config/config'; import {pointerCoord, hasPointerMoved} from '../../util/dom'; import {Activator} from './activator'; @@ -22,7 +22,7 @@ export class TapClick { constructor( config: Config, - private app: IonicApp, + private app: App, private zone: NgZone ) { let self = this; diff --git a/src/config/bootstrap.ts b/src/config/bootstrap.ts index 2226bfbdb5..3d79c87699 100644 --- a/src/config/bootstrap.ts +++ b/src/config/bootstrap.ts @@ -1,36 +1,81 @@ -import {provide, Provider, ComponentRef, NgZone} from '@angular/core'; +import {bootstrap} from '@angular/platform-browser-dynamic'; +import {Directive, ReflectiveInjector, Renderer, enableProdMode, ViewContainerRef, provide, PLATFORM_DIRECTIVES, ComponentRef, NgZone, DynamicComponentLoader} from '@angular/core'; import {ROUTER_PROVIDERS} from '@angular/router'; import {LocationStrategy, HashLocationStrategy} from '@angular/common'; import {HTTP_PROVIDERS} from '@angular/http'; +import {App} from '../components/app/app'; import {ClickBlock} from '../util/click-block'; import {Config} from './config'; import {Events} from '../util/events'; import {FeatureDetect} from '../util/feature-detect'; import {Form} from '../util/form'; -import {IonicApp} from '../components/app/app'; +import {IONIC_DIRECTIVES} from './directives'; +import {isPresent} from '../util/util'; import {Keyboard} from '../util/keyboard'; import {MenuController} from '../components/menu/menu-controller'; +import {nativeTimeout, closest} from '../util/dom'; import {NavRegistry} from '../components/nav/nav-registry'; import {Platform} from '../platform/platform'; -import {ready, closest} from '../util/dom'; import {ScrollView} from '../util/scroll-view'; import {TapClick} from '../components/tap-click/tap-click'; import {Translate} from '../translation/translate'; +const _reflect: any = Reflect; -/** - * @private - */ -export function ionicProviders(args: any = {}) { - let platform = new Platform(); - let navRegistry = new NavRegistry(args.pages); - var config = args.config; +export function ionicBootstrap(appRootComponent: any, customProviders?: Array, config?: any): Promise> { + // get all Ionic Providers + let providers = ionicProviders(customProviders, config); + // automatically set "ion-app" selector to users root component + addSelector(appRootComponent, 'ion-app'); + + // call angular bootstrap + return bootstrap(appRootComponent, providers).then(ngComponentRef => { + // ionic app has finished bootstrapping + return ionicPostBootstrap(ngComponentRef); + }); +} + + +export function ionicPostBootstrap(ngComponentRef: ComponentRef): ComponentRef { + //ngComponentRef.injector.get(TapClick); + let app: App = ngComponentRef.injector.get(App); + app.setAppInjector(ngComponentRef.injector); + + // prepare platform ready + let platform: Platform = ngComponentRef.injector.get(Platform); + platform.setZone(ngComponentRef.injector.get(NgZone)); + platform.prepareReady(); + + // TODO: Use Renderer + ngComponentRef.location.nativeElement.classList.add('app-init'); + + return ngComponentRef; +} + + +export function ionicProviders(customProviders?: Array, config?: any): any[] { + // add custom providers to Ionic's dev + let directives = IONIC_DIRECTIVES; + if (customProviders) { + directives.push(customProviders); + } + + // create an instance of Config if (!(config instanceof Config)) { config = new Config(config); } + // enable production mode if config set to true + if (config.getBoolean('prodMode')) { + enableProdMode(); + } + + // create an instance of Platform + let platform = new Platform(); + + // initialize platform platform.setUrl(window.location.href); platform.setUserAgent(window.navigator.userAgent); platform.setNavigatorPlatform(window.navigator.platform); @@ -38,7 +83,6 @@ export function ionicProviders(args: any = {}) { config.setPlatform(platform); let clickBlock = new ClickBlock(); - let events = new Events(); let featureDetect = new FeatureDetect(); @@ -46,51 +90,43 @@ export function ionicProviders(args: any = {}) { bindEvents(window, document, platform, events); return [ - IonicApp, + App, provide(ClickBlock, {useValue: clickBlock}), provide(Config, {useValue: config}), - provide(Platform, {useValue: platform}), - provide(FeatureDetect, {useValue: featureDetect}), provide(Events, {useValue: events}), - provide(NavRegistry, {useValue: navRegistry}), - TapClick, + provide(FeatureDetect, {useValue: featureDetect}), Form, Keyboard, MenuController, + NavRegistry, + provide(Platform, {useValue: platform}), Translate, + TapClick, + provide(PLATFORM_DIRECTIVES, {useValue: [directives], multi: true}), ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HashLocationStrategy}), HTTP_PROVIDERS, ]; } -/** - * @private - */ -export function postBootstrap(appRef: ComponentRef, prodMode: boolean) { - appRef.injector.get(TapClick); - let app: IonicApp = appRef.injector.get(IonicApp); - let platform: Platform = appRef.injector.get(Platform); - platform.setZone(appRef.injector.get(NgZone)); - platform.prepareReady(); - app.setProd(prodMode); - app.setAppInjector(appRef.injector); -} - -function setupDom(window, document, config, platform, clickBlock, featureDetect) { +function setupDom(window: Window, document: Document, config: Config, platform: Platform, clickBlock: ClickBlock, featureDetect: FeatureDetect) { let bodyEle = document.body; let mode = config.get('mode'); // if dynamic mode links have been added the fire up the correct one let modeLinkAttr = mode + '-href'; - let linkEle = document.head.querySelector('link[' + modeLinkAttr + ']'); + let linkEle = document.head.querySelector('link[' + modeLinkAttr + ']'); if (linkEle) { let href = linkEle.getAttribute(modeLinkAttr); linkEle.removeAttribute(modeLinkAttr); linkEle.href = href; } + let headStyle = document.createElement('style'); + headStyle.innerHTML = 'ion-app{display:none}'; + document.head.appendChild(headStyle); + // set the mode class name // ios/md/wp bodyEle.classList.add(mode); @@ -122,10 +158,6 @@ function setupDom(window, document, config, platform, clickBlock, featureDetect) bodyEle.classList.add('enable-hover'); } - if (config.get('clickBlock')) { - clickBlock.enable(); - } - // run feature detection tests featureDetect.run(window, document); } @@ -134,7 +166,7 @@ function setupDom(window, document, config, platform, clickBlock, featureDetect) /** * Bind some global events and publish on the 'app' channel */ -function bindEvents(window, document, platform, events) { +function bindEvents(window: Window, document: Document, platform: Platform, events: Events) { window.addEventListener('online', (ev) => { events.publish('app:online', ev); }, false); @@ -150,10 +182,10 @@ function bindEvents(window, document, platform, events) { // When that status taps, we respond window.addEventListener('statusTap', (ev) => { // TODO: Make this more better - var el = document.elementFromPoint(platform.width() / 2, platform.height() / 2); + let el = document.elementFromPoint(platform.width() / 2, platform.height() / 2); if (!el) { return; } - var content = closest(el, 'scroll-content'); + let content = closest(el, 'scroll-content'); if (content) { var scroll = new ScrollView(content); scroll.scrollTo(0, 0, 300); @@ -161,9 +193,22 @@ function bindEvents(window, document, platform, events) { }); // start listening for resizes XXms after the app starts - setTimeout(function() { - window.addEventListener('resize', function() { + nativeTimeout(() => { + window.addEventListener('resize', () => { platform.windowResize(); }); }, 2000); } + +/** + * @private + */ +export function addSelector(type: any, selector: string) { + if (type) { + let annotations = _reflect.getMetadata('annotations', type); + if (annotations && !annotations[0].selector) { + annotations[0].selector = selector; + _reflect.defineMetadata('annotations', annotations, type); + } + } +} diff --git a/src/config/test/config.spec.ts b/src/config/test/config.spec.ts index 65160debcc..ae83b77b53 100644 --- a/src/config/test/config.spec.ts +++ b/src/config/test/config.spec.ts @@ -80,7 +80,7 @@ export function run() { let userConfig = new Config({ mode: 'configInstance' }) - let providers = ionicProviders({config:userConfig}); + let providers = ionicProviders(null, userConfig); let config = providers.find(provider => provider.useValue instanceof Config).useValue; @@ -88,9 +88,9 @@ export function run() { }); it('should create new Config instance from config object in ionicProviders', () => { - let providers = ionicProviders({config: { + let providers = ionicProviders(null, { mode: 'configObj' - }}); + }); let config = providers.find(provider => provider.useValue instanceof Config).useValue; diff --git a/src/decorators/app.ts b/src/decorators/app.ts deleted file mode 100644 index c6f2efecaf..0000000000 --- a/src/decorators/app.ts +++ /dev/null @@ -1,107 +0,0 @@ -import {Component, ChangeDetectionStrategy, ViewEncapsulation, enableProdMode, Type, provide, PLATFORM_DIRECTIVES} from '@angular/core'; -import {bootstrap} from '@angular/platform-browser-dynamic'; -import {ionicProviders, postBootstrap} from '../config/bootstrap'; -import {IONIC_DIRECTIVES} from '../config/directives'; - -const _reflect: any = Reflect; - -export interface AppMetadata { - prodMode?: boolean; - selector?: string; - inputs?: string[]; - outputs?: string[]; - properties?: string[]; - events?: string[]; - host?: { - [key: string]: string; - }; - providers?: any[]; - directives?: Array; - pipes?: Array; - exportAs?: string; - queries?: { - [key: string]: any; - }; - template?: string; - templateUrl?: string; - moduleId?: string; - styleUrls?: string[]; - styles?: string[]; - changeDetection?: ChangeDetectionStrategy; - encapsulation?: ViewEncapsulation; - config?: any; -} - -/** -* @name App -* @description -* App is an Ionic decorator that bootstraps an application. It can be passed a -* number of arguments that act as global config variables for the app. -* `@App` is similar to Angular's `@Component` in which it can accept a `template` -* 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 -* import {App} from 'ionic-angular'; -* -* @App({ -* templateUrl: 'app/app.html', -* providers: [DataService] -* }) -* -* export class MyApp{ -* // Anything we would want to do at the root of our app -* } -* ``` -* -* @property {object} [config] - the app's {@link /docs/v2/api/config/Config/ Config} object. -* @property {boolean} [prodMode] - Enable Angular's production mode, which turns off assertions and other checks within the framework. Additionally, this config sets the return value of `isProd()` which is on the `IonicApp` instance. Defaults to `false`. -* @property {array} [pipes] - any pipes for your app. -* @property {array} [providers] - any providers for your app. -* @property {string} [template] - the template to use for the app root. -* @property {string} [templateUrl] - a relative URL pointing to the template to use for the app root. -*/ -export function App(args: AppMetadata = {}) { - - return function(cls) { - // get current annotations - let annotations = _reflect.getMetadata('annotations', cls) || []; - - args.selector = 'ion-app'; - - // if no template was provided, default so it has a root - if (!args.templateUrl && !args.template) { - args.template = ''; - } - - // create @Component - annotations.push(new Component(args)); - - // redefine with added annotations - _reflect.defineMetadata('annotations', annotations, cls); - - // 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(); - } - - bootstrap(cls, providers).then(appRef => { - postBootstrap(appRef, args.prodMode); - }); - - return cls; - }; -} diff --git a/src/decorators/page.ts b/src/decorators/page.ts index d70e29520d..162312f581 100644 --- a/src/decorators/page.ts +++ b/src/decorators/page.ts @@ -28,41 +28,13 @@ export interface PageMetadata { } /** - * @name Page - * @description - * - * The Page decorator indicates that the decorated class is an Ionic - * navigation component, meaning it can be navigated to using a - * [NavController](../../nav/NavController). - * - * 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 - * - * ```ts - * @Page({ - * template: ` - * - * I am a page! - * - * ` - * }) - * class MyPage {} - * ``` - * - * 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. - * - * For more information on how pages are created, see the [NavController API Docs](../../components/nav/NavController/#creating_pages) + * @private */ export function Page(config: PageMetadata) { return function(cls) { + // deprecated warning: added beta.8 2016-05-27 + console.warn('@Page decorator has been deprecated. Please use Angular\'s @Component instead.\nimport {Component} from \'@angular/core\';'); + config.selector = 'ion-page'; config.host = config.host || {}; config.host['[hidden]'] = '_hidden'; diff --git a/src/index.ts b/src/index.ts index 65c7635b7f..78d8f01acf 100644 --- a/src/index.ts +++ b/src/index.ts @@ -3,7 +3,6 @@ export * from './config/bootstrap'; export * from './config/config'; export * from './config/directives'; -export * from './decorators/app'; export * from './decorators/page'; export * from './components'; From e5522d2de84cfd1131aa8c9081a14d8562feb820 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 31 May 2016 15:42:54 -0500 Subject: [PATCH 2/5] chore(generators): remove use of custom decorators --- tooling/generators/page/page.tmpl.js | 5 +++-- tooling/generators/page/page.tmpl.ts | 5 +++-- tooling/generators/tabs/tabs.tmpl.js | 5 +++-- tooling/generators/tabs/tabs.tmpl.ts | 5 +++-- 4 files changed, 12 insertions(+), 8 deletions(-) diff --git a/tooling/generators/page/page.tmpl.js b/tooling/generators/page/page.tmpl.js index 753e82c4a4..01c437a675 100644 --- a/tooling/generators/page/page.tmpl.js +++ b/tooling/generators/page/page.tmpl.js @@ -1,4 +1,5 @@ -import {Page, NavController} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {NavController} from 'ionic-angular'; /* Generated class for the <%= jsClassName %> page. @@ -6,7 +7,7 @@ import {Page, NavController} from 'ionic-angular'; See http://ionicframework.com/docs/v2/components/#navigation for more info on Ionic pages and navigation. */ -@Page({ +@Component({ templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html', }) export class <%= jsClassName %> { diff --git a/tooling/generators/page/page.tmpl.ts b/tooling/generators/page/page.tmpl.ts index 87e38a7118..f1f161eaea 100644 --- a/tooling/generators/page/page.tmpl.ts +++ b/tooling/generators/page/page.tmpl.ts @@ -1,4 +1,5 @@ -import {Page, NavController} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {NavController} from 'ionic-angular'; /* Generated class for the <%= jsClassName %> page. @@ -6,7 +7,7 @@ import {Page, NavController} from 'ionic-angular'; See http://ionicframework.com/docs/v2/components/#navigation for more info on Ionic pages and navigation. */ -@Page({ +@Component({ templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html', }) export class <%= jsClassName %> { diff --git a/tooling/generators/tabs/tabs.tmpl.js b/tooling/generators/tabs/tabs.tmpl.js index 41b1072d2e..dd753a6fbf 100644 --- a/tooling/generators/tabs/tabs.tmpl.js +++ b/tooling/generators/tabs/tabs.tmpl.js @@ -1,8 +1,9 @@ -import {NavController, Page} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {NavController} from 'ionic-angular'; <% _.forEach(tabs, function(tab) { %>import {<%= tab.jsClassName %>} from '../<%= tab.fileName %>/<%= tab.fileName %>'; <% }); %> -@Page({ +@Component({ templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html' }) export class <%= jsClassName %> { diff --git a/tooling/generators/tabs/tabs.tmpl.ts b/tooling/generators/tabs/tabs.tmpl.ts index 36fa6086a0..64ccdf7270 100644 --- a/tooling/generators/tabs/tabs.tmpl.ts +++ b/tooling/generators/tabs/tabs.tmpl.ts @@ -1,8 +1,9 @@ -import {NavController, Page} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {NavController} from 'ionic-angular'; <% _.forEach(tabs, function(tab) { %>import {<%= tab.jsClassName %>} from '../<%= tab.fileName %>/<%= tab.fileName %>'; <% }); %> -@Page({ +@Component({ templateUrl: 'build/<%= directory %>/<%= fileName %>/<%= fileName %>.html' }) export class <%= jsClassName %> { From 94e938d6b334eccffb51055e83046666e0d45443 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 31 May 2016 15:47:16 -0500 Subject: [PATCH 3/5] docs(bootstrap): update to use ionicBootstrap --- src/components/datetime/datetime.ts | 16 +++--- src/components/item/item-sliding.ts | 5 +- src/components/list/list.ts | 12 ++-- src/components/menu/menu-controller.ts | 5 +- src/components/menu/menu.ts | 26 ++++----- src/components/nav/nav-push.ts | 4 +- src/components/nav/view-controller.ts | 18 +++--- src/components/popover/popover.ts | 8 +-- src/components/refresher/refresher.ts | 2 +- src/components/slides/slides.ts | 7 ++- src/config/config.ts | 78 ++++++++++++-------------- src/config/directives.ts | 38 +------------ src/platform/platform.ts | 13 +++-- src/platform/storage/local-storage.ts | 5 +- 14 files changed, 101 insertions(+), 136 deletions(-) diff --git a/src/components/datetime/datetime.ts b/src/components/datetime/datetime.ts index 379d2b4872..44674b22a2 100644 --- a/src/components/datetime/datetime.ts +++ b/src/components/datetime/datetime.ts @@ -193,14 +193,14 @@ const DATETIME_VALUE_ACCESSOR = new Provider( * ### App Config Level * * ```ts - * @App({ - * config: { - * monthNames: ['janeiro', 'fevereiro', 'mar\u00e7o', ... ], - * monthShortNames: ['jan', 'fev', 'mar', ... ], - * dayNames: ['domingo', 'segunda-feira', 'ter\u00e7a-feira', ... ], - * dayShortNames: ['dom', 'seg', 'ter', ... ], - * } - * }) + * import {ionicBootstrap} from 'ionic-angular'; + * + * ionicBootstrap(MyApp, customProviders, { + * monthNames: ['janeiro', 'fevereiro', 'mar\u00e7o', ... ], + * monthShortNames: ['jan', 'fev', 'mar', ... ], + * dayNames: ['domingo', 'segunda-feira', 'ter\u00e7a-feira', ... ], + * dayShortNames: ['dom', 'seg', 'ter', ... ], + * }); * ``` * * ### Component Input Level diff --git a/src/components/item/item-sliding.ts b/src/components/item/item-sliding.ts index 08f9472239..647f2b7528 100644 --- a/src/components/item/item-sliding.ts +++ b/src/components/item/item-sliding.ts @@ -83,9 +83,10 @@ export class ItemSliding { * ``` * * ```ts - * import {Page, ItemSliding} from 'ionic-angular'; + * import {Component} from '@angular/core'; + * import {ItemSliding} from 'ionic-angular'; * - * @Page({}) + * @Component({...}) * export class MyClass { * constructor() { } * diff --git a/src/components/list/list.ts b/src/components/list/list.ts index ef13a18823..dbd44a3fb7 100644 --- a/src/components/list/list.ts +++ b/src/components/list/list.ts @@ -52,10 +52,10 @@ export class List extends Ion { * Enable the sliding items. * * ```ts - * import {Page, List} from 'ionic-angular'; - * import {ViewChild} from '@angular/core'; + * import {Component, ViewChild} from '@angular/core'; + * import {List} from 'ionic-angular'; * - * @Page({}) + * @Component({...}) * export class MyClass { * @ViewChild(List) list: List; * @@ -90,10 +90,10 @@ export class List extends Ion { * Close the open sliding item. * * ```ts - * import {Page, List} from 'ionic-angular'; - * import {ViewChild} from '@angular/core'; + * import {Component, ViewChild} from '@angular/core'; + * import {List} from 'ionic-angular'; * - * @Page({}) + * @Component({...}) * export class MyClass { * @ViewChild(List) list: List; * diff --git a/src/components/menu/menu-controller.ts b/src/components/menu/menu-controller.ts index d6b7114709..376efddf2b 100644 --- a/src/components/menu/menu-controller.ts +++ b/src/components/menu/menu-controller.ts @@ -33,9 +33,10 @@ import {MenuType} from './menu-types'; * toggling the menu. * * ```ts - * import{Page, MenuController} from 'ionic-angular'; + * import {Component} from '@angular/core'; + * import {MenuController} from 'ionic-angular'; * - * @Page({...}) + * @Component({...}) * export class MyPage { * * constructor(private menu: MenuController) { diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts index e72833cb69..8ea3bfcc6e 100644 --- a/src/components/menu/menu.ts +++ b/src/components/menu/menu.ts @@ -104,17 +104,16 @@ import {isTrueProperty} from '../../util/util'; * `push` for all modes, and then set the type to `overlay` for the `ios` mode. * * ```ts - * @App({ - * templateUrl: 'build/app.html', - * config: { - * menuType: 'push', - * platforms: { - * ios: { - * menuType: 'overlay', - * } + * import {ionicBootstrap} from 'ionic-angular'; + * + * ionicBootstrap(MyApp, customProviders, { + * menuType: 'push', + * platforms: { + * ios: { + * menuType: 'overlay', * } * } - * }) + * }); * ``` * * @@ -150,13 +149,12 @@ import {isTrueProperty} from '../../util/util'; * when it is called. * * ```ts - * import{Page, MenuController} from 'ionic-angular'; + * import {Component} from '@angular/core'; + * import {MenuController} from 'ionic-angular'; * - * @Page({...}) + * @Component({...}) * export class MyPage { - * constructor(private menu: MenuController) { - * - * } + * constructor(private menu: MenuController) {} * * openMenu() { * this.menu.open(); diff --git a/src/components/nav/nav-push.ts b/src/components/nav/nav-push.ts index 01c8507ad3..6f8a7c8c46 100644 --- a/src/components/nav/nav-push.ts +++ b/src/components/nav/nav-push.ts @@ -21,7 +21,7 @@ import {NavRegistry} from './nav-registry'; * * ```ts * import {LoginPage} from 'login'; - * @Page({ + * @Component({ * template: `` * }) * class MyPage { @@ -52,7 +52,7 @@ import {NavRegistry} from './nav-registry'; export class NavPush { /** - * @input {page} the page you want to push + * @input {Page} the page you want to push */ @Input() navPush; diff --git a/src/components/nav/view-controller.ts b/src/components/nav/view-controller.ts index 5365970817..b984dbaaa2 100644 --- a/src/components/nav/view-controller.ts +++ b/src/components/nav/view-controller.ts @@ -12,14 +12,16 @@ import {isPresent} from '../../util/util'; * Access various features and information about the current view. * @usage * ```ts - * import {Page, ViewController} from 'ionic-angular'; - * @Page.... - * export class MyPage{ - * constructor(viewCtrl: ViewController){ - * this.viewCtrl = viewCtrl; - * } - * } - * ``` + * import {Component} from '@angular/core'; + * import {ViewController} from 'ionic-angular'; + * + * @Component({...}) + * export class MyPage{ + * + * constructor(public viewCtrl: ViewController) {} + * + * } + * ``` */ export class ViewController { private _cntDir: any; diff --git a/src/components/popover/popover.ts b/src/components/popover/popover.ts index b784db91e1..83f8fbeab3 100644 --- a/src/components/popover/popover.ts +++ b/src/components/popover/popover.ts @@ -60,8 +60,8 @@ const POPOVER_BODY_PADDING = 2; * * ``` * - * ```js - * @Page({}) + * ```ts + * @Component({}) * class MyPage { * constructor(private nav: NavController) {} * @@ -78,8 +78,8 @@ const POPOVER_BODY_PADDING = 2; * can be anything. Below is an example of a page with items * that close the popover on click. * - * ```js - * @Page({ + * ```ts + * @Component({ * template: ` * * Ionic diff --git a/src/components/refresher/refresher.ts b/src/components/refresher/refresher.ts index ef05e3daf3..7fad65ffa2 100644 --- a/src/components/refresher/refresher.ts +++ b/src/components/refresher/refresher.ts @@ -33,7 +33,7 @@ import {CSS, pointerCoord, transitionEnd} from '../../util/dom'; * ``` * * ```ts - * @Page({...}) + * @Component({...}) * export class NewsFeedPage { * * doRefresh(refresher) { diff --git a/src/components/slides/slides.ts b/src/components/slides/slides.ts index 6d70118161..513253b639 100644 --- a/src/components/slides/slides.ts +++ b/src/components/slides/slides.ts @@ -68,7 +68,7 @@ import {Scroll} from '../scroll/scroll'; * * @usage * - * You can add slides to a `@Page` using the following template: + * You can add slides to a `@Component` using the following template: * * ```html * @@ -87,9 +87,10 @@ import {Scroll} from '../scroll/scroll'; * To add [options](#configuring), we will define them in `mySlideOptions` in our class `MyPage`: * * ```ts - * import {Page, Slides} from 'ionic-angular'; + * import {Component} from '@angular/core'; + * import {Slides} from 'ionic-angular'; * - * @Page({ + * @Component({ * templateUrl: 'my-page.html' * }) * class MyPage { diff --git a/src/config/config.ts b/src/config/config.ts index 123cbf1b57..52613e7497 100644 --- a/src/config/config.ts +++ b/src/config/config.ts @@ -17,66 +17,57 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util'; * You can set the tab placement, icon mode, animations, and more here. * * ```ts - * @App({ - * template: `` - * config: { - * backButtonText: 'Go Back', - * iconMode: 'ios', - * modalEnter: 'modal-slide-in', - * modalLeave: 'modal-slide-out', - * tabbarPlacement: 'bottom', - * pageTransition: 'ios', - * } - * }) + * import {ionicBootstrap} from 'ionic-angular'; + * + * ionicBootstrap(AppRoot, customProviders, { + * backButtonText: 'Go Back', + * iconMode: 'ios', + * modalEnter: 'modal-slide-in', + * modalLeave: 'modal-slide-out', + * tabbarPlacement: 'bottom', + * pageTransition: 'ios', + * }); * ``` * - * To change the mode to always use Material Design (md). + * + * Config can be overwritten at multiple levels allowing for more granular configuration. + * Below is an example where an app can override any setting we want based on a platform. * * ```ts - * @App({ - * template: `` - * config: { - * mode: 'md' + * import {ionicBootstrap} from 'ionic-angular'; + * + * ionicBootstrap(AppRoot, customProviders, { + * tabbarPlacement: 'bottom', + * platforms: { + * ios: { + * tabbarPlacement: 'top', * } - * }) + * }); * ``` * - * Config can be overwritten at multiple levels allowing for more configuration. Taking the example from earlier, we can override any setting we want based on a platform. - * ```ts - * @App({ - * template: `` - * config: { - * tabbarPlacement: 'bottom', - * platforms: { - * ios: { - * tabbarPlacement: 'top', - * } - * } - * } - * }) - * ``` - * - * We could also configure these values at a component level. Take `tabbarPlacement`, we can configure this as a property on our `ion-tabs`. + * We could also configure these values at a component level. Take `tabbarPlacement`, + * we can configure this as a property on our `ion-tabs`. * * ```html * - * - * + * + * * ``` * - * The last way we could configure is through URL query strings. This is useful for testing while in the browser. - * Simply add `?ionic=` to the url. + * The last way we could configure is through URL query strings. This is useful for testing + * while in the browser. Simply add `?ionic=` to the url. * * ```bash * http://localhost:8100/?ionicTabbarPlacement=bottom * ``` * - * Custom values can be added to config, and looked up at a later point in time. + * Any value can be added to config, and looked up at a later in any component. * - * ``` javascript + * ```js * config.set('ios', 'favoriteColor', 'green'); + * * // from any page in your app: - * config.get('favoriteColor'); // 'green' + * config.get('favoriteColor'); // 'green' when iOS * ``` * * @@ -105,8 +96,9 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util'; * | `pageTransitionDelay` | `number` | The delay in milliseconds before the transition starts while changing pages. | * | `pickerEnter` | `string` | The name of the transition to use while a picker is presented. | * | `pickerLeave` | `string` | The name of the transition to use while a picker is dismissed. | - * | `popoverEnter` | `string` | The name of the transition to use while a popover is presented. | - * | `popoverLeave` | `string` | The name of the transition to use while a popover is dismissed. | + * | `popoverEnter` | `string` | The name of the transition to use while a popover is presented. | + * | `popoverLeave` | `string` | The name of the transition to use while a popover is dismissed. | + * | `prodMode` | `boolean` | Disable development mode, which turns off assertions and other checks within the framework. One important assertion this disables verifies that a change detection pass does not result in additional changes to any bindings (also known as unidirectional data flow). * | `spinner` | `string` | The default spinner to use when a name is not defined. | * | `tabbarHighlight` | `boolean` | Whether to show a highlight line under the tab when it is selected. | * | `tabbarLayout` | `string` | The layout to use for all tabs. Available options: `"icon-top"`, `"icon-left"`, `"icon-right"`, `"icon-bottom"`, `"icon-hide"`, `"title-hide"`. | @@ -125,7 +117,7 @@ export class Config { */ platform: Platform; - constructor(config?) { + constructor(config?: any) { this._s = config && isObject(config) && !isArray(config) ? config : {}; } diff --git a/src/config/directives.ts b/src/config/directives.ts index b499145ff3..6a040f0746 100644 --- a/src/config/directives.ts +++ b/src/config/directives.ts @@ -45,41 +45,9 @@ import {ShowWhen, HideWhen} from '../components/show-hide-when/show-hide-when'; * @name IONIC_DIRECTIVES * @description * The core Ionic directives as well as Angular's `CORE_DIRECTIVES` and `FORM_DIRECTIVES` are - * available 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. - * - * 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: "" - * }) - * - * 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 '@angular/platform/browser'; - * - * @Component({ - * //default selector, and theme. - * directives: [IONIC_DIRECTIVES] - * }) - * class App {} - * - * bootstrap(App,ionicProviders()) - * ``` - * + * available automatically when you bootstrap your app with the `ionicBootstrap`. This means + * if you are using custom components you do not need to import `IONIC_DIRECTIVES` as they + * are part of the app's default directives. * * * #### Angular diff --git a/src/platform/platform.ts b/src/platform/platform.ts index 931f5b940c..6d57b4f819 100644 --- a/src/platform/platform.ts +++ b/src/platform/platform.ts @@ -19,7 +19,7 @@ import {ready, windowDimensions, flushDimensionCache} from '../util/dom'; * ```ts * import {Platform} from 'ionic-angular'; * - * @Page({...}) + * @Component({...}) * export MyPage { * constructor(platform: Platform) { * this.platform = platform; @@ -73,7 +73,7 @@ export class Platform { * ``` * import {Platform} from 'ionic-angular'; * - * @Page({...}) + * @Component({...}) * export MyPage { * constructor(platform: Platform) { * this.platform = platform; @@ -116,7 +116,7 @@ export class Platform { * ``` * import {Platform} from 'ionic-angular'; * - * @Page({...}) + * @Component({...}) * export MyPage { * constructor(platform: Platform) { * this.platform = platform; @@ -140,7 +140,7 @@ export class Platform { * ``` * import {Platform} from 'ionic-angular'; * - * @Page({...}) + * @Component({...}) * export MyPage { * constructor(platform: Platform) { * this.platform = platform; @@ -186,9 +186,10 @@ export class Platform { * the status bar plugin, so the web should not run status bar plugin logic. * * ``` - * import {App, Platform} from 'ionic-angular'; + * import {Component} from '@angular/core'; + * import {Platform} from 'ionic-angular'; * - * @App({...}) + * @Component({...}) * export MyApp { * constructor(platform: Platform) { * platform.ready().then((readySource) => { diff --git a/src/platform/storage/local-storage.ts b/src/platform/storage/local-storage.ts index 1c65a63c87..78aaf853a1 100644 --- a/src/platform/storage/local-storage.ts +++ b/src/platform/storage/local-storage.ts @@ -15,8 +15,9 @@ import {StorageEngine} from './storage'; * * @usage * ```ts - * import {Page, Storage, LocalStorage} from 'ionic-angular'; - * @Page({ + * import {Component} from '@angular/core'; + * import {Storage, LocalStorage} from 'ionic-angular'; + * @Component({ * template: `` * }); * export class MyClass{ From 6e9087534d3bb202e212a03d2d9304d4d30d15cf Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 31 May 2016 15:49:12 -0500 Subject: [PATCH 4/5] test(bootstrap): update to use ionicBootstrap --- .../action-sheet/test/basic/index.ts | 15 +++--- src/components/alert/test/basic/index.ts | 20 ++++---- src/components/alert/test/dismiss/index.ts | 18 ++++---- src/components/app/test/animations/index.ts | 24 +++++----- src/components/app/test/app.spec.ts | 6 +-- src/components/app/test/cordova/index.ts | 46 ++++++++----------- src/components/app/test/gestures/index.ts | 15 +++--- src/components/app/test/storage/index.ts | 16 +++++-- src/components/app/test/typography/index.ts | 9 ++-- src/components/badge/test/basic/index.ts | 12 ++--- src/components/button/test/basic/index.ts | 18 +++++--- src/components/button/test/block/index.ts | 9 ++-- src/components/button/test/clear/index.ts | 9 ++-- src/components/button/test/dynamic/index.ts | 9 ++-- src/components/button/test/fab/index.ts | 9 ++-- src/components/button/test/full/index.ts | 9 ++-- src/components/button/test/icons/index.ts | 9 ++-- src/components/button/test/outline/index.ts | 9 ++-- src/components/button/test/raised/index.ts | 21 ++------- src/components/button/test/round/index.ts | 7 ++- src/components/button/test/sizes/index.ts | 9 ++-- src/components/card/test/advanced/index.ts | 9 ++-- src/components/card/test/basic/index.ts | 9 ++-- src/components/card/test/images/index.ts | 9 ++-- src/components/card/test/list/index.ts | 9 ++-- src/components/card/test/map/index.ts | 9 ++-- src/components/card/test/social/index.ts | 9 ++-- src/components/checkbox/test/basic/index.ts | 21 +++------ src/components/chip/test/basic/index.ts | 12 ++--- src/components/chip/test/delete/index.ts | 12 +++-- src/components/chip/test/icon/index.ts | 12 ++--- src/components/chip/test/image/index.ts | 12 ++--- src/components/datetime/test/basic/index.ts | 15 +++--- src/components/grid/test/alignment/index.ts | 9 ++-- src/components/grid/test/basic/index.ts | 9 ++-- src/components/grid/test/full/index.ts | 9 ++-- src/components/icon/test/basic/index.ts | 35 +++++++------- .../infinite-scroll/infinite-scroll.ts | 4 +- .../infinite-scroll/test/basic/index.ts | 20 ++++---- .../infinite-scroll/test/short-list/index.ts | 9 ++-- .../input/test/clear-input/index.ts | 15 +++--- .../input/test/fixed-inline-labels/index.ts | 9 ++-- .../input/test/floating-labels/index.ts | 22 ++++----- .../input/test/form-inputs/index.ts | 15 +++--- .../input/test/inline-labels/index.ts | 11 +++-- .../input/test/input-focus/index.ts | 26 ++++++----- .../input/test/inset-inputs/index.ts | 9 ++-- .../input/test/placeholder-labels/index.ts | 9 ++-- .../input/test/stacked-labels/index.ts | 22 +++++---- src/components/item/test/buttons/index.ts | 11 +++-- src/components/item/test/dividers/index.ts | 9 ++-- src/components/item/test/groups/index.ts | 26 +++++------ src/components/item/test/icons/index.ts | 9 ++-- src/components/item/test/images/index.ts | 9 ++-- src/components/item/test/media/index.ts | 9 ++-- src/components/item/test/sliding/index.ts | 16 +++---- src/components/item/test/text/index.ts | 9 ++-- src/components/list/test/headers/index.ts | 9 ++-- src/components/list/test/inset/index.ts | 9 ++-- src/components/list/test/no-lines/index.ts | 9 ++-- .../list/test/repeat-headers/index.ts | 21 +++++---- src/components/list/test/sticky/index.ts | 21 +++++---- src/components/loading/test/basic/index.ts | 13 ++++-- src/components/loading/test/tabs/index.ts | 13 ++++-- src/components/menu/test/basic/index.ts | 18 ++++---- src/components/menu/test/basic/main.html | 2 +- .../menu/test/disable-swipe/index.ts | 16 +++---- .../menu/test/disable-swipe/main.html | 2 +- .../menu/test/enable-disable/index.ts | 14 +++--- src/components/menu/test/multiple/index.ts | 15 +++--- src/components/menu/test/overlay/index.ts | 14 +++--- src/components/menu/test/push/index.ts | 14 +++--- src/components/menu/test/reveal/index.ts | 14 +++--- src/components/modal/test/basic/index.ts | 31 ++++++------- src/components/nav/test/basic/index.ts | 21 ++++----- src/components/nav/test/init-async/index.ts | 9 ++-- src/components/nav/test/insert-views/index.ts | 33 ++++++------- src/components/nav/test/memory/index.ts | 17 ++++--- src/components/nav/test/nested/index.ts | 24 +++++----- src/components/nav/test/routing/index.ts | 16 ++++--- src/components/picker/test/basic/index.ts | 15 +++--- src/components/popover/test/basic/index.ts | 20 ++++---- src/components/radio/test/basic/index.ts | 7 ++- src/components/refresher/test/basic/index.ts | 7 ++- src/components/scroll/test/basic/index.ts | 9 ++-- .../searchbar/test/floating/index.ts | 16 +++---- src/components/searchbar/test/nav/index.ts | 20 ++++---- .../searchbar/test/toolbar/index.ts | 12 ++--- src/components/segment/test/basic/index.ts | 22 ++++----- src/components/segment/test/nav/index.ts | 23 +++++----- src/components/segment/test/swipe/index.ts | 16 +++---- .../select/test/multiple-value/index.ts | 15 +++--- .../select/test/single-value/index.ts | 20 ++++---- .../show-hide-when/test/basic/index.ts | 28 +++++------ src/components/slides/test/basic/index.ts | 10 ++-- .../slides/test/controller/index.ts | 15 +++--- src/components/slides/test/intro/index.ts | 28 ++++++----- src/components/slides/test/loop/index.ts | 11 +++-- src/components/slides/test/scroll/index.ts | 15 +++--- src/components/spinner/test/basic/index.ts | 7 ++- src/components/tabs/test/advanced/index.ts | 36 ++++++++------- src/components/tabs/test/badges/index.ts | 13 +++--- src/components/tabs/test/basic/index.ts | 19 ++++---- src/components/tabs/test/colors/index.ts | 17 +++---- src/components/tabs/test/ghost/index.ts | 46 ++++++++----------- .../tabs/test/tab-bar-scenarios/index.ts | 17 +++---- src/components/toast/test/basic/index.ts | 17 +++---- src/components/toggle/test/basic/index.ts | 20 +++----- src/components/toolbar/test/colors/index.ts | 9 ++-- .../toolbar/test/scenarios/index.ts | 9 ++-- .../virtual-scroll/test/basic/index.ts | 15 +++--- .../virtual-scroll/test/cards/index.ts | 15 +++--- .../test/image-gallery/index.ts | 15 +++--- .../test/variable-size/index.ts | 14 +++--- 114 files changed, 901 insertions(+), 800 deletions(-) diff --git a/src/components/action-sheet/test/basic/index.ts b/src/components/action-sheet/test/basic/index.ts index 33fbc0be28..34da55c8b4 100644 --- a/src/components/action-sheet/test/basic/index.ts +++ b/src/components/action-sheet/test/basic/index.ts @@ -1,7 +1,8 @@ -import {App, Page, ActionSheet, Alert, Modal, NavController, ViewController, Platform} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap, ActionSheet, Alert, Modal, NavController, ViewController, Platform} from '../../../../../src'; -@Page({ +@Component({ templateUrl: 'main.html' }) class E2EPage { @@ -151,7 +152,7 @@ class E2EPage { } -@Page({ +@Component({ template: ` @@ -173,11 +174,11 @@ class ModalPage { } -@App({ +@Component({ template: '' }) class E2EApp { - constructor() { - this.root = E2EPage; - } + root = E2EPage; } + +ionicBootstrap(E2EApp); diff --git a/src/components/alert/test/basic/index.ts b/src/components/alert/test/basic/index.ts index 45ffb5e687..ef686e2a6e 100644 --- a/src/components/alert/test/basic/index.ts +++ b/src/components/alert/test/basic/index.ts @@ -1,7 +1,8 @@ -import {App, Page, Alert, Modal, NavController, ViewController} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap, Alert, Modal, NavController, ViewController} from '../../../../../src'; -@Page({ +@Component({ templateUrl: 'main.html' }) class E2EPage { @@ -9,6 +10,10 @@ class E2EPage { testPromptOpen: boolean = false; testConfirmResult: string = ''; testPromptResult: string = ''; + testRadioOpen: boolean = false; + testRadioResult: string = ''; + testCheckboxOpen: boolean = false; + testCheckboxResult: string = ''; constructor(private nav: NavController) { } @@ -288,7 +293,7 @@ class E2EPage { } } -@Page({ +@Component({ template: ` @@ -310,12 +315,11 @@ class ModalPage { } -@App({ +@Component({ template: '' }) class E2EApp { - root; - constructor() { - this.root = E2EPage; - } + root = E2EPage; } + +ionicBootstrap(E2EApp); diff --git a/src/components/alert/test/dismiss/index.ts b/src/components/alert/test/dismiss/index.ts index cfd9fdb318..a479c27bf7 100644 --- a/src/components/alert/test/dismiss/index.ts +++ b/src/components/alert/test/dismiss/index.ts @@ -1,8 +1,9 @@ -import { Alert, Loading, NavController, App, Page } from '../../../../index'; -import { FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators } from '@angular/common'; +import {Component} from '@angular/core'; +import {ionicBootstrap, Alert, Loading, NavController} from '../../../../index'; +import {FormBuilder, ControlGroup, Validators} from '@angular/common'; -@Page({ +@Component({ templateUrl: 'main.html' }) export class E2EPage { @@ -32,7 +33,7 @@ export class E2EPage { } } -@Page({ +@Component({ template: ` Another Page @@ -153,12 +154,11 @@ class AnotherPage { } -@App({ +@Component({ template: '' }) class E2EApp { - root; - constructor() { - this.root = E2EPage; - } + root = E2EPage; } + +ionicBootstrap(E2EApp); diff --git a/src/components/app/test/animations/index.ts b/src/components/app/test/animations/index.ts index 060b7d2fda..49f43d2716 100644 --- a/src/components/app/test/animations/index.ts +++ b/src/components/app/test/animations/index.ts @@ -1,18 +1,19 @@ -import {App, Page, Animation, IonicApp} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap, Config, Animation} from '../../../../../src'; -@Page({ +@Component({ templateUrl: 'main.html' }) class E2EPage { duration; easing; - constructor(app: IonicApp) { + constructor(config: Config) { this.duration = '1000'; this.easing = 'ease-in-out'; - console.log('isProd', app.isProd()); + console.log('isProd', config.prodMode); } playGreen() { @@ -54,14 +55,13 @@ class E2EPage { } -@App({ - template: '', - prodMode: true +@Component({ + template: '' }) class E2EApp { - root; - - constructor() { - this.root = E2EPage; - } + root = E2EPage; } + +ionicBootstrap(E2EApp, null, { + prodMode: true +}); diff --git a/src/components/app/test/app.spec.ts b/src/components/app/test/app.spec.ts index 58e6d59000..6507987a7f 100644 --- a/src/components/app/test/app.spec.ts +++ b/src/components/app/test/app.spec.ts @@ -1,4 +1,4 @@ -import {IonicApp, Nav, Tabs, Tab, NavOptions, Config, ViewController, Platform} from '../../../../src'; +import {App, Nav, Tabs, Tab, NavOptions, Config, ViewController, Platform} from '../../../../src'; export function run() { @@ -86,7 +86,7 @@ describe('IonicApp', () => { }); - var app: IonicApp; + var app: App; var config: Config; var platform: Platform; var _cd: any; @@ -106,7 +106,7 @@ describe('IonicApp', () => { beforeEach(() => { config = new Config(); platform = new Platform(); - app = new IonicApp(config, null, platform); + app = new App(config, null, platform); _cd = { reattach: function(){}, detach: function(){} diff --git a/src/components/app/test/cordova/index.ts b/src/components/app/test/cordova/index.ts index 6d9b94ff77..6f47fb5689 100644 --- a/src/components/app/test/cordova/index.ts +++ b/src/components/app/test/cordova/index.ts @@ -1,7 +1,8 @@ -import {App, NavController, Page, IonicApp, Modal, ViewController} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap, NavController, Modal, ViewController} from '../../../../../src'; -@Page({ +@Component({ template: ` This is a modal @@ -21,9 +22,7 @@ import {App, NavController, Page, IonicApp, Modal, ViewController} from '../../. ` }) class MyModal { - constructor(private viewCtrl: ViewController) { - - } + constructor(private viewCtrl: ViewController) {} dismissModal() { this.viewCtrl.dismiss(); @@ -31,7 +30,7 @@ class MyModal { } -@Page({ +@Component({ templateUrl: 'page1.html' }) class Page1 { @@ -46,16 +45,14 @@ class Page1 { } -@Page({ +@Component({ templateUrl: 'page2.html' }) class Page2 { page1 = Page1; page3 = Page3; - constructor(private nav: NavController) { - - } + constructor(private nav: NavController) {} openModal() { let modal = Modal.create(MyModal); @@ -64,13 +61,11 @@ class Page2 { } -@Page({ +@Component({ templateUrl: 'page3.html' }) class Page3 { - constructor(private nav: NavController) { - - } + constructor(private nav: NavController) {} goBack() { this.nav.pop(); @@ -78,7 +73,7 @@ class Page3 { } -@Page({ +@Component({ template: ` This is a tab page @@ -97,13 +92,11 @@ class Page3 { ` }) class TabPage1 { - constructor(private nav: NavController) { - - } + constructor(private nav: NavController) {} } -@Page({ +@Component({ templateUrl: 'tabs.html' }) class TabsPage { @@ -111,9 +104,7 @@ class TabsPage { tab2Root = Page2; tab3Root = Page3; - constructor(private nav: NavController) { - - } + constructor(private nav: NavController) {} goBack() { this.nav.pop(); @@ -121,12 +112,13 @@ class TabsPage { } -@App({ - templateUrl: `./app.html`, - config: { - statusbarPadding: true - } +@Component({ + templateUrl: `./app.html` }) class E2EApp { root = Page1; } + +ionicBootstrap(E2EApp, null, { + statusbarPadding: true +}); diff --git a/src/components/app/test/gestures/index.ts b/src/components/app/test/gestures/index.ts index 735d1a2e01..9d3063b10f 100644 --- a/src/components/app/test/gestures/index.ts +++ b/src/components/app/test/gestures/index.ts @@ -1,7 +1,8 @@ -import {App, Page} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@Page({ +@Component({ templateUrl: 'main.html' }) class E2EPage { @@ -13,13 +14,11 @@ class E2EPage { } -@App({ +@Component({ template: '' }) class E2EApp { - root; - - constructor() { - this.root = E2EPage; - } + root = E2EPage; } + +ionicBootstrap(E2EApp); diff --git a/src/components/app/test/storage/index.ts b/src/components/app/test/storage/index.ts index 180640553c..678de42e71 100644 --- a/src/components/app/test/storage/index.ts +++ b/src/components/app/test/storage/index.ts @@ -1,26 +1,32 @@ import {Component} from '@angular/core'; import {Control, ControlGroup} from '@angular/common'; +import {ionicBootstrap, Storage, LocalStorage, SqlStorage} from '../../../../../src'; -import {App, Storage, LocalStorage, SqlStorage} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class IonicApp { +class E2EApp { + local: Storage; + sql: Storage; + constructor() { this.local = new Storage(LocalStorage); this.sql = new Storage(SqlStorage); } + getLocal() { this.local.get('name').then(value => { alert('Your name is: ' + value); }); } + setLocal() { let name = prompt('Your name?'); this.local.set('name', name); } + removeLocal() { this.local.remove('name'); } @@ -32,12 +38,16 @@ class IonicApp { console.error('Unable to get item from SQL db:', errResult); }); } + setSql() { let name = prompt('Your name?'); this.sql.set('name', name); } + removeSql() { this.sql.remove('name'); } } + +ionicBootstrap(E2EApp); diff --git a/src/components/app/test/typography/index.ts b/src/components/app/test/typography/index.ts index 2cb2ad0b25..5d9d40065f 100644 --- a/src/components/app/test/typography/index.ts +++ b/src/components/app/test/typography/index.ts @@ -1,11 +1,14 @@ -import {App, IonicApp} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap, App} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) class E2EApp { - constructor(app: IonicApp) { + constructor(app: App) { app.setTitle('Basic Buttons'); } } + +ionicBootstrap(E2EApp); diff --git a/src/components/badge/test/basic/index.ts b/src/components/badge/test/basic/index.ts index a1ab440649..6fe29fcc36 100644 --- a/src/components/badge/test/basic/index.ts +++ b/src/components/badge/test/basic/index.ts @@ -1,10 +1,10 @@ -import {App, IonicApp} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { - constructor(app: IonicApp) { - } -} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/button/test/basic/index.ts b/src/components/button/test/basic/index.ts index 1dd24fc8b5..4f2dfa7979 100644 --- a/src/components/button/test/basic/index.ts +++ b/src/components/button/test/basic/index.ts @@ -1,15 +1,17 @@ -import {App, IonicApp} from '../../../../../src'; +import {Component} from '@angular/core'; +import {App, ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { - constructor(app: IonicApp) { - app.setTitle('Basic Buttons'); +class E2EPage { + btnColor; + testingColors = ['primary', 'secondary', 'danger', 'dark']; + testingColorIndex = 0; - this.testingColors = ['primary', 'secondary', 'danger', 'dark']; - this.testingColorIndex = 0; + constructor(app: App) { + app.setTitle('Basic Buttons'); this.chgColor(); } @@ -19,3 +21,5 @@ class E2EApp { this.testingColorIndex = (this.testingColorIndex >= this.testingColors.length - 1 ? 0 : this.testingColorIndex + 1); } } + +ionicBootstrap(E2EPage); diff --git a/src/components/button/test/block/index.ts b/src/components/button/test/block/index.ts index e7471391fb..41b68396b9 100644 --- a/src/components/button/test/block/index.ts +++ b/src/components/button/test/block/index.ts @@ -1,13 +1,16 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { +class E2EPage { blockButton = true; toggleBlock() { this.blockButton = !this.blockButton; } } + +ionicBootstrap(E2EPage); diff --git a/src/components/button/test/clear/index.ts b/src/components/button/test/clear/index.ts index a05a913068..b829dcb948 100644 --- a/src/components/button/test/clear/index.ts +++ b/src/components/button/test/clear/index.ts @@ -1,13 +1,16 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { +class E2EPage { clearButton = true; toggleClear() { this.clearButton = !this.clearButton; } } + +ionicBootstrap(E2EPage); diff --git a/src/components/button/test/dynamic/index.ts b/src/components/button/test/dynamic/index.ts index d31c135010..ae6b4d0794 100644 --- a/src/components/button/test/dynamic/index.ts +++ b/src/components/button/test/dynamic/index.ts @@ -1,10 +1,11 @@ -import {App, IonicApp} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { +class E2EPage { isDestructive: boolean; isSecondary: boolean; isCustom: boolean; @@ -50,3 +51,5 @@ class E2EApp { this.isClicked = !this.isClicked; } } + +ionicBootstrap(E2EPage); diff --git a/src/components/button/test/fab/index.ts b/src/components/button/test/fab/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/button/test/fab/index.ts +++ b/src/components/button/test/fab/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/button/test/full/index.ts b/src/components/button/test/full/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/button/test/full/index.ts +++ b/src/components/button/test/full/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/button/test/icons/index.ts b/src/components/button/test/icons/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/button/test/icons/index.ts +++ b/src/components/button/test/icons/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/button/test/outline/index.ts b/src/components/button/test/outline/index.ts index d93316646c..fb12bd391d 100644 --- a/src/components/button/test/outline/index.ts +++ b/src/components/button/test/outline/index.ts @@ -1,13 +1,16 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { +class E2EPage { outlineButton = true; toggleOutline() { this.outlineButton = !this.outlineButton; } } + +ionicBootstrap(E2EPage); diff --git a/src/components/button/test/raised/index.ts b/src/components/button/test/raised/index.ts index 1dd24fc8b5..6fe29fcc36 100644 --- a/src/components/button/test/raised/index.ts +++ b/src/components/button/test/raised/index.ts @@ -1,21 +1,10 @@ -import {App, IonicApp} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { - constructor(app: IonicApp) { - app.setTitle('Basic Buttons'); +class E2EPage {} - this.testingColors = ['primary', 'secondary', 'danger', 'dark']; - this.testingColorIndex = 0; - this.chgColor(); - } - - chgColor() { - this.btnColor = this.testingColors[this.testingColorIndex]; - console.log('dynamic btnColor', this.btnColor); - this.testingColorIndex = (this.testingColorIndex >= this.testingColors.length - 1 ? 0 : this.testingColorIndex + 1); - } -} +ionicBootstrap(E2EPage); diff --git a/src/components/button/test/round/index.ts b/src/components/button/test/round/index.ts index 5fe8f60eaa..54b21c5cd9 100644 --- a/src/components/button/test/round/index.ts +++ b/src/components/button/test/round/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) class E2EApp {} + +ionicBootstrap(E2EApp); diff --git a/src/components/button/test/sizes/index.ts b/src/components/button/test/sizes/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/button/test/sizes/index.ts +++ b/src/components/button/test/sizes/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/card/test/advanced/index.ts b/src/components/card/test/advanced/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/card/test/advanced/index.ts +++ b/src/components/card/test/advanced/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/card/test/basic/index.ts b/src/components/card/test/basic/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/card/test/basic/index.ts +++ b/src/components/card/test/basic/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/card/test/images/index.ts b/src/components/card/test/images/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/card/test/images/index.ts +++ b/src/components/card/test/images/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/card/test/list/index.ts b/src/components/card/test/list/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/card/test/list/index.ts +++ b/src/components/card/test/list/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/card/test/map/index.ts b/src/components/card/test/map/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/card/test/map/index.ts +++ b/src/components/card/test/map/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/card/test/social/index.ts b/src/components/card/test/social/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/card/test/social/index.ts +++ b/src/components/card/test/social/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/checkbox/test/basic/index.ts b/src/components/checkbox/test/basic/index.ts index f8949bb2c8..34197b7fa8 100644 --- a/src/components/checkbox/test/basic/index.ts +++ b/src/components/checkbox/test/basic/index.ts @@ -1,21 +1,12 @@ -import {App} from '../../../../../src'; -import { - Control, - ControlGroup, - NgForm, - Validators, - NgControl, - ControlValueAccessor, - NgControlName, - NgFormModel, - FormBuilder -} from '@angular/common'; +import {Component} from '@angular/core'; +import {Control, ControlGroup} from '@angular/common'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { +class E2EPage { fruitsForm: ControlGroup; grapeDisabled: boolean; grapeChecked: boolean; @@ -61,3 +52,5 @@ class E2EApp { ev.preventDefault(); } } + +ionicBootstrap(E2EPage); diff --git a/src/components/chip/test/basic/index.ts b/src/components/chip/test/basic/index.ts index a1ab440649..6fe29fcc36 100644 --- a/src/components/chip/test/basic/index.ts +++ b/src/components/chip/test/basic/index.ts @@ -1,10 +1,10 @@ -import {App, IonicApp} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { - constructor(app: IonicApp) { - } -} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/chip/test/delete/index.ts b/src/components/chip/test/delete/index.ts index 9ae7ce3f0b..58ca58c460 100644 --- a/src/components/chip/test/delete/index.ts +++ b/src/components/chip/test/delete/index.ts @@ -1,14 +1,16 @@ -import {App, IonicApp} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { - constructor(app: IonicApp) { - } +class E2EPage { deleteClicked() { console.log('deleteClicked'); } + } + +ionicBootstrap(E2EPage); diff --git a/src/components/chip/test/icon/index.ts b/src/components/chip/test/icon/index.ts index a1ab440649..6fe29fcc36 100644 --- a/src/components/chip/test/icon/index.ts +++ b/src/components/chip/test/icon/index.ts @@ -1,10 +1,10 @@ -import {App, IonicApp} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { - constructor(app: IonicApp) { - } -} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/chip/test/image/index.ts b/src/components/chip/test/image/index.ts index a1ab440649..6fe29fcc36 100644 --- a/src/components/chip/test/image/index.ts +++ b/src/components/chip/test/image/index.ts @@ -1,10 +1,10 @@ -import {App, IonicApp} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { - constructor(app: IonicApp) { - } -} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/datetime/test/basic/index.ts b/src/components/datetime/test/basic/index.ts index 886b0a632d..0b80e5e0ad 100644 --- a/src/components/datetime/test/basic/index.ts +++ b/src/components/datetime/test/basic/index.ts @@ -1,7 +1,8 @@ -import {App, Page} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@Page({ +@Component({ templateUrl: 'main.html' }) class E2EPage { @@ -29,13 +30,11 @@ class E2EPage { } -@App({ +@Component({ template: '' }) class E2EApp { - root; - - constructor() { - this.root = E2EPage; - } + root = E2EPage; } + +ionicBootstrap(E2EApp); diff --git a/src/components/grid/test/alignment/index.ts b/src/components/grid/test/alignment/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/grid/test/alignment/index.ts +++ b/src/components/grid/test/alignment/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/grid/test/basic/index.ts b/src/components/grid/test/basic/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/grid/test/basic/index.ts +++ b/src/components/grid/test/basic/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/grid/test/full/index.ts b/src/components/grid/test/full/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/grid/test/full/index.ts +++ b/src/components/grid/test/full/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/icon/test/basic/index.ts b/src/components/icon/test/basic/index.ts index 847a52bdc6..78f1905263 100644 --- a/src/components/icon/test/basic/index.ts +++ b/src/components/icon/test/basic/index.ts @@ -1,23 +1,24 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; - -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { - constructor() { - this.homeIcon = 'home'; - this.isActive = false; +class E2EPage { + homeIcon = 'home'; + isActive = false; + iconIndex = 0; + icons = [ + 'home', + 'star', + 'ios-alert', + 'ios-alert-outline', + 'md-alert', + 'logo-apple' + ]; + btnIcon; - this.iconIndex = 0; - this.icons = [ - 'home', - 'star', - 'ios-alert', - 'ios-alert-outline', - 'md-alert', - 'logo-apple' - ]; + constructor() { this.btnIcon = this.icons[0]; } @@ -29,3 +30,5 @@ class E2EApp { this.btnIcon = this.icons[this.iconIndex]; } } + +ionicBootstrap(E2EPage); diff --git a/src/components/infinite-scroll/infinite-scroll.ts b/src/components/infinite-scroll/infinite-scroll.ts index 11e5bb4715..cac5ff5312 100644 --- a/src/components/infinite-scroll/infinite-scroll.ts +++ b/src/components/infinite-scroll/infinite-scroll.ts @@ -30,11 +30,11 @@ import {Content} from '../content/content'; * ``` * * ```ts - * @Page({...}) + * @Component({...}) * export class NewsFeedPage { + * items = []; * * constructor() { - * this.items = []; * for (var i = 0; i < 30; i++) { * this.items.push( this.items.length ); * } diff --git a/src/components/infinite-scroll/test/basic/index.ts b/src/components/infinite-scroll/test/basic/index.ts index 0fba97beee..14268d3fdd 100644 --- a/src/components/infinite-scroll/test/basic/index.ts +++ b/src/components/infinite-scroll/test/basic/index.ts @@ -1,8 +1,8 @@ -import {ViewChild} from '@angular/core'; -import {App, Page, InfiniteScroll, NavController} from '../../../../../src'; +import {Component, ViewChild} from '@angular/core'; +import {ionicBootstrap, InfiniteScroll, NavController} from '../../../../../src'; -@Page({ +@Component({ templateUrl: 'main.html' }) class E2EPage1 { @@ -45,26 +45,24 @@ class E2EPage1 { } -@Page({ +@Component({ template: '' }) class E2EPage2 { - constructor(private nav: NavController) {} - } -@App({ +@Component({ template: '' }) class E2EApp { - root; - constructor() { - this.root = E2EPage1; - } + root = E2EPage1; } +ionicBootstrap(E2EApp); + + function getAsyncData(): Promise { // async return mock data return new Promise(resolve => { diff --git a/src/components/infinite-scroll/test/short-list/index.ts b/src/components/infinite-scroll/test/short-list/index.ts index b58c55841e..ef0680eca2 100644 --- a/src/components/infinite-scroll/test/short-list/index.ts +++ b/src/components/infinite-scroll/test/short-list/index.ts @@ -1,10 +1,11 @@ -import {App, InfiniteScroll} from '../../../../../src'; +import {Component, ViewChild} from '@angular/core'; +import {ionicBootstrap, InfiniteScroll} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { +class E2EPage { items = []; constructor() { @@ -32,6 +33,8 @@ class E2EApp { } +ionicBootstrap(E2EPage); + function getAsyncData(): Promise { // async return mock data return new Promise(resolve => { diff --git a/src/components/input/test/clear-input/index.ts b/src/components/input/test/clear-input/index.ts index fb0b644bf0..f0dfc7ba73 100644 --- a/src/components/input/test/clear-input/index.ts +++ b/src/components/input/test/clear-input/index.ts @@ -1,11 +1,12 @@ -import {App} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ - templateUrl: 'main.html' +@Component({ + templateUrl: 'main.html' }) -class E2EApp { - constructor() { - this.myValue = 'value'; - } +class E2EPage { + myValue = 'value'; } + +ionicBootstrap(E2EPage); diff --git a/src/components/input/test/fixed-inline-labels/index.ts b/src/components/input/test/fixed-inline-labels/index.ts index 81265c0c52..bb33ae830b 100644 --- a/src/components/input/test/fixed-inline-labels/index.ts +++ b/src/components/input/test/fixed-inline-labels/index.ts @@ -1,7 +1,8 @@ -import {App, Page} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@Page({ +@Component({ templateUrl: 'main.html' }) class PageOne { @@ -13,9 +14,11 @@ class PageOne { } } -@App({ +@Component({ template: '' }) class E2EApp { root = PageOne; } + +ionicBootstrap(E2EApp); diff --git a/src/components/input/test/floating-labels/index.ts b/src/components/input/test/floating-labels/index.ts index dc4612318b..115efecc15 100644 --- a/src/components/input/test/floating-labels/index.ts +++ b/src/components/input/test/floating-labels/index.ts @@ -1,17 +1,17 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { - constructor() { - this.myParam = ''; - - this.myValues = { - value1: 'Dynamic Input', - value2: 'Dynamic Textarea' - }; - } +class E2EPage { + myParam = ''; + myValues = { + value1: 'Dynamic Input', + value2: 'Dynamic Textarea' + }; } + +ionicBootstrap(E2EPage); diff --git a/src/components/input/test/form-inputs/index.ts b/src/components/input/test/form-inputs/index.ts index 6e884ffd7f..d0711ced2d 100644 --- a/src/components/input/test/form-inputs/index.ts +++ b/src/components/input/test/form-inputs/index.ts @@ -1,8 +1,9 @@ -import {App, Page} from '../../../../../src'; -import {FormBuilder, Validators, Control} from '@angular/common'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; +import {FormBuilder, Validators} from '@angular/common'; -@Page({ +@Component({ templateUrl: 'main.html' }) class E2EPage { @@ -53,9 +54,11 @@ class E2EPage { } -@App({ - template: '' +@Component({ + template: '' }) class E2EApp { - rootPage = E2EPage; + root = E2EPage; } + +ionicBootstrap(E2EApp); diff --git a/src/components/input/test/inline-labels/index.ts b/src/components/input/test/inline-labels/index.ts index b06c84f21f..3d986f1c7b 100644 --- a/src/components/input/test/inline-labels/index.ts +++ b/src/components/input/test/inline-labels/index.ts @@ -1,12 +1,15 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { +class E2EPage { submit(ev) { + console.debug('submit', ev); } - } + +ionicBootstrap(E2EPage); diff --git a/src/components/input/test/input-focus/index.ts b/src/components/input/test/input-focus/index.ts index 1dce546cde..29915d7468 100644 --- a/src/components/input/test/input-focus/index.ts +++ b/src/components/input/test/input-focus/index.ts @@ -1,34 +1,36 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ - templateUrl: 'main.html', - config: { - //scrollAssist: true - } +@Component({ + templateUrl: 'main.html' }) -class E2EApp { +class E2EPage { reload() { window.location.reload(); } } -document.addEventListener('click', function(ev) { +document.addEventListener('click', (ev: any) => { console.log(`CLICK, ${ev.target.localName}.${ev.target.className}, time: ${Date.now()}`); }); -document.addEventListener('touchstart', function(ev) { +document.addEventListener('touchstart', (ev: any) => { console.log(`TOUCH START, ${ev.target.localName}.${ev.target.className}, time: ${Date.now()}`); }); -document.addEventListener('touchend', function(ev) { +document.addEventListener('touchend', (ev: any) => { console.log(`TOUCH END, ${ev.target.localName}.${ev.target.className}, time: ${Date.now()}`); }); -document.addEventListener('focusin', function(ev) {console.log(`CLICK, ${ev.target.localName}.${ev.target.className}, time: ${Date.now()}`); +document.addEventListener('focusin', (ev: any) => { + console.log(`CLICK, ${ev.target.localName}.${ev.target.className}, time: ${Date.now()}`); console.log(`FOCUS IN, ${ev.target.localName}.${ev.target.className}, time: ${Date.now()}`); }); -document.addEventListener('focusout', function(ev) {console.log(`CLICK, ${ev.target.localName}.${ev.target.className}, time: ${Date.now()}`); +document.addEventListener('focusout', (ev: any) => { + console.log(`CLICK, ${ev.target.localName}.${ev.target.className}, time: ${Date.now()}`); console.log(`FOCUS OUT, ${ev.target.localName}.${ev.target.className}, time: ${Date.now()}`); }); + +ionicBootstrap(E2EPage); diff --git a/src/components/input/test/inset-inputs/index.ts b/src/components/input/test/inset-inputs/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/input/test/inset-inputs/index.ts +++ b/src/components/input/test/inset-inputs/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/input/test/placeholder-labels/index.ts b/src/components/input/test/placeholder-labels/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/input/test/placeholder-labels/index.ts +++ b/src/components/input/test/placeholder-labels/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/input/test/stacked-labels/index.ts b/src/components/input/test/stacked-labels/index.ts index 9bbd356df0..6ead56a99e 100644 --- a/src/components/input/test/stacked-labels/index.ts +++ b/src/components/input/test/stacked-labels/index.ts @@ -1,14 +1,18 @@ -import {App, Page} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ - template: '' -}) -class E2EApp { - rootPage = PageOne; -} - -@Page({ +@Component({ templateUrl: 'main.html' }) class PageOne {} + + +@Component({ + template: '' +}) +class E2EApp { + root = PageOne; +} + +ionicBootstrap(E2EApp); diff --git a/src/components/item/test/buttons/index.ts b/src/components/item/test/buttons/index.ts index 8047e50e49..7473e617bd 100644 --- a/src/components/item/test/buttons/index.ts +++ b/src/components/item/test/buttons/index.ts @@ -1,13 +1,14 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { - +class E2EPage { testClick(ev) { console.log('CLICK!', ev.target.tagName, ev.target.textContent.trim()); } - } + +ionicBootstrap(E2EPage); diff --git a/src/components/item/test/dividers/index.ts b/src/components/item/test/dividers/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/item/test/dividers/index.ts +++ b/src/components/item/test/dividers/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/item/test/groups/index.ts b/src/components/item/test/groups/index.ts index dc9c7dbb43..8bdccb9a53 100644 --- a/src/components/item/test/groups/index.ts +++ b/src/components/item/test/groups/index.ts @@ -1,7 +1,8 @@ -import {App, Page, NavController, NavParams} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap, NavController, NavParams} from '../../../../../src'; -@Page({ +@Component({ template: ` {{session.name}} @@ -13,22 +14,21 @@ import {App, Page, NavController, NavParams} from '../../../../../src'; ` }) class SessionDetail { - constructor(params: NavParams, nav: NavController) { + session; + + constructor(params: NavParams, public nav: NavController) { this.session = params.data; - this.nav = nav; } } -@Page({ +@Component({ templateUrl: 'session-list.html' }) class SessionList { + data = data; - constructor(nav: NavController) { - this.nav = nav; - this.data = data; - } + constructor(public nav: NavController) {} addFavorite(timeSlot, session, slidingItem) { console.error("addFavorite", timeSlot, session, slidingItem); @@ -45,15 +45,15 @@ class SessionList { } -@App({ +@Component({ template: '' }) class E2EApp { - constructor() { - this.root = SessionList; - } + root = SessionList; } +ionicBootstrap(E2EApp); + let data = [ { diff --git a/src/components/item/test/icons/index.ts b/src/components/item/test/icons/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/item/test/icons/index.ts +++ b/src/components/item/test/icons/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/item/test/images/index.ts b/src/components/item/test/images/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/item/test/images/index.ts +++ b/src/components/item/test/images/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/item/test/media/index.ts b/src/components/item/test/media/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/item/test/media/index.ts +++ b/src/components/item/test/media/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/item/test/sliding/index.ts b/src/components/item/test/sliding/index.ts index 012db577ca..d9571ea7db 100644 --- a/src/components/item/test/sliding/index.ts +++ b/src/components/item/test/sliding/index.ts @@ -1,8 +1,8 @@ -import {ViewChild} from '@angular/core'; -import {App, Page, IonicApp, Alert, NavController, List, ItemSliding} from '../../../../../src'; +import {Component, ViewChild} from '@angular/core'; +import {ionicBootstrap, App, Alert, NavController, List, ItemSliding} from '../../../../../src'; -@Page({ +@Component({ templateUrl: 'main.html' }) class E2EPage { @@ -11,7 +11,7 @@ class E2EPage { items = []; shouldShow: boolean = true; - constructor(private app: IonicApp, private nav: NavController) { + constructor(private app: App, private nav: NavController) { for (let x = 0; x < 20; x++) { this.items.push(x); } @@ -67,13 +67,11 @@ class E2EPage { } -@App({ +@Component({ template: '' }) class E2EApp { root = E2EPage; - - constructor() { - - } } + +ionicBootstrap(E2EApp); diff --git a/src/components/item/test/text/index.ts b/src/components/item/test/text/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/item/test/text/index.ts +++ b/src/components/item/test/text/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/list/test/headers/index.ts b/src/components/list/test/headers/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/list/test/headers/index.ts +++ b/src/components/list/test/headers/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/list/test/inset/index.ts b/src/components/list/test/inset/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/list/test/inset/index.ts +++ b/src/components/list/test/inset/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/list/test/no-lines/index.ts b/src/components/list/test/no-lines/index.ts index 5fe8f60eaa..6fe29fcc36 100644 --- a/src/components/list/test/no-lines/index.ts +++ b/src/components/list/test/no-lines/index.ts @@ -1,7 +1,10 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp {} +class E2EPage {} + +ionicBootstrap(E2EPage); diff --git a/src/components/list/test/repeat-headers/index.ts b/src/components/list/test/repeat-headers/index.ts index ccaf372c87..5d9eabfb1d 100644 --- a/src/components/list/test/repeat-headers/index.ts +++ b/src/components/list/test/repeat-headers/index.ts @@ -1,15 +1,16 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { - constructor() { - this.people = [ - {"name": "Adam Bradley", "components": [ "all the things"]}, - {"name": "Max Lynch", "components": [ "checkbox", "content", "form"]}, - {"name": "Tim Lancina", "components": [ "tabs"]} - ]; - } +class E2EPage { + people = [ + {"name": "Burt", "components": [ "all the things"]}, + {"name": "Mary", "components": [ "checkbox", "content", "form"]}, + {"name": "Albert", "components": [ "tabs"]} + ]; } + +ionicBootstrap(E2EPage); diff --git a/src/components/list/test/sticky/index.ts b/src/components/list/test/sticky/index.ts index ebe33603d2..bd4f063da7 100644 --- a/src/components/list/test/sticky/index.ts +++ b/src/components/list/test/sticky/index.ts @@ -1,22 +1,25 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { - constructor() { - this.groups = []; +class E2EPage { + groups = []; + constructor() { var letters = "abcdefghijklmnopqrstuvwxyz".split(''); - for(let i = 0; i < letters.length; i++) { - let group = []; - for(let j = 0; j < 10; j++) { + for (var i = 0; i < letters.length; i++) { + var group = []; + + for (var j = 0; j < 10; j++) { group.push({ title: letters[i] + j }); } + this.groups.push({ title: letters[i].toUpperCase(), items: group @@ -24,3 +27,5 @@ class E2EApp { } } } + +ionicBootstrap(E2EPage); diff --git a/src/components/loading/test/basic/index.ts b/src/components/loading/test/basic/index.ts index 745ea23234..2ad116ca65 100644 --- a/src/components/loading/test/basic/index.ts +++ b/src/components/loading/test/basic/index.ts @@ -1,7 +1,8 @@ -import {App, Page, ActionSheet, Loading, NavController, ViewController, Platform} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap, ActionSheet, Loading, NavController, ViewController, Platform} from '../../../../../src'; -@Page({ +@Component({ templateUrl: 'main.html' }) class E2EPage { @@ -185,7 +186,7 @@ class E2EPage { } } -@Page({ +@Component({ template: ` Page 2 @@ -215,7 +216,7 @@ class Page2 { } } -@Page({ +@Component({ template: ` Page 3 @@ -227,11 +228,13 @@ class Page3 { constructor(private nav: NavController, private platform: Platform) {} } -@App({ +@Component({ template: '' }) class E2EApp { root = E2EPage; } +ionicBootstrap(E2EApp); + document.body.innerHTML += '' diff --git a/src/components/loading/test/tabs/index.ts b/src/components/loading/test/tabs/index.ts index 50701393dd..37fe6bf977 100644 --- a/src/components/loading/test/tabs/index.ts +++ b/src/components/loading/test/tabs/index.ts @@ -1,7 +1,8 @@ -import {App, Page, ActionSheet, Loading, NavController, ViewController, Platform} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap, ActionSheet, Loading, NavController, ViewController, Platform} from '../../../../../src'; -@Page({ +@Component({ templateUrl: 'main.html' }) class E2EPage { @@ -35,7 +36,7 @@ class E2EPage { } -@Page({ +@Component({ template: ` Page 2 @@ -47,7 +48,7 @@ class Page2 { constructor(private nav: NavController, private platform: Platform) {} } -@Page({ +@Component({ template: ` @@ -66,9 +67,11 @@ export class TabsPage { } } -@App({ +@Component({ template: '' }) class E2EApp { root = TabsPage; } + +ionicBootstrap(E2EApp); diff --git a/src/components/menu/test/basic/index.ts b/src/components/menu/test/basic/index.ts index 3e5830c310..337b553481 100644 --- a/src/components/menu/test/basic/index.ts +++ b/src/components/menu/test/basic/index.ts @@ -1,8 +1,8 @@ -import {ViewChild} from '@angular/core'; -import {App, IonicApp, MenuController, Page, NavController, Alert, Nav} from '../../../../../src'; +import {Component, ViewChild} from '@angular/core'; +import {ionicBootstrap, MenuController, NavController, Alert, Nav} from '../../../../../src'; -@Page({ +@Component({ templateUrl: 'page1.html' }) class Page1 { @@ -24,11 +24,11 @@ class Page1 { } -@Page({templateUrl: 'page3.html'}) +@Component({templateUrl: 'page3.html'}) class Page3 {} -@Page({templateUrl: 'page2.html'}) +@Component({templateUrl: 'page2.html'}) class Page2 { constructor(private nav: NavController) {} @@ -38,16 +38,16 @@ class Page2 { } -@App({ +@Component({ templateUrl: 'main.html' }) -class E2EApp { +class E2EPage { rootPage; changeDetectionCount: number = 0; pages: Array<{title: string, component: any}>; @ViewChild(Nav) nav: Nav; - constructor(private app: IonicApp, private menu: MenuController) { + constructor(private menu: MenuController) { this.rootPage = Page1; this.pages = [ @@ -76,3 +76,5 @@ class E2EApp { return true; } } + +ionicBootstrap(E2EPage); diff --git a/src/components/menu/test/basic/main.html b/src/components/menu/test/basic/main.html index d607c74b63..0124d60348 100644 --- a/src/components/menu/test/basic/main.html +++ b/src/components/menu/test/basic/main.html @@ -138,6 +138,6 @@ - +
\ No newline at end of file diff --git a/src/components/menu/test/disable-swipe/index.ts b/src/components/menu/test/disable-swipe/index.ts index ee4c560d8e..1133a7c203 100644 --- a/src/components/menu/test/disable-swipe/index.ts +++ b/src/components/menu/test/disable-swipe/index.ts @@ -1,15 +1,15 @@ -import {App, Page, NavController, MenuController} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap, NavController, MenuController} from '../../../../../src'; -@Page({ + +@Component({ templateUrl: 'page1.html' }) class Page1 { leftMenuSwipeEnabled: boolean = true; rightMenuSwipeEnabled: boolean = false; - constructor(menu: MenuController) { - this.menu = menu; - } + constructor(public menu: MenuController) {} toggleLeftMenuSwipeable() { this.leftMenuSwipeEnabled = !this.leftMenuSwipeEnabled; @@ -25,11 +25,9 @@ class Page1 { } -@App({ +@Component({ templateUrl: 'main.html' }) class E2EApp { - constructor() { - this.rootView = Page1; - } + root = Page1; } diff --git a/src/components/menu/test/disable-swipe/main.html b/src/components/menu/test/disable-swipe/main.html index 9f8a62db37..5d7a9d14d2 100644 --- a/src/components/menu/test/disable-swipe/main.html +++ b/src/components/menu/test/disable-swipe/main.html @@ -33,4 +33,4 @@ - + diff --git a/src/components/menu/test/enable-disable/index.ts b/src/components/menu/test/enable-disable/index.ts index 4b1b634a76..6d25c71f66 100644 --- a/src/components/menu/test/enable-disable/index.ts +++ b/src/components/menu/test/enable-disable/index.ts @@ -1,21 +1,21 @@ -import {ViewChild} from '@angular/core'; -import {App, Page, IonicApp, MenuController, Nav} from '../../../../../src'; +import {Component, ViewChild} from '@angular/core'; +import {ionicBootstrap, App, MenuController, Nav} from '../../../../../src'; -@Page({ +@Component({ templateUrl: 'page1.html' }) class Page1 { } -@Page({ +@Component({ templateUrl: 'page2.html' }) class Page2 { } -@App({ +@Component({ templateUrl: 'main.html' }) class E2EApp { @@ -26,7 +26,7 @@ class E2EApp { page2 = Page2; rootPage = Page1; - constructor(private app: IonicApp, private menu: MenuController) { + constructor(private app: App, private menu: MenuController) { this.menu1Active(); } @@ -51,3 +51,5 @@ class E2EApp { this.menu.enable(true, 'menu3'); } } + +ionicBootstrap(E2EApp); diff --git a/src/components/menu/test/multiple/index.ts b/src/components/menu/test/multiple/index.ts index 835faab615..669556fea5 100644 --- a/src/components/menu/test/multiple/index.ts +++ b/src/components/menu/test/multiple/index.ts @@ -1,7 +1,8 @@ -import {App, Page, MenuController} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap, MenuController} from '../../../../../src'; -@Page({ +@Component({ templateUrl: 'page1.html' }) class Page1 { @@ -23,13 +24,11 @@ class Page1 { } -@App({ +@Component({ templateUrl: 'main.html' }) class E2EApp { - rootPage; - - constructor() { - this.rootPage = Page1; - } + rootPage = Page1; } + +ionicBootstrap(E2EApp); diff --git a/src/components/menu/test/overlay/index.ts b/src/components/menu/test/overlay/index.ts index 8307bd598f..16c982aaf5 100644 --- a/src/components/menu/test/overlay/index.ts +++ b/src/components/menu/test/overlay/index.ts @@ -1,12 +1,12 @@ -import {ViewChild} from '@angular/core'; -import {App, Page, Nav} from '../../../../../src'; +import {Component, ViewChild} from '@angular/core'; +import {ionicBootstrap, Nav} from '../../../../../src'; -@Page({templateUrl: 'page1.html'}) +@Component({templateUrl: 'page1.html'}) class Page1 {} -@App({ +@Component({ templateUrl: 'main.html' }) class E2EApp { @@ -14,10 +14,6 @@ class E2EApp { rootView = Page1; - constructor() { - - } - openPage(menu, page) { // close the menu when clicking a link from the menu menu.close(); @@ -27,3 +23,5 @@ class E2EApp { this.nav.setRoot(page.component); } } + +ionicBootstrap(E2EApp); diff --git a/src/components/menu/test/push/index.ts b/src/components/menu/test/push/index.ts index 8307bd598f..16c982aaf5 100644 --- a/src/components/menu/test/push/index.ts +++ b/src/components/menu/test/push/index.ts @@ -1,12 +1,12 @@ -import {ViewChild} from '@angular/core'; -import {App, Page, Nav} from '../../../../../src'; +import {Component, ViewChild} from '@angular/core'; +import {ionicBootstrap, Nav} from '../../../../../src'; -@Page({templateUrl: 'page1.html'}) +@Component({templateUrl: 'page1.html'}) class Page1 {} -@App({ +@Component({ templateUrl: 'main.html' }) class E2EApp { @@ -14,10 +14,6 @@ class E2EApp { rootView = Page1; - constructor() { - - } - openPage(menu, page) { // close the menu when clicking a link from the menu menu.close(); @@ -27,3 +23,5 @@ class E2EApp { this.nav.setRoot(page.component); } } + +ionicBootstrap(E2EApp); diff --git a/src/components/menu/test/reveal/index.ts b/src/components/menu/test/reveal/index.ts index 8307bd598f..16c982aaf5 100644 --- a/src/components/menu/test/reveal/index.ts +++ b/src/components/menu/test/reveal/index.ts @@ -1,12 +1,12 @@ -import {ViewChild} from '@angular/core'; -import {App, Page, Nav} from '../../../../../src'; +import {Component, ViewChild} from '@angular/core'; +import {ionicBootstrap, Nav} from '../../../../../src'; -@Page({templateUrl: 'page1.html'}) +@Component({templateUrl: 'page1.html'}) class Page1 {} -@App({ +@Component({ templateUrl: 'main.html' }) class E2EApp { @@ -14,10 +14,6 @@ class E2EApp { rootView = Page1; - constructor() { - - } - openPage(menu, page) { // close the menu when clicking a link from the menu menu.close(); @@ -27,3 +23,5 @@ class E2EApp { this.nav.setRoot(page.component); } } + +ionicBootstrap(E2EApp); diff --git a/src/components/modal/test/basic/index.ts b/src/components/modal/test/basic/index.ts index 1c7ee9e2e8..ca339f5e3d 100644 --- a/src/components/modal/test/basic/index.ts +++ b/src/components/modal/test/basic/index.ts @@ -1,7 +1,8 @@ -import {App, Page, Config, Platform} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap, Config, Platform} from '../../../../../src'; import {Modal, ActionSheet, NavController, NavParams, Transition, TransitionOptions, ViewController} from '../../../../../src'; -@Page({ +@Component({ templateUrl: 'main.html' }) class E2EPage { @@ -76,7 +77,7 @@ class E2EPage { } } -@Page({ +@Component({ template: ` Page One @@ -95,7 +96,7 @@ class NavigableModal{ } } -@Page({ +@Component({ template: ` Page Two @@ -116,7 +117,7 @@ class NavigableModal2{ -@Page({ +@Component({ template: ` Data in/out @@ -172,7 +173,7 @@ class ModalPassData { } -@Page({ +@Component({ template: ` Toolbar 1 @@ -203,7 +204,7 @@ class ToolbarModal { } -@Page({ +@Component({ template: ` @@ -255,7 +256,7 @@ class ModalWithInputs { } -@Page({ +@Component({ template: '' }) class ContactUs { @@ -289,7 +290,7 @@ class ContactUs { } -@Page({ +@Component({ template: ` First Page Header @@ -397,7 +398,7 @@ class ModalFirstPage { } -@Page({ +@Component({ template: ` Second Page Header @@ -430,17 +431,15 @@ class ModalSecondPage { } -@App({ +@Component({ template: '' }) class E2EApp { - root; - - constructor() { - this.root = E2EPage; - } + root = E2EPage; } +ionicBootstrap(E2EApp); + class FadeIn extends Transition { constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) { diff --git a/src/components/nav/test/basic/index.ts b/src/components/nav/test/basic/index.ts index 41848ade35..478fbd9e78 100644 --- a/src/components/nav/test/basic/index.ts +++ b/src/components/nav/test/basic/index.ts @@ -1,6 +1,6 @@ import {Component, Type, ViewChild} from '@angular/core'; import {App, NavController, Alert, Content} from '../../../../../src'; -import {Page, Config, IonicApp} from '../../../../../src'; +import {ionicBootstrap, Config} from '../../../../../src'; import {NavParams, ViewController} from '../../../../../src';; @@ -11,7 +11,7 @@ import {NavParams, ViewController} from '../../../../../src';; class MyCmpTest{} -@Page({ +@Component({ template: ` {{title}} @@ -129,7 +129,7 @@ class FirstPage { } -@Page({ +@Component({ template: `

Full page

@@ -199,7 +199,7 @@ class FullPage { } -@Page({ +@Component({ template: ` Primary Color Page Header @@ -265,7 +265,7 @@ class PrimaryHeaderPage { } -@Page({ +@Component({ template: ` Another Page Header @@ -367,22 +367,19 @@ class AnotherPage { } -@App({ - pages: [FirstPage, FullPage, PrimaryHeaderPage, AnotherPage], +@Component({ template: ``, host: { '[class.is-change-detecting]': 'isChangeDetecting' } }) class E2EApp { - root; - - constructor() { - this.root = FirstPage; - } + root = FirstPage; get isChangeDetecting() { console.log('isChangeDetecting'); return true; } } + +ionicBootstrap(E2EApp); diff --git a/src/components/nav/test/init-async/index.ts b/src/components/nav/test/init-async/index.ts index 7880e493cb..f9d6d5beb9 100644 --- a/src/components/nav/test/init-async/index.ts +++ b/src/components/nav/test/init-async/index.ts @@ -1,7 +1,8 @@ -import {App, Page} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@Page({ +@Component({ template: ` Page be loaded! @@ -11,7 +12,7 @@ import {App, Page} from '../../../../../src'; class AsyncPage {} -@App({ +@Component({ template: `` }) class E2EApp { @@ -24,3 +25,5 @@ class E2EApp { } } + +ionicBootstrap(E2EApp); diff --git a/src/components/nav/test/insert-views/index.ts b/src/components/nav/test/insert-views/index.ts index 0205fc08a9..17c80cce7b 100644 --- a/src/components/nav/test/insert-views/index.ts +++ b/src/components/nav/test/insert-views/index.ts @@ -1,8 +1,8 @@ -import {App, Page, NavController} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap, NavController} from '../../../../../src'; - -@Page({ +@Component({ template: ` Root @@ -13,16 +13,15 @@ import {App, Page, NavController} from '../../../../../src'; `, }) class FirstPage { - constructor(nav: NavController) { - this.nav = nav; - } + constructor(public nav: NavController) {} + pushPage() { this.nav.push(SecondPage) } } -@Page({ +@Component({ template: ` Root @@ -35,16 +34,15 @@ class FirstPage { ` }) class SecondPage { - constructor(nav: NavController) { - this.nav = nav; - } + constructor(public nav: NavController) {} + insertPage() { this.nav.insert(1, InsertPage) } } -@Page({ +@Component({ template: ` Inserted Paged @@ -54,17 +52,14 @@ class SecondPage { ` }) -class InsertPage { - constructor() { } -} +class InsertPage {} - -@App({ +@Component({ template: `` }) class E2EApp { - constructor() { - this.root = FirstPage; - } + root = FirstPage; } + +ionicBootstrap(E2EApp); diff --git a/src/components/nav/test/memory/index.ts b/src/components/nav/test/memory/index.ts index e33fe473c1..4422d98392 100644 --- a/src/components/nav/test/memory/index.ts +++ b/src/components/nav/test/memory/index.ts @@ -1,11 +1,12 @@ -import {App, Page, NavController} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap, NavController} from '../../../../../src'; let delay = 100; let animate = false; let count = 0; -@Page({ +@Component({ template: `

Page 1

@@ -39,7 +40,7 @@ class Page1 { } } -@Page({ +@Component({ template: `

Page 2

@@ -74,13 +75,11 @@ class Page2 { } -@App({ +@Component({ template: `` }) class E2EApp { - root; - - constructor() { - this.root = Page1; - } + root = Page1; } + +ionicBootstrap(E2EApp); diff --git a/src/components/nav/test/nested/index.ts b/src/components/nav/test/nested/index.ts index 57d229b3ed..3186836953 100644 --- a/src/components/nav/test/nested/index.ts +++ b/src/components/nav/test/nested/index.ts @@ -1,9 +1,9 @@ -import {ViewChild} from '@angular/core'; -import {App, NavParams, NavController, ViewController, MenuController} from '../../../../../src'; -import {Page, Config, Nav} from '../../../../../src'; +import {Component, ViewChild} from '@angular/core'; +import {ionicBootstrap, NavParams, NavController, ViewController, MenuController} from '../../../../../src'; +import {Config, Nav} from '../../../../../src'; -@Page({ +@Component({ template: ` Login @@ -22,7 +22,7 @@ export class Login { } -@Page({ +@Component({ template: ` @@ -73,7 +73,7 @@ export class Account { } -@Page({ +@Component({ template: ` - - - - - - - - - - Menu 2 - - - - - - - - - - - diff --git a/demos/id/page1.html b/demos/id/page1.html deleted file mode 100644 index f0afa3c520..0000000000 --- a/demos/id/page1.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - Id - - - - - - -

Active Menu: {{ (activeMenu == 'menu1') ? 'Menu 1' : 'Menu 2' }}

- -

This page has two menus with different id's, but only one is active at a time.

- - - - - - - - diff --git a/demos/infinite-scroll/index.ts b/demos/infinite-scroll/index.ts index 5793d6f73e..d553b26572 100644 --- a/demos/infinite-scroll/index.ts +++ b/demos/infinite-scroll/index.ts @@ -1,5 +1,6 @@ -import {App, InfiniteScroll} from 'ionic-angular'; -import {Injectable} from '@angular/core'; +import {Component, Injectable} from '@angular/core'; +import {ionicBootstrap, InfiniteScroll} from 'ionic-angular'; + /** * Mock Data Access Object @@ -62,7 +63,7 @@ export class MockProvider { } -@App({ +@Component({ templateUrl: 'main.html', providers: [MockProvider] }) @@ -88,3 +89,5 @@ class ApiDemoApp { } } + +ionicBootstrap(ApiDemoApp); diff --git a/demos/input/index.ts b/demos/input/index.ts index 64f6d23af8..c40e1274f7 100644 --- a/demos/input/index.ts +++ b/demos/input/index.ts @@ -1,6 +1,10 @@ -import {App} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from 'ionic-angular'; -@App({ + +@Component({ templateUrl: 'main.html' }) class ApiDemoApp {} + +ionicBootstrap(ApiDemoApp); diff --git a/demos/item-sliding/index.ts b/demos/item-sliding/index.ts index 64f6d23af8..c40e1274f7 100644 --- a/demos/item-sliding/index.ts +++ b/demos/item-sliding/index.ts @@ -1,6 +1,10 @@ -import {App} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from 'ionic-angular'; -@App({ + +@Component({ templateUrl: 'main.html' }) class ApiDemoApp {} + +ionicBootstrap(ApiDemoApp); diff --git a/demos/item/index.ts b/demos/item/index.ts index 52107b493a..31c6dce506 100644 --- a/demos/item/index.ts +++ b/demos/item/index.ts @@ -1,11 +1,12 @@ -import {App} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from 'ionic-angular'; // Uses the list's demo but passes the demo var to change the title -@App({ +@Component({ templateUrl: '../list/main.html' }) class ApiDemoApp { - constructor() { - this.demo = "Item"; - } + demo = "Item"; } + +ionicBootstrap(ApiDemoApp); diff --git a/demos/label/index.ts b/demos/label/index.ts index 64f6d23af8..c40e1274f7 100644 --- a/demos/label/index.ts +++ b/demos/label/index.ts @@ -1,6 +1,10 @@ -import {App} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from 'ionic-angular'; -@App({ + +@Component({ templateUrl: 'main.html' }) class ApiDemoApp {} + +ionicBootstrap(ApiDemoApp); diff --git a/demos/list/index.ts b/demos/list/index.ts index abf0467f77..9355d9a5d3 100644 --- a/demos/list/index.ts +++ b/demos/list/index.ts @@ -1,10 +1,12 @@ -import {App} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from 'ionic-angular'; -@App({ + +@Component({ templateUrl: 'main.html' }) class ApiDemoApp { - constructor() { - this.demo = "List"; - } + demo = "List"; } + +ionicBootstrap(ApiDemoApp); diff --git a/demos/loading/index.ts b/demos/loading/index.ts index 98d2599435..ad71e8d5c4 100644 --- a/demos/loading/index.ts +++ b/demos/loading/index.ts @@ -1,10 +1,11 @@ -import {App, Page, ActionSheet, Loading, NavController, ViewController, Platform} from 'ionic-angular'; +import {Component, ViewEncapsulation} from '@angular/core'; +import {ionicBootstrap, Loading, NavController, Platform} from 'ionic-angular'; -@Page({ +@Component({ templateUrl: 'main.html' }) -class E2EPage { +class Page1 { constructor(private nav: NavController, private platform: Platform) {} presentLoadingIos() { @@ -107,7 +108,7 @@ class E2EPage { } } -@Page({ +@Component({ template: ` Page 2 @@ -119,11 +120,13 @@ class Page2 { constructor(private nav: NavController, private platform: Platform) {} } -@App({ - template: '' +@Component({ + template: '', + styleUrls: ['styles.css'], + encapsulation: ViewEncapsulation.None }) -class E2EApp { - root = E2EPage; +class ApiDemoApp { + root = Page1; } -document.body.innerHTML += '' +ionicBootstrap(ApiDemoApp); diff --git a/demos/local-storage/index.ts b/demos/local-storage/index.ts index f8a2ee4ba8..13396f33ee 100644 --- a/demos/local-storage/index.ts +++ b/demos/local-storage/index.ts @@ -1,4 +1,5 @@ -import {App, Page, IonicApp, Config, Platform} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap, IonicApp, Config, Platform} from 'ionic-angular'; import {Storage, LocalStorage} from 'ionic-angular'; import {Pipe, PipeTransform, Injectable} from '@angular/core' @@ -6,6 +7,10 @@ import {Pipe, PipeTransform, Injectable} from '@angular/core' @Pipe({name: 'cleanLocalData'}) @Injectable() class CleanLocalDataPipe implements PipeTransform { + validKeys: string[]; + output: any; + data: any; + transform(obj:any) : any { this.validKeys = ['username', 'name', 'email', 'address']; this.output = {}; @@ -19,21 +24,20 @@ class CleanLocalDataPipe implements PipeTransform { } } -@App({ - template: '', - pipes: [CleanLocalDataPipe] -}) -class ApiDemoApp { - constructor() { - this.root = MainPage; - } -} -@Page({ +@Component({ templateUrl: 'main.html', pipes: [CleanLocalDataPipe] }) class MainPage { + local: Storage; + localStorageDemo: string; + myItem: any; + keys = ['username', 'name', 'email', 'address']; + values = ['admin', 'Administrator', 'admin@administrator.com', '123 Admin St']; + addedKeys = []; + delKey: any; + constructor() { this.local = new Storage(LocalStorage); this.localStorageDemo = '{}'; @@ -43,10 +47,6 @@ class MainPage { key: 'username', value: 'admin' }; - - this.keys = ['username', 'name', 'email', 'address']; - this.values = ['admin', 'Administrator', 'admin@administrator.com', '123 Admin St']; - this.addedKeys = []; } set() { @@ -77,3 +77,14 @@ class MainPage { } } } + + +@Component({ + template: '', + pipes: [CleanLocalDataPipe] +}) +class ApiDemoApp { + root = MainPage; +} + +ionicBootstrap(ApiDemoApp); diff --git a/demos/menu/index.ts b/demos/menu/index.ts index ca1bb71a40..39c3b553a0 100644 --- a/demos/menu/index.ts +++ b/demos/menu/index.ts @@ -1,9 +1,12 @@ -import {App, Page, MenuController} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap, MenuController} from 'ionic-angular'; -@Page({templateUrl: 'page1.html'}) + +@Component({templateUrl: 'page1.html'}) class Page1 { - constructor(menu: MenuController) { - this.menu = menu; + activeMenu: string; + + constructor(public menu: MenuController) { this.menu1Active(); } menu1Active() { @@ -18,11 +21,11 @@ class Page1 { } } -@App({ +@Component({ templateUrl: 'main.html' }) class ApiDemoApp { - constructor() { - this.rootView = Page1; - } + root = Page1; } + +ionicBootstrap(ApiDemoApp); diff --git a/demos/menu/main.html b/demos/menu/main.html index c14c6228da..fc2abf25b7 100644 --- a/demos/menu/main.html +++ b/demos/menu/main.html @@ -31,4 +31,4 @@ - + diff --git a/demos/modal/app.html b/demos/modal/app.html index 776be9a94a..6734cd75a0 100644 --- a/demos/modal/app.html +++ b/demos/modal/app.html @@ -1 +1 @@ - + diff --git a/demos/modal/index.ts b/demos/modal/index.ts index a620ca2a10..c5039e9def 100644 --- a/demos/modal/index.ts +++ b/demos/modal/index.ts @@ -1,25 +1,15 @@ -import {App, Page, IonicApp, Config, Platform, ViewController} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap, IonicApp, Config, Platform, ViewController} from 'ionic-angular'; import {Modal, NavController, NavParams, Animation} from 'ionic-angular'; -@App({ - templateUrl: 'app.html' -}) -class ApiDemoApp { - - constructor() { - this.rootPage = ModalFirstPage; - } -} - -@Page({ +@Component({ templateUrl: 'main.html' }) export class ModalFirstPage { - constructor(nav: NavController) { - this.nav = nav; - this.myParam = ''; - } + myParam = ''; + + constructor(public nav: NavController) {} openBasicModal() { let myModal = Modal.create(ModalContentPage); @@ -37,26 +27,36 @@ export class ModalFirstPage { } } -@Page({ - templateUrl: "modal-content.html" +@Component({ + templateUrl: "modal-content.html" }) export class ModalContentPage { - constructor( - nav: NavController, - params: NavParams, - viewCtrl: ViewController - ) { - this.nav = nav; - this.viewCtrl = viewCtrl; - this.myParam = params.get('myParam'); - } + myParam: string; - dismiss() { - this.viewCtrl.dismiss(); - } + constructor( + public nav: NavController, + public viewCtrl: ViewController, + params: NavParams + ) { + this.myParam = params.get('myParam'); + } + + dismiss() { + this.viewCtrl.dismiss(); + } } +@Component({ + templateUrl: 'app.html' +}) +class ApiDemoApp { + root = ModalFirstPage; +} + +ionicBootstrap(ApiDemoApp); + + class FadeIn extends Animation { constructor(enteringView, leavingView) { super(enteringView.pageRef()); diff --git a/demos/nav-params/app.html b/demos/nav-params/app.html index 776be9a94a..6734cd75a0 100644 --- a/demos/nav-params/app.html +++ b/demos/nav-params/app.html @@ -1 +1 @@ - + diff --git a/demos/nav-params/index.ts b/demos/nav-params/index.ts index 6b28a40d44..32a61d1de9 100644 --- a/demos/nav-params/index.ts +++ b/demos/nav-params/index.ts @@ -1,41 +1,38 @@ -import {App, Page, IonicApp, Config, Platform} from 'ionic-angular'; -import {NavController, NavParams} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap, NavController, NavParams} from 'ionic-angular'; -@App({ - templateUrl: 'app.html' -}) -class ApiDemoApp { - - constructor() { - this.rootPage = InitialPage; - } -} - -@Page({ +@Component({ templateUrl: 'main.html' }) export class InitialPage { - constructor(nav: NavController) { - this.nav = nav; - this.myParam = ''; - } + myParam = ''; + + constructor(public nav: NavController) {} pushParams() { this.nav.push(Page2, { 'myParam': this.myParam }); } } -@Page({ - templateUrl: "page-2.html" + +@Component({ + templateUrl: "page-2.html" }) export class Page2 { - constructor( - nav: NavController, - params: NavParams - ) { - this.nav = nav; - this.myParam = params.get('myParam'); - } + myParam: string; + + constructor(public nav: NavController, params: NavParams) { + this.myParam = params.get('myParam'); + } } + +@Component({ + templateUrl: 'app.html' +}) +class ApiDemoApp { + root = InitialPage; +} + +ionicBootstrap(ApiDemoApp); diff --git a/demos/navbar/index.ts b/demos/navbar/index.ts index 507a8b1e7d..b6e18fcd5c 100644 --- a/demos/navbar/index.ts +++ b/demos/navbar/index.ts @@ -1,14 +1,15 @@ -import {App} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from 'ionic-angular'; + // Use the toolbar demo but pass in the demo name to change the title -@App({ +@Component({ templateUrl: '../toolbar/main.html' }) class ApiDemoApp { - constructor() { - this.demo = "Navbar"; - - this.favorites = "recent"; - this.apps = "free"; - } + demo = "Navbar"; + favorites = "recent"; + apps = "free"; } + +ionicBootstrap(ApiDemoApp); diff --git a/demos/navigation/app.html b/demos/navigation/app.html index 776be9a94a..6734cd75a0 100644 --- a/demos/navigation/app.html +++ b/demos/navigation/app.html @@ -1 +1 @@ - + diff --git a/demos/navigation/index.ts b/demos/navigation/index.ts index b002c730fb..205e730694 100644 --- a/demos/navigation/index.ts +++ b/demos/navigation/index.ts @@ -1,52 +1,47 @@ -import {App, Page, IonicApp, Config, Platform} from 'ionic-angular'; -import {NavController, NavParams} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap, Config, Platform, NavController, NavParams} from 'ionic-angular'; var PAGE_NUM = 2; -@App({ - templateUrl: 'app.html' -}) -class ApiDemoApp { - constructor() { - this.rootPage = InitialPage; - } -} - -@Page({ +@Component({ templateUrl: 'main.html' }) export class InitialPage { - constructor(nav: NavController) { - this.nav = nav; - } + constructor(public nav: NavController) {} push() { this.nav.push(Page2); } } -@Page({ - templateUrl: "page-2.html" +@Component({ + templateUrl: "page-2.html" }) export class Page2 { - constructor( - nav: NavController, - ) { - this.nav = nav; - this.pageNum = PAGE_NUM; - } + pageNum = PAGE_NUM; - push() { - PAGE_NUM++; - this.nav.push(Page2); - } + constructor(private nav: NavController) {} - pop() { - if (PAGE_NUM > 2) { - PAGE_NUM--; - } - this.nav.pop(); + push() { + PAGE_NUM++; + this.nav.push(Page2); + } + + pop() { + if (PAGE_NUM > 2) { + PAGE_NUM--; } + this.nav.pop(); + } } + +@Component({ + templateUrl: 'app.html' +}) +class ApiDemoApp { + root = InitialPage; +} + +ionicBootstrap(ApiDemoApp); diff --git a/demos/platform/index.ts b/demos/platform/index.ts index f44bff5517..dd23c2fc8c 100644 --- a/demos/platform/index.ts +++ b/demos/platform/index.ts @@ -1,6 +1,8 @@ -import {App, Platform} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap, Platform} from 'ionic-angular'; -@App({ + +@Component({ templateUrl: 'main.html' }) class ApiDemoApp { @@ -14,3 +16,5 @@ class ApiDemoApp { this.isWindows = platform.is('windows'); } } + +ionicBootstrap(ApiDemoApp); diff --git a/demos/popover/index.ts b/demos/popover/index.ts index 7175dd77cc..5772fea420 100644 --- a/demos/popover/index.ts +++ b/demos/popover/index.ts @@ -1,8 +1,8 @@ -import {ViewChild, ElementRef} from '@angular/core'; -import {App, Page, Popover, NavController, Content, NavParams} from 'ionic-angular'; +import {Component, ViewChild, ElementRef, ViewEncapsulation} from '@angular/core'; +import {ionicBootstrap, Popover, NavController, Content, NavParams} from 'ionic-angular'; -@Page({ +@Component({ template: ` @@ -133,7 +133,7 @@ class PopoverRadioPage { } -@Page({ +@Component({ templateUrl: 'main.html' }) class PopoverPage { @@ -158,11 +158,13 @@ class PopoverPage { } -@App({ - template: '' +@Component({ + template: '', + styleUrls: ['style.css'], + encapsulation: ViewEncapsulation.None }) class ApiDemoApp { root = PopoverPage; } -document.body.innerHTML += '' +ionicBootstrap(ApiDemoApp); diff --git a/demos/radio/index.ts b/demos/radio/index.ts index 149e49838a..efa9e76ee2 100644 --- a/demos/radio/index.ts +++ b/demos/radio/index.ts @@ -1,9 +1,12 @@ -import {App} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from 'ionic-angular'; -@App({ + +@Component({ templateUrl: 'main.html' }) class ApiDemoApp { isDisabled = true; - } + +ionicBootstrap(ApiDemoApp); diff --git a/demos/refresher/index.ts b/demos/refresher/index.ts index 2b0bba2a41..d71351f6ad 100644 --- a/demos/refresher/index.ts +++ b/demos/refresher/index.ts @@ -1,5 +1,6 @@ -import {App, Page, Refresher} from 'ionic-angular'; -import {Injectable} from '@angular/core'; +import {Component, Injectable} from '@angular/core'; +import {ionicBootstrap, Refresher} from 'ionic-angular'; + /** * Mock Data Access Object @@ -62,7 +63,7 @@ export class MockProvider { } -@App({ +@Component({ templateUrl: 'main.html', providers: [MockProvider] }) @@ -89,3 +90,5 @@ class ApiDemoApp { console.log('DOPULLING', refresher.progress); } } + +ionicBootstrap(ApiDemoApp); diff --git a/demos/scroll/index.ts b/demos/scroll/index.ts index 64f6d23af8..c40e1274f7 100644 --- a/demos/scroll/index.ts +++ b/demos/scroll/index.ts @@ -1,6 +1,10 @@ -import {App} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from 'ionic-angular'; -@App({ + +@Component({ templateUrl: 'main.html' }) class ApiDemoApp {} + +ionicBootstrap(ApiDemoApp); diff --git a/demos/searchbar/index.ts b/demos/searchbar/index.ts index 64f6d23af8..c40e1274f7 100644 --- a/demos/searchbar/index.ts +++ b/demos/searchbar/index.ts @@ -1,6 +1,10 @@ -import {App} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from 'ionic-angular'; -@App({ + +@Component({ templateUrl: 'main.html' }) class ApiDemoApp {} + +ionicBootstrap(ApiDemoApp); diff --git a/demos/segment/index.ts b/demos/segment/index.ts index 62f2da5861..4bddc67148 100644 --- a/demos/segment/index.ts +++ b/demos/segment/index.ts @@ -1,21 +1,23 @@ -import {App} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from 'ionic-angular'; -@App({ + +@Component({ templateUrl: 'main.html' }) class ApiDemoApp { - constructor() { - this.appType = "paid"; - this.safari = "links"; - this.news = "local"; - this.favorites = "recent"; + appType = "paid"; + safari = "links"; + news = "local"; + favorites = "recent"; - this.purchased = "all"; - this.mapStyle = "sat"; - this.teslaModels = "X"; + purchased = "all"; + mapStyle = "sat"; + teslaModels = "X"; - this.pet = "puppies"; - this.calendar = "day"; - this.proxy = "auto"; - } + pet = "puppies"; + calendar = "day"; + proxy = "auto"; } + +ionicBootstrap(ApiDemoApp); diff --git a/demos/select/index.ts b/demos/select/index.ts index 32cb312236..c6a4b2f3d2 100644 --- a/demos/select/index.ts +++ b/demos/select/index.ts @@ -1,6 +1,8 @@ -import {App, Page} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from 'ionic-angular'; -@Page({ + +@Component({ templateUrl: 'main.html' }) class MainPage { @@ -44,13 +46,11 @@ class MainPage { } -@App({ +@Component({ template: '' }) class ApiDemoApp { - root; - - constructor() { - this.root = MainPage; - } + root = MainPage; } + +ionicBootstrap(ApiDemoApp); diff --git a/demos/show-when/index.ts b/demos/show-when/index.ts index 64f6d23af8..c40e1274f7 100644 --- a/demos/show-when/index.ts +++ b/demos/show-when/index.ts @@ -1,6 +1,10 @@ -import {App} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from 'ionic-angular'; -@App({ + +@Component({ templateUrl: 'main.html' }) class ApiDemoApp {} + +ionicBootstrap(ApiDemoApp); diff --git a/demos/slides/index.ts b/demos/slides/index.ts index a5c812bca3..c40e1274f7 100644 --- a/demos/slides/index.ts +++ b/demos/slides/index.ts @@ -1,6 +1,10 @@ -import {App} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from 'ionic-angular'; -@App({ - templateUrl: 'main.html', + +@Component({ + templateUrl: 'main.html' }) class ApiDemoApp {} + +ionicBootstrap(ApiDemoApp); diff --git a/demos/tabs/index.ts b/demos/tabs/index.ts index e8ce6a053c..6ce01fdd77 100644 --- a/demos/tabs/index.ts +++ b/demos/tabs/index.ts @@ -1,8 +1,12 @@ -import {App} from 'ionic-angular'; +import {Component, ViewEncapsulation} from '@angular/core'; +import {ionicBootstrap} from 'ionic-angular'; -@App({ + +@Component({ templateUrl: 'main.html', + styleUrls: ['style.css'], + encapsulation: ViewEncapsulation.None }) class ApiDemoApp {} -document.body.innerHTML += '' +ionicBootstrap(ApiDemoApp); diff --git a/demos/textarea/index.ts b/demos/textarea/index.ts index 64f6d23af8..c40e1274f7 100644 --- a/demos/textarea/index.ts +++ b/demos/textarea/index.ts @@ -1,6 +1,10 @@ -import {App} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from 'ionic-angular'; -@App({ + +@Component({ templateUrl: 'main.html' }) class ApiDemoApp {} + +ionicBootstrap(ApiDemoApp); diff --git a/demos/title/index.ts b/demos/title/index.ts index 701445f12b..eed2bcd504 100644 --- a/demos/title/index.ts +++ b/demos/title/index.ts @@ -1,15 +1,16 @@ -import {App} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from 'ionic-angular'; + // Use the toolbar demo but pass in the demo name to change the title // this will also hide some of the toolbars that don't use `ion-title` -@App({ +@Component({ templateUrl: '../toolbar/main.html' }) class ApiDemoApp { - constructor() { - this.demo = "Title"; - - this.favorites = "recent"; - this.apps = "free"; - } + demo = "Title"; + favorites = "recent"; + apps = "free"; } + +ionicBootstrap(ApiDemoApp); diff --git a/demos/toast/index.ts b/demos/toast/index.ts index d49af6a0cb..e18a1e0a8a 100644 --- a/demos/toast/index.ts +++ b/demos/toast/index.ts @@ -1,6 +1,8 @@ -import {App, Page, Toast, NavController} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap, Toast, NavController} from 'ionic-angular'; -@Page({ + +@Component({ templateUrl: 'main.html' }) class ApiPage { @@ -50,10 +52,11 @@ class ApiPage { } -@App({ +@Component({ template: '' }) class ApiDemoApp { root = ApiPage; - constructor() { } } + +ionicBootstrap(ApiDemoApp); diff --git a/demos/toggle/index.ts b/demos/toggle/index.ts index 9a3940ac27..64d41e5232 100644 --- a/demos/toggle/index.ts +++ b/demos/toggle/index.ts @@ -1,25 +1,24 @@ -import {App} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from 'ionic-angular'; -@App({ + +@Component({ templateUrl: 'main.html' }) class ApiDemoApp { - data; - - constructor() { - this.data = { - frodo: true, - sam: false, - eowyn: true, - legolas: true, - gimli: false, - saruman: true, - gandalf: true, - arwen: false, - boromir: false, - gollum: true, - galadriel: false - }; - } - + data = { + frodo: true, + sam: false, + eowyn: true, + legolas: true, + gimli: false, + saruman: true, + gandalf: true, + arwen: false, + boromir: false, + gollum: true, + galadriel: false + }; } + +ionicBootstrap(ApiDemoApp); diff --git a/demos/toolbar/index.ts b/demos/toolbar/index.ts index 5f3909f63e..3173e3a7bc 100644 --- a/demos/toolbar/index.ts +++ b/demos/toolbar/index.ts @@ -1,13 +1,14 @@ -import {App} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from 'ionic-angular'; -@App({ + +@Component({ templateUrl: 'main.html' }) class ApiDemoApp { - constructor() { - this.demo = "Toolbar"; - - this.favorites = "recent"; - this.apps = "free"; - } + demo = "Toolbar"; + favorites = "recent"; + apps = "free"; } + +ionicBootstrap(ApiDemoApp);