diff --git a/demos/action-sheet/app.html b/demos/action-sheet/app.html index 7b88c96996..6734cd75a0 100644 --- a/demos/action-sheet/app.html +++ b/demos/action-sheet/app.html @@ -1 +1 @@ - + diff --git a/demos/action-sheet/index.ts b/demos/action-sheet/index.ts index 37b5a41e7f..718486e4af 100644 --- a/demos/action-sheet/index.ts +++ b/demos/action-sheet/index.ts @@ -1,17 +1,8 @@ -import {App, Page, ActionSheet, NavController, Platform} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap, ActionSheet, NavController, Platform} from 'ionic-angular'; -@App({ - templateUrl: 'app.html' -}) -class ApiDemoApp { - constructor() { - this.rootPage = InitialPage; - } -} - - -@Page({ +@Component({ templateUrl: 'main.html' }) export class InitialPage { @@ -64,3 +55,13 @@ export class InitialPage { this.nav.present(actionSheet); } } + + +@Component({ + templateUrl: 'app.html' +}) +class ApiDemoApp { + root = InitialPage; +} + +ionicBootstrap(ApiDemoApp); diff --git a/demos/alert/app.html b/demos/alert/app.html index 7b88c96996..6734cd75a0 100644 --- a/demos/alert/app.html +++ b/demos/alert/app.html @@ -1 +1 @@ - + diff --git a/demos/alert/index.ts b/demos/alert/index.ts index cf0000843b..4f4bc688f8 100644 --- a/demos/alert/index.ts +++ b/demos/alert/index.ts @@ -1,23 +1,17 @@ -import {App, Page, Alert, NavController} from 'ionic-angular'; +import {Component} from '@angular/core'; +import {ionicBootstrap, Alert, NavController} 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; - } + testRadioOpen = false; + testRadioResult: any; + testCheckboxOpen = false; + testCheckboxResult: any; + + constructor(public nav: NavController) {} doAlert() { let alert = Alert.create({ @@ -214,3 +208,13 @@ export class InitialPage { } } + + +@Component({ + templateUrl: 'app.html' +}) +class ApiDemoApp { + root = InitialPage; +} + +ionicBootstrap(ApiDemoApp); diff --git a/demos/button/index.ts b/demos/button/index.ts index 64f6d23af8..c40e1274f7 100644 --- a/demos/button/index.ts +++ b/demos/button/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/checkbox/index.ts b/demos/checkbox/index.ts index 70a8fe9be1..83d10ded9c 100644 --- a/demos/checkbox/index.ts +++ b/demos/checkbox/index.ts @@ -1,25 +1,26 @@ -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 = { - jon: true, - daenerys: true, - arya: false, - tyroin: false, - sansa: true, - khal: false, - cersei: true, - stannis: true, - petyr: false, - hodor: true, - catelyn: true - }; - } + data = { + jon: true, + daenerys: true, + arya: false, + tyroin: false, + sansa: true, + khal: false, + cersei: true, + stannis: true, + petyr: false, + hodor: true, + catelyn: true + }; } + +ionicBootstrap(ApiDemoApp); diff --git a/demos/config/index.ts b/demos/config/index.ts index f863175ed1..3c018fe909 100644 --- a/demos/config/index.ts +++ b/demos/config/index.ts @@ -1,3 +1,8 @@ + +import {Component} from '@angular/core'; +import {ionicBootstrap, IonicApp, Platform, NavController} from 'ionic-angular'; + + if (!window.localStorage) { Object.defineProperty(window, "localStorage", new (function () { var aKeys = [], oStorage = {}; @@ -65,36 +70,22 @@ if (window.localStorage.getItem('configDemo')) { CONFIG_DEMO = JSON.parse(window.localStorage.getItem('configDemo')); } -import {App, Page, IonicApp, Platform, NavController} from 'ionic-angular'; - -@App({ - template: '', - config: CONFIG_DEMO || {} -}) -class ApiDemoApp { - - constructor() { - this.rootPage = TabPage; - } -} - -@Page({ +@Component({ templateUrl: 'tabs.html' }) export class TabPage { - constructor() { - this.tabOne = InitialPage; - } + tabOne = InitialPage; } -@Page({ +@Component({ templateUrl: 'main.html' }) export class InitialPage { - constructor(platform: Platform, nav: NavController) { - this.platform = platform; - this.nav = nav; + config: any; + initialConfig: any; + + constructor(public platform: Platform, public nav: NavController) { if (window.localStorage.getItem('configDemo') !== null) { this.config = JSON.parse(window.localStorage.getItem('configDemo')); @@ -126,16 +117,23 @@ export class InitialPage { } } -@Page({ +@Component({ templateUrl: 'page.html' }) export class AnotherPage { - constructor(nav: NavController) { - this.nav = nav; - - } + constructor(public nav: NavController) {} pop() { this.nav.pop(); } } + + +@Component({ + template: '' +}) +class ApiDemoApp { + root = TabPage; +} + +ionicBootstrap(ApiDemoApp, null, CONFIG_DEMO); diff --git a/demos/datetime/index.ts b/demos/datetime/index.ts index b207561ddd..54cbaae4a5 100644 --- a/demos/datetime/index.ts +++ b/demos/datetime/index.ts @@ -1,7 +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 { @@ -63,9 +64,11 @@ class MainPage { } -@App({ +@Component({ template: '' }) class ApiDemoApp { root = MainPage; } + +ionicBootstrap(ApiDemoApp); diff --git a/demos/events/index.ts b/demos/events/index.ts index eab37584b3..3b959de5ef 100644 --- a/demos/events/index.ts +++ b/demos/events/index.ts @@ -1,36 +1,32 @@ -import {ViewChild} from '@angular/core'; -import {App, Page, Events, Nav} from 'ionic-angular'; +import {Component, ViewChild} from '@angular/core'; +import {ionicBootstrap, Events, Nav} from 'ionic-angular'; -@Page({templateUrl: 'login.html'}) + +@Component({templateUrl: 'login.html'}) class Login { user = { name: "Administrator", username: "admin" }; - constructor(private events: Events) { - - } + constructor(private events: Events) {} login() { this.events.publish('user:login'); } - } -@Page({templateUrl: 'logout.html'}) +@Component({templateUrl: 'logout.html'}) class Logout { - constructor(private events: Events) { - - } + constructor(private events: Events) {} logout() { this.events.publish('user:logout'); } } -@App({ +@Component({ templateUrl: 'main.html' }) class ApiDemoApp { @@ -65,3 +61,5 @@ class ApiDemoApp { }); } } + +ionicBootstrap(ApiDemoApp); diff --git a/demos/hide-when/index.ts b/demos/hide-when/index.ts index 64f6d23af8..c40e1274f7 100644 --- a/demos/hide-when/index.ts +++ b/demos/hide-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/icon/index.ts b/demos/icon/index.ts index 64f6d23af8..c40e1274f7 100644 --- a/demos/icon/index.ts +++ b/demos/icon/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/id/index.ts b/demos/id/index.ts deleted file mode 100644 index ca1bb71a40..0000000000 --- a/demos/id/index.ts +++ /dev/null @@ -1,28 +0,0 @@ -import {App, Page, MenuController} from 'ionic-angular'; - -@Page({templateUrl: 'page1.html'}) -class Page1 { - constructor(menu: MenuController) { - this.menu = menu; - this.menu1Active(); - } - menu1Active() { - this.activeMenu = 'menu1'; - this.menu.enable(true, 'menu1'); - this.menu.enable(false, 'menu2'); - } - menu2Active() { - this.activeMenu = 'menu2'; - this.menu.enable(false, 'menu1'); - this.menu.enable(true, 'menu2'); - } -} - -@App({ - templateUrl: 'main.html' -}) -class ApiDemoApp { - constructor() { - this.rootView = Page1; - } -} diff --git a/demos/id/main.html b/demos/id/main.html deleted file mode 100644 index c14c6228da..0000000000 --- a/demos/id/main.html +++ /dev/null @@ -1,34 +0,0 @@ - - - - Menu 1 - - - - - - - - - - - - - - - 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 f64da678d1..ecb8adf5ce 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); 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/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/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/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/datetime/datetime.ts b/src/components/datetime/datetime.ts index b07b5acef3..370b3bca10 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/datetime/test/basic/index.ts b/src/components/datetime/test/basic/index.ts index 65ec4a4c07..494ff488dd 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 { @@ -37,13 +38,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 f06e8ae083..09f5117dbf 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/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/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/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/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/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/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/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 91ab505d37..174ecfa335 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/menu/test/basic/index.ts b/src/components/menu/test/basic/index.ts index d5ca2e2162..e3e713d517 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 = [ @@ -84,3 +84,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 e77d77771b..e6951a740b 100644 --- a/src/components/menu/test/basic/main.html +++ b/src/components/menu/test/basic/main.html @@ -138,6 +138,6 @@ - +
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/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/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/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 629d13e650..a4c88700b7 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(); } /** @@ -509,6 +525,7 @@ export class NavController extends Ion { ev: opts.ev }); + // present() always uses the root nav // start the transition return rootNav._insertViews(-1, [enteringView], opts); } @@ -820,9 +837,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; }); } @@ -920,6 +939,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 @@ -953,7 +973,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(); }); @@ -988,6 +1010,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 @@ -1044,6 +1067,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); }); } @@ -1103,12 +1127,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 { @@ -1215,12 +1241,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); } } @@ -1423,11 +1451,15 @@ 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 => { 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-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/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/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: ` * ``` * - * ```js - * @Page({}) + * ```ts + * @Component({}) * class MyPage { * constructor(private nav: NavController) {} * @@ -79,8 +79,8 @@ const POPOVER_MD_BODY_PADDING = 12; * 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/popover/test/basic/index.ts b/src/components/popover/test/basic/index.ts index 15a28ccb04..e53b34caf6 100644 --- a/src/components/popover/test/basic/index.ts +++ b/src/components/popover/test/basic/index.ts @@ -1,8 +1,8 @@ -import {ViewChild, ElementRef} from '@angular/core'; -import {App, Page, Popover, NavController, Content, NavParams, ViewController} from '../../../../../src'; +import {Component, ViewChild, ElementRef, ViewEncapsulation} from '@angular/core'; +import {ionicBootstrap, Popover, NavController, Content, NavParams, ViewController} from '../../../../../src'; -@Page({ +@Component({ template: ` @@ -133,7 +133,7 @@ class PopoverRadioPage { } -@Page({ +@Component({ template: ` Ionic @@ -153,7 +153,7 @@ class PopoverListPage { } -@Page({ +@Component({ template: ` Ionic @@ -174,7 +174,7 @@ class PopoverLongListPage { } -@Page({ +@Component({ templateUrl: 'main.html' }) class E2EPage { @@ -218,11 +218,13 @@ class E2EPage { } -@App({ - template: '' +@Component({ + template: '', + styleUrls: ['style.css'], + encapsulation: ViewEncapsulation.None }) class E2EApp { root = E2EPage; } -document.body.innerHTML += '' +ionicBootstrap(E2EApp); diff --git a/src/components/radio/test/basic/index.ts b/src/components/radio/test/basic/index.ts index 5aa64f63ec..8243f7a668 100644 --- a/src/components/radio/test/basic/index.ts +++ b/src/components/radio/test/basic/index.ts @@ -1,8 +1,9 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; import {Control, ControlGroup} from '@angular/common'; -@App({ +@Component({ templateUrl: 'main.html' }) class E2EApp { @@ -71,3 +72,5 @@ class E2EApp { console.log('turtleSelect', ev); } } + +ionicBootstrap(E2EApp); diff --git a/src/components/refresher/refresher.ts b/src/components/refresher/refresher.ts index b2e14b786c..0ed4b531be 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/refresher/test/basic/index.ts b/src/components/refresher/test/basic/index.ts index f6591944fa..d1648bbb49 100644 --- a/src/components/refresher/test/basic/index.ts +++ b/src/components/refresher/test/basic/index.ts @@ -1,7 +1,8 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) class E2EApp { @@ -83,3 +84,5 @@ const data = [ 'Kick-Ass', 'Drive Angry' ]; + +ionicBootstrap(E2EApp); diff --git a/src/components/scroll/test/basic/index.ts b/src/components/scroll/test/basic/index.ts index 9852b251fe..1bc0b3022e 100644 --- a/src/components/scroll/test/basic/index.ts +++ b/src/components/scroll/test/basic/index.ts @@ -1,11 +1,14 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html' }) -class MyApp { +class E2EApp { doRefresh() { console.log('DOREFRESH') } } + +ionicBootstrap(E2EApp); diff --git a/src/components/searchbar/test/floating/index.ts b/src/components/searchbar/test/floating/index.ts index fd437f256a..a7c0f6af67 100644 --- a/src/components/searchbar/test/floating/index.ts +++ b/src/components/searchbar/test/floating/index.ts @@ -1,20 +1,16 @@ -import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from '@angular/common'; +import {Component} from '@angular/core'; +import {FormBuilder, Validators, Control, ControlGroup} from '@angular/common'; +import {ionicBootstrap} from '../../../../../src'; -import {App} from '../../../../../src'; -@App({ - templateUrl: 'main.html', - directives: [FORM_DIRECTIVES] +@Component({ + templateUrl: 'main.html' }) class E2EApp { defaultSearch: string = 'test'; customPlaceholder: string = ''; defaultCancel: string = ''; - constructor() { - - } - onClearSearchbar(searchbar) { console.log("Clicked clear input on", searchbar.value); } @@ -35,3 +31,5 @@ class E2EApp { console.log("Focused input", searchbar.value); } } + +ionicBootstrap(E2EApp); diff --git a/src/components/searchbar/test/nav/index.ts b/src/components/searchbar/test/nav/index.ts index ed600e9b43..de9c5f4537 100644 --- a/src/components/searchbar/test/nav/index.ts +++ b/src/components/searchbar/test/nav/index.ts @@ -1,6 +1,8 @@ -import {App, Page, NavController} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap, NavController} from '../../../../../src'; -@Page({ + +@Component({ templateUrl: 'first.html' }) class FirstPage { @@ -13,12 +15,14 @@ class FirstPage { } } -@Page({ +@Component({ templateUrl: 'second.html' }) class SecondPage { + searchQuery = ''; + items: string[]; + constructor() { - this.searchQuery = ''; this.initializeItems(); } @@ -85,11 +89,11 @@ class SecondPage { } } -@App({ +@Component({ template: '' }) class E2EApp { - constructor() { - this.root = FirstPage; - } + root = FirstPage; } + +ionicBootstrap(E2EApp); diff --git a/src/components/searchbar/test/toolbar/index.ts b/src/components/searchbar/test/toolbar/index.ts index a88e381e38..5218fb75b9 100644 --- a/src/components/searchbar/test/toolbar/index.ts +++ b/src/components/searchbar/test/toolbar/index.ts @@ -1,6 +1,8 @@ -import {App} from '../../../../../src'; +import {Component} from '@angular/core'; +import {ionicBootstrap} from '../../../../../src'; -@App({ + +@Component({ templateUrl: 'main.html' }) class E2EApp { @@ -8,8 +10,6 @@ class E2EApp { primaryToolbarSearch: string = ''; dangerToolbarSearch: string = ''; lightToolbarSearch: string = ''; - - constructor() { - - } } + +ionicBootstrap(E2EApp); diff --git a/src/components/segment/test/basic/index.ts b/src/components/segment/test/basic/index.ts index 2a2c56115a..02aee650ec 100644 --- a/src/components/segment/test/basic/index.ts +++ b/src/components/segment/test/basic/index.ts @@ -1,21 +1,19 @@ -import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from '@angular/common'; - -import {App, IonicApp} from '../../../../../src'; +import {Component} from '@angular/core'; +import {FormBuilder, Validators} from '@angular/common'; +import {ionicBootstrap} from '../../../../../src'; -@App({ +@Component({ templateUrl: 'main.html', - providers: [FormBuilder], - directives: [FORM_DIRECTIVES] + providers: [FormBuilder] }) -class MyApp { +class E2EApp { relationship: string = 'enemies'; modelStyle: string = 'B'; appType: string = 'free'; icons: string = 'camera'; isDisabled: boolean = true; - - myForm; + myForm: any; constructor(fb: FormBuilder) { this.myForm = fb.group({ @@ -35,8 +33,10 @@ class MyApp { console.log("Segment selected", segmentButton.value); } - doSubmit(event) { + doSubmit(ev) { console.log('Submitting form', this.myForm.value); - event.preventDefault(); + ev.preventDefault(); } } + +ionicBootstrap(E2EApp); diff --git a/src/components/segment/test/nav/index.ts b/src/components/segment/test/nav/index.ts index c71565dad0..7190f2df1c 100644 --- a/src/components/segment/test/nav/index.ts +++ b/src/components/segment/test/nav/index.ts @@ -1,13 +1,15 @@ +import {Component} from '@angular/core'; import {Validators, Control, ControlGroup} from '@angular/common'; -import {App, Page, NavController} from '../../../../../src'; +import {ionicBootstrap, NavController} from '../../../../../src'; -@Page({ +@Component({ templateUrl: 'main.html', }) class SegmentPage { - constructor(nav: NavController) { - this.nav = nav; + signInType: string; + + constructor(public nav: NavController) { this.signInType = 'new'; } @@ -16,7 +18,7 @@ class SegmentPage { } } -@Page({ +@Component({ template: `