Merge branch 'bootstrap-refactor' into 2.0

demos/action-sheet/app.html

@@ -1 +1 @@
-<ion-nav [root]="rootPage"></ion-nav>
+<ion-nav [root]="root"></ion-nav>

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);

demos/alert/app.html

@@ -1 +1 @@
-<ion-nav [root]="rootPage"></ion-nav>
+<ion-nav [root]="root"></ion-nav>

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);

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);

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);

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: '<ion-nav id="nav" [root]="rootPage" #content></ion-nav>',
-  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: '<ion-nav [root]="root" #content></ion-nav>'
+})
+class ApiDemoApp {
+  root = TabPage;
+}
+
+ionicBootstrap(ApiDemoApp, null, CONFIG_DEMO);

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: '<ion-nav [root]="root"></ion-nav>'
 })
 class ApiDemoApp {
   root = MainPage;
 }
+
+ionicBootstrap(ApiDemoApp);

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);

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);

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);

demos/id/index.ts

@@ -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;
-  }
-}

demos/id/main.html

@@ -1,34 +0,0 @@
-<ion-menu [content]="content" id="menu1">
-
-  <ion-toolbar secondary>
-    <ion-title>Menu 1</ion-title>
-  </ion-toolbar>
-
-  <ion-content>
-    <ion-list>
-      <button ion-item menuClose="menu1" detail-none>
-        Close Menu 1
-      </button>
-    </ion-list>
-  </ion-content>
-
-</ion-menu>
-
-
-<ion-menu [content]="content" id="menu2">
-
-  <ion-toolbar danger>
-    <ion-title>Menu 2</ion-title>
-  </ion-toolbar>
-
-  <ion-content>
-    <ion-list>
-      <button ion-item menuClose="menu2" detail-none>
-        Close Menu 2
-      </button>
-    </ion-list>
-  </ion-content>
-
-</ion-menu>
-
-<ion-nav id="nav" [root]="rootView" #content swipeBackEnabled="false"></ion-nav>

demos/id/page1.html

@@ -1,23 +0,0 @@
-<ion-navbar *navbar>
-  <button [menuToggle]="activeMenu">
-    <ion-icon name="menu"></ion-icon>
-  </button>
-  <ion-title>
-    Id
-  </ion-title>
-</ion-navbar>
-
-
-<ion-content padding>
-
-  <h4>Active Menu: <b primary>{{ (activeMenu == 'menu1') ? 'Menu 1' : 'Menu 2' }}</b></h4>
-
-  <p>This page has two menus with different id's, but only one is active at a time.</p>
-
-  <button block secondary (click)="menu1Active()">Make Menu 1 Active</button>
-
-  <button block danger (click)="menu2Active()">Make Menu 2 Active</button>
-
-  <button block [menuToggle]="activeMenu">Toggle Menu</button>
-
-</ion-content>

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);

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);

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);

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);

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);

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);

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: `
     <ion-navbar *navbar>
       <ion-title>Page 2</ion-title>
@@ -119,11 +120,13 @@ class Page2 {
   constructor(private nav: NavController, private platform: Platform) {}
 }
 
-@App({
-  template: '<ion-nav [root]="root"></ion-nav>'
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>',
+  styleUrls: ['styles.css'],
+  encapsulation: ViewEncapsulation.None
 })
-class E2EApp {
-  root = E2EPage;
+class ApiDemoApp {
+  root = Page1;
 }
 
-document.body.innerHTML += '<link href="styles.css" rel="stylesheet">'
+ionicBootstrap(ApiDemoApp);

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: '<ion-nav [root]="root"></ion-nav>',
-  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: '<ion-nav [root]="root"></ion-nav>',
+  pipes: [CleanLocalDataPipe]
+})
+class ApiDemoApp {
+  root = MainPage;
+}
+
+ionicBootstrap(ApiDemoApp);

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);

demos/menu/main.html

@@ -31,4 +31,4 @@
 
 </ion-menu>
 
-<ion-nav id="nav" [root]="rootView" #content swipeBackEnabled="false"></ion-nav>
+<ion-nav [root]="root" #content swipeBackEnabled="false"></ion-nav>

demos/modal/app.html

@@ -1 +1 @@
-<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
+<ion-nav [root]="root"></ion-nav>

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());

demos/nav-params/app.html

@@ -1 +1 @@
-<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
+<ion-nav [root]="root"></ion-nav>

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);

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);

demos/navigation/app.html

@@ -1 +1 @@
-<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
+<ion-nav [root]="root"></ion-nav>

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);

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);

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: `
     <ion-list radio-group [(ngModel)]="fontFamily" (ionChange)="changeFontFamily()">
       <ion-row>
@@ -133,7 +133,7 @@ class PopoverRadioPage {
 }
 
 
-@Page({
+@Component({
   templateUrl: 'main.html'
 })
 class PopoverPage {
@@ -158,11 +158,13 @@ class PopoverPage {
 }
 
 
-@App({
-  template: '<ion-nav [root]="root"></ion-nav>'
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>',
+  styleUrls: ['style.css'],
+  encapsulation: ViewEncapsulation.None
 })
 class ApiDemoApp {
   root = PopoverPage;
 }
 
-document.body.innerHTML += '<link href="style.css" rel="stylesheet">'
+ionicBootstrap(ApiDemoApp);

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);

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);

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);

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);

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);

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: '<ion-nav [root]="root"></ion-nav>'
 })
 class ApiDemoApp {
-  root;
-
-  constructor() {
-    this.root = MainPage;
-  }
+  root = MainPage;
 }
+
+ionicBootstrap(ApiDemoApp);

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);

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);

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 += '<link href="style.css" rel="stylesheet">'
+ionicBootstrap(ApiDemoApp);

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);

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);

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: '<ion-nav [root]="root"></ion-nav>'
 })
 class ApiDemoApp {
   root = ApiPage;
-  constructor() { }
 }
+
+ionicBootstrap(ApiDemoApp);

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);

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);

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: `
     <ion-toolbar>
       <ion-buttons start>
@@ -173,11 +174,11 @@ class ModalPage {
 }
 
 
-@App({
+@Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
 class E2EApp {
-  constructor() {
-    this.root = E2EPage;
-  }
+  root = E2EPage;
 }
+
+ionicBootstrap(E2EApp);

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: `
     <ion-toolbar>
       <ion-buttons>
@@ -310,12 +315,11 @@ class ModalPage {
 }
 
 
-@App({
+@Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
 class E2EApp {
-  root;
-  constructor() {
-    this.root = E2EPage;
-  }
+  root = E2EPage;
 }
+
+ionicBootstrap(E2EApp);

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: `
     <ion-navbar *navbar>
       <ion-title>Another Page</ion-title>
@@ -153,12 +154,11 @@ class AnotherPage {
 }
 
 
-@App({
+@Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
 class E2EApp {
-  root;
-  constructor() {
-    this.root = E2EPage;
-  }
+  root = E2EPage;
 }
+
+ionicBootstrap(E2EApp);

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);
+      }
     }
   }
 

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;

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: '<ion-nav [root]="root"></ion-nav>',
-  prodMode: true
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
 })
 class E2EApp {
-  root;
-
-  constructor() {
-    this.root = E2EPage;
-  }
+  root = E2EPage;
 }
+
+ionicBootstrap(E2EApp, null, {
+  prodMode: true
+});

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(){}

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: `
   <ion-toolbar>
     <ion-title>This is a modal</ion-title>
@@ -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: `
   <ion-navbar *navbar>
     <ion-title>This is a tab page</ion-title>
@@ -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
+});

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: '<ion-nav [root]="root"></ion-nav>'
 })
 class E2EApp {
-  root;
-
-  constructor() {
-    this.root = E2EPage;
-  }
+  root = E2EPage;
 }
+
+ionicBootstrap(E2EApp);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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);

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: `<ion-content>
    *                <button (click)="scrollTo()">Down 500px</button>
    *              </ion-content>`
@@ -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: `<ion-content>
    *                <button (click)="scrollToTop()">Scroll to top</button>
    *              </ion-content>`

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

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: '<ion-nav [root]="root"></ion-nav>'
 })
 class E2EApp {
-  root;
-
-  constructor() {
-    this.root = E2EPage;
-  }
+  root = E2EPage;
 }
+
+ionicBootstrap(E2EApp);

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);

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);

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);

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);

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 );
  *     }

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: '<ion-content><button (click)="nav.pop()">Pop</button></ion-content>'
 })
 class E2EPage2 {
-
   constructor(private nav: NavController) {}
-
 }
 
 
-@App({
+@Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
 class E2EApp {
-  root;
-  constructor() {
-    this.root = E2EPage1;
-  }
+  root = E2EPage1;
 }
 
+ionicBootstrap(E2EApp);
+
+
 function getAsyncData(): Promise<any[]> {
   // async return mock data
   return new Promise(resolve => {

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<number[]> {
   // async return mock data
   return new Promise(resolve => {

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,

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,

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);

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: '<ion-nav [root]="root"></ion-nav>'
 })
 class E2EApp {
   root = PageOne;
 }
+
+ionicBootstrap(E2EApp);

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);

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: '<ion-nav [root]="rootPage"></ion-nav>'
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
 })
 class E2EApp {
-  rootPage = E2EPage;
+  root = E2EPage;
 }
+
+ionicBootstrap(E2EApp);

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);

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);

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);