demos(ngmodule): update to ngmodule

demos/action-sheet/AppModule.ts

@@ -1,6 +1,5 @@
-import { Component } from '@angular/core';
-
-import { ActionSheetController, ionicBootstrap, Platform } from 'ionic-angular';
+import { Component, NgModule } from '@angular/core';
+import { ActionSheetController, IonicModule, Platform } from 'ionic-angular';
 
 
 @Component({
@@ -61,8 +60,21 @@ export class ApiDemoPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = ApiDemoPage;
 }
 
-ionicBootstrap(ApiDemoApp);
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/alert/AppModule.ts

@@ -1,6 +1,5 @@
-import { Component } from '@angular/core';
-
-import { AlertController, ionicBootstrap } from 'ionic-angular';
+import { Component, NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
 
 
 @Component({
@@ -214,8 +213,22 @@ export class ApiDemoPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = ApiDemoPage;
 }
 
-ionicBootstrap(ApiDemoApp);
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/button/AppModule.ts

@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/button/index.ts

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/checkbox/AppModule.ts

@@ -0,0 +1,47 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class ApiDemoPage {
+
+  data = {
+    jon: true,
+    daenerys: true,
+    arya: false,
+    tyroin: false,
+    sansa: true,
+    khal: false,
+    cersei: true,
+    stannis: true,
+    petyr: false,
+    hodor: true,
+    catelyn: true
+  };
+
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/checkbox/index.ts

@@ -1,35 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {
-
-  data = {
-    jon: true,
-    daenerys: true,
-    arya: false,
-    tyroin: false,
-    sansa: true,
-    khal: false,
-    cersei: true,
-    stannis: true,
-    petyr: false,
-    hodor: true,
-    catelyn: true
-  };
-
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/config/AppModule.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 
-import { ionicBootstrap, IonicApp, Platform, NavController } from 'ionic-angular';
+import { IonicModule, IonicApp, Platform, NavController } from 'ionic-angular';
 
 
 if (!window.localStorage) {
@@ -137,8 +137,24 @@ export class PushPage {
 @Component({
   template: '<ion-nav [root]="root" #content></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = TabPage;
 }
 
-ionicBootstrap(ApiDemoApp, null, CONFIG_DEMO);
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage,
+    TabPage,
+    PushPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp, CONFIG_DEMO)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/datetime/AppModule.ts

@@ -1,12 +1,10 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
+import { Component, NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoPage {
+export class ApiDemoPage {
   wwwReleased = '1991';
   netscapeReleased = '1994-12-15T13:47:20.789';
   operaReleased = '1995-04-15';
@@ -68,8 +66,21 @@ class ApiDemoPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = ApiDemoPage;
 }
 
-ionicBootstrap(ApiDemoApp);
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/events/AppModule.ts

@@ -1,12 +1,10 @@
-import { Component, ViewChild } from '@angular/core';
-
-import { Events, ionicBootstrap, Nav } from 'ionic-angular';
-
+import { Component, ViewChild, NgModule } from '@angular/core';
+import { Events, IonicModule, Nav } from 'ionic-angular';
 
 @Component({
   templateUrl: 'login.html'
 })
-class Login {
+export class Login {
   user = {
     name: "Administrator",
     username: "admin"
@@ -24,7 +22,7 @@ class Login {
 @Component({
   templateUrl: 'logout.html'
 })
-class Logout {
+export class Logout {
   constructor(private events: Events) {}
 
   logout() {
@@ -36,7 +34,7 @@ class Logout {
 @Component({
   templateUrl: 'app.html'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   @ViewChild(Nav) nav: Nav;
 
   root = Login;
@@ -72,4 +70,19 @@ class ApiDemoApp {
   }
 }
 
-ionicBootstrap(ApiDemoApp);
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    Logout,
+    Login
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    Logout,
+    Login
+  ]
+})
+export class AppModule {}

demos/hide-when/AppModule.ts

@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/hide-when/index.ts

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/icon/AppModule.ts

@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/icon/index.ts

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/infinite-scroll/AppModule.ts

@@ -1,6 +1,5 @@
-import { Component, Injectable } from '@angular/core';
-import { ionicBootstrap, InfiniteScroll } from 'ionic-angular';
-
+import { Component, NgModule, Injectable } from '@angular/core';
+import { IonicModule, InfiniteScroll } from 'ionic-angular';
 
 /**
  * Mock Data Access Object
@@ -67,7 +66,7 @@ export class MockProvider {
   templateUrl: 'main.html',
   providers: [MockProvider]
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   items: string[];
 
   constructor(private mockProvider: MockProvider) {
@@ -90,4 +89,17 @@ class ApiDemoApp {
 
 }
 
-ionicBootstrap(ApiDemoApp);
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    MockProvider
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoApp
+  ]
+})
+export class AppModule {}

demos/input/AppModule.ts

@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/input/index.ts

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/item-reorder/AppModule.ts

@@ -1,12 +1,11 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-
-import { ionicBootstrap, ItemSliding, NavController, Toast, reorderArray } from 'ionic-angular';
+import { Component, NgModule, ViewEncapsulation } from '@angular/core';
+import { IonicModule, ItemSliding, NavController, Toast, reorderArray } from 'ionic-angular';
 
 @Component({
   templateUrl: 'main.html',
   encapsulation: ViewEncapsulation.None
 })
-class ApiDemoPage {
+export class ApiDemoPage {
   songs: any[];
   editButton: string = 'Edit';
   editing: boolean = false;
@@ -78,8 +77,21 @@ class ApiDemoPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = ApiDemoPage;
 }
 
-ionicBootstrap(ApiDemoApp);
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/item-sliding/AppModule.ts

@@ -1,13 +1,12 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-
-import { ionicBootstrap, ItemSliding, ToastController } from 'ionic-angular';
+import { Component, NgModule, ViewEncapsulation } from '@angular/core';
+import { IonicModule, ItemSliding, ToastController } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html',
   encapsulation: ViewEncapsulation.None
 })
-class ApiDemoPage {
+export class ApiDemoPage {
   chats: any[];
   logins: any[];
 
@@ -93,8 +92,21 @@ class ApiDemoPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = ApiDemoPage;
 }
 
-ionicBootstrap(ApiDemoApp);
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/item/AppModule.ts

@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/item/index.ts

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/label/AppModule.ts

@@ -0,0 +1,32 @@
+import { Component, NgModule } from '@angular/core';
+
+import { IonicModule } from 'ionic-angular';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/label/index.ts

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/list/AppModule.ts

@@ -0,0 +1,31 @@
+import { Component, NgModule } from '@angular/core';
+
+import { IonicModule } from 'ionic-angular';
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/list/index.ts

@@ -1,18 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/loading/AppModule.ts

@@ -1,12 +1,12 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, NgModule, ViewEncapsulation } from '@angular/core';
 
-import { ionicBootstrap, LoadingController, NavController } from 'ionic-angular';
+import { IonicModule, LoadingController, NavController } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class Page1 {
+export class Page1 {
   constructor(public loadingCtrl: LoadingController, public navCtrl: NavController) {}
 
   presentLoadingIos() {
@@ -120,7 +120,7 @@ class Page1 {
     <ion-content padding>This is another page!</ion-content>
   `
 })
-class Page2 {}
+export class Page2 {}
 
 
 @Component({
@@ -128,8 +128,23 @@ class Page2 {}
   styleUrls: ['styles.css'],
   encapsulation: ViewEncapsulation.None
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = Page1;
 }
 
-ionicBootstrap(ApiDemoApp);
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    Page1,
+    Page2
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    Page1,
+    Page2
+  ]
+})
+export class AppModule {}

demos/local-storage/AppModule.ts

@@ -1,13 +1,13 @@
-import { Component, Injectable, Pipe, PipeTransform } from '@angular/core';
+import { Component, NgModule, Injectable, Pipe, PipeTransform } from '@angular/core';
 
-import { Config, IonicApp, ionicBootstrap, LocalStorage, Platform, Storage } from 'ionic-angular';
+import { Config, IonicModule, LocalStorage, Platform, Storage } from 'ionic-angular';
 
 
 @Pipe({
   name: 'cleanLocalData'
 })
 @Injectable()
-class CleanLocalDataPipe implements PipeTransform {
+export class CleanLocalDataPipe implements PipeTransform {
   validKeys: string[];
   output: any;
   data: any;
@@ -30,7 +30,7 @@ class CleanLocalDataPipe implements PipeTransform {
   templateUrl: 'main.html',
   pipes: [CleanLocalDataPipe]
 })
-class ApiDemoPage {
+export class ApiDemoPage {
   local: Storage;
   localStorageDemo: string;
   myItem: any;
@@ -84,8 +84,22 @@ class ApiDemoPage {
   template: '<ion-nav [root]="root"></ion-nav>',
   pipes: [CleanLocalDataPipe]
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = ApiDemoPage;
 }
 
-ionicBootstrap(ApiDemoApp);
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage,
+    CleanLocalDataPipe
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/menu/AppModule.ts

@@ -1,12 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 
-import { ionicBootstrap, MenuController } from 'ionic-angular';
+import { IonicModule, MenuController } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoPage {
+export class ApiDemoPage {
   activeMenu: string;
 
   constructor(public menu: MenuController) {
@@ -28,8 +28,21 @@ class ApiDemoPage {
 @Component({
   templateUrl: 'app.html'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = ApiDemoPage;
 }
 
-ionicBootstrap(ApiDemoApp);
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/modal/AppModule.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 
-import { Animation, ionicBootstrap, ModalController, NavController, NavParams, ViewController } from 'ionic-angular';
+import { Animation, IonicModule, ModalController, NavController, NavParams, ViewController } from 'ionic-angular';
 
 
 @Component({
@@ -50,14 +50,29 @@ export class ModalContentPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = ModalFirstPage;
 }
 
-ionicBootstrap(ApiDemoApp);
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ModalFirstPage,
+    ModalContentPage,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}
 
 
-class FadeIn extends Animation {
+export class FadeIn extends Animation {
   constructor(enteringView: ViewController, leavingView: ViewController) {
     super(enteringView.pageRef());
     this
@@ -65,19 +80,19 @@ class FadeIn extends Animation {
       .duration(1000)
       .fromTo('translateY', '0%', '0%')
       .fromTo('opacity', 0, 1)
-      .before.addClass('show-page');
+      .beforeAddClass('show-page');
   }
 }
 Animation.register('my-fade-in', FadeIn);
 
-class FadeOut extends Animation {
+export class FadeOut extends Animation {
   constructor(enteringView: ViewController, leavingView: ViewController) {
     super(leavingView.pageRef());
     this
       .easing('ease')
       .duration(500)
       .fromTo('opacity', 1, 0)
-      .before.addClass('show-page');
+      .beforeAddClass('show-page');
   }
 }
 Animation.register('my-fade-out', FadeOut);

demos/nav-params/AppModule.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 
-import { ionicBootstrap, NavController, NavParams } from 'ionic-angular';
+import { IonicModule, NavController, NavParams } from 'ionic-angular';
 
 
 @Component({
@@ -32,8 +32,22 @@ export class PushPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = ApiDemoPage;
 }
 
-ionicBootstrap(ApiDemoApp);
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+    PushPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/navbar/AppModule.ts

@@ -0,0 +1,35 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+
+// Use the toolbar demo but pass in the demo name to change the title
+@Component({
+  templateUrl: '../toolbar/main.html'
+})
+export class ApiDemoPage {
+  demo = "Navbar";
+  favorites = "recent";
+  apps = "free";
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/navbar/index.ts

@@ -1,24 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-// Use the toolbar demo but pass in the demo name to change the title
-@Component({
-  templateUrl: '../toolbar/main.html'
-})
-class ApiDemoPage {
-  demo = "Navbar";
-  favorites = "recent";
-  apps = "free";
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/navigation/AppModule.ts

@@ -1,6 +1,5 @@
-import { Component } from '@angular/core';
-
-import { Config, ionicBootstrap, NavController, NavParams, Platform } from 'ionic-angular';
+import { Component, NgModule } from '@angular/core';
+import { Config, IonicModule, NavController, NavParams, Platform } from 'ionic-angular';
 
 var PAGE_NUM = 2;
 
@@ -41,8 +40,22 @@ export class PushPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = ApiDemoPage;
 }
 
-ionicBootstrap(ApiDemoApp);
+@NgModule({
+  declarations: [
+    PushPage,
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/platform/AppModule.ts

@@ -0,0 +1,41 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicModule, Platform } from 'ionic-angular';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class ApiDemoPage {
+  isIos: boolean;
+  isAndroid: boolean;
+  isWindows: boolean;
+
+  constructor(platform: Platform) {
+    this.isIos = platform.is('ios');
+    this.isAndroid = platform.is('android');
+    this.isWindows = platform.is('windows');
+  }
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/platform/index.ts

@@ -1,29 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap, Platform } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {
-  isIos: boolean;
-  isAndroid: boolean;
-  isWindows: boolean;
-
-  constructor(platform: Platform) {
-    this.isIos = platform.is('ios');
-    this.isAndroid = platform.is('android');
-    this.isWindows = platform.is('windows');
-  }
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/popover/AppModule.ts

@@ -1,6 +1,5 @@
-import { Component, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core';
-
-import { ionicBootstrap, NavParams, PopoverController } from 'ionic-angular';
+import { Component, NgModule, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import { IonicModule, NavParams, PopoverController } from 'ionic-angular';
 
 
 @Component({
@@ -59,7 +58,7 @@ import { ionicBootstrap, NavParams, PopoverController } from 'ionic-angular';
     </ion-list>
   `,
 })
-class PopoverRadioPage {
+export class PopoverRadioPage {
   background: string;
   contentEle: any;
   textEle: any;
@@ -137,7 +136,7 @@ class PopoverRadioPage {
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoPage {
+export class ApiDemoPage {
   @ViewChild('popoverContent', {read: ElementRef}) content: ElementRef;
   @ViewChild('popoverText', {read: ElementRef}) text: ElementRef;
 
@@ -162,8 +161,22 @@ class ApiDemoPage {
   styleUrls: ['style.css'],
   encapsulation: ViewEncapsulation.None
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = ApiDemoPage;
 }
 
-ionicBootstrap(ApiDemoApp);
+@NgModule({
+  declarations: [
+    PopoverRadioPage,
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/radio/AppModule.ts

@@ -0,0 +1,33 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class ApiDemoPage {
+  isDisabled = true;
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/radio/index.ts

@@ -1,21 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {
-  isDisabled = true;
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/range/AppModule.ts

@@ -0,0 +1,39 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class ApiDemoPage {
+  brightness: number = 20;
+  saturation: number = 0;
+  warmth: number = 1300;
+  structure: any = {lower: 33, upper: 60};
+
+  onChange(ev) {
+    console.log("Changed", ev);
+  }
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/range/index.ts

@@ -1,27 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {
-  brightness: number = 20;
-  saturation: number = 0;
-  warmth: number = 1300;
-  structure: any = {lower: 33, upper: 60};
-
-  onChange(ev) {
-    console.log("Changed", ev);
-  }
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/refresher/AppModule.ts

@@ -1,6 +1,6 @@
-import { Component, Injectable } from '@angular/core';
+import { Component, NgModule, Injectable } from '@angular/core';
 
-import { ionicBootstrap, Refresher } from 'ionic-angular';
+import { IonicModule, Refresher } from 'ionic-angular';
 
 
 /**
@@ -68,7 +68,7 @@ export class MockProvider {
   templateUrl: 'main.html',
   providers: [MockProvider]
 })
-class ApiDemoPage {
+export class ApiDemoPage {
   items: string[];
 
   constructor(private mockProvider: MockProvider) {
@@ -96,8 +96,22 @@ class ApiDemoPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = ApiDemoPage;
 }
 
-ionicBootstrap(ApiDemoApp);
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage,
+    MockProvider
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/scroll/AppModule.ts

@@ -0,0 +1,32 @@
+import { Component, NgModule } from '@angular/core';
+
+import { IonicModule } from 'ionic-angular';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/scroll/index.ts

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/scrollbar-fix.css

@@ -1,6 +1,6 @@
-body.has-scrollbar scroll-content {
+body.has-scrollbar .scroll-content {
   margin-right: -15px;
 }
-body.has-scrollbar ion-menu scroll-content {
+body.has-scrollbar ion-menu .scroll-content {
   margin-right: 0;
 }

demos/searchbar/AppModule.ts

@@ -1,12 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 
-import { ionicBootstrap } from 'ionic-angular';
+import { IonicModule } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoPage {
+export class ApiDemoPage {
   items: Array<string>;
 
   ngOnInit() {
@@ -33,8 +33,21 @@ class ApiDemoPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = ApiDemoPage;
 }
 
-ionicBootstrap(ApiDemoApp);
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/segment/AppModule.ts

@@ -1,12 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 
-import { ionicBootstrap } from 'ionic-angular';
+import { IonicModule } from 'ionic-angular';
 
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoPage {
+export class ApiDemoPage {
   appType = "Paid";
   safari = "Shared Links";
   weather = "sunny";
@@ -90,8 +90,21 @@ class ApiDemoPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = ApiDemoPage;
 }
 
-ionicBootstrap(ApiDemoApp);
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {});

demos/select/AppModule.ts

@@ -1,12 +1,10 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
+import { Component, NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoPage {
+export class ApiDemoPage {
   gender: string;
   gaming: string;
   toppings: Array<string>;
@@ -50,8 +48,21 @@ class ApiDemoPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = ApiDemoPage;
 }
 
-ionicBootstrap(ApiDemoApp);
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/show-when/AppModule.ts

@@ -0,0 +1,30 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/show-when/index.ts

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/slides/AppModule.ts

@@ -0,0 +1,30 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/slides/index.ts

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/tabs/AppModule.ts

@@ -0,0 +1,41 @@
+import { Component, NgModule, ViewEncapsulation } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+
+@Component({
+  template: 'tab',
+})
+export class TabPage {}
+
+
+@Component({
+  templateUrl: 'main.html',
+  styleUrls: ['style.css'],
+  encapsulation: ViewEncapsulation.None
+})
+export class ApiDemoPage {
+  root = TabPage;
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage,
+    TabPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/tabs/index.ts

@@ -1,29 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  template: 'tab',
-})
-class TabPage {}
-
-
-@Component({
-  templateUrl: 'main.html',
-  styleUrls: ['style.css'],
-  encapsulation: ViewEncapsulation.None
-})
-class ApiDemoPage {
-  root = TabPage;
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/tabs/style.css

@@ -7,7 +7,7 @@ ion-tabs {
 }
 
 ion-tabs,
-ion-tabs ion-tabbar {
+ion-tabs .tabbar {
   position: relative;
   top: auto;
   height: auto;

demos/textarea/AppModule.ts

@@ -0,0 +1,30 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/textarea/index.ts

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/title/AppModule.ts

@@ -0,0 +1,36 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicModule } 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`
+@Component({
+  templateUrl: '../toolbar/main.html'
+})
+export class ApiDemoPage {
+  demo = "Title";
+  favorites = "recent";
+  apps = "free";
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/title/index.ts

@@ -1,24 +0,0 @@
-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`
-@Component({
-  templateUrl: '../toolbar/main.html'
-})
-class ApiDemoPage {
-  demo = "Title";
-  favorites = "recent";
-  apps = "free";
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/toast/AppModule.ts

@@ -1,12 +1,10 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap, ToastController } from 'ionic-angular';
-
+import { Component, NgModule } from '@angular/core';
+import { IonicModule, ToastController } from 'ionic-angular';
 
 @Component({
   templateUrl: 'main.html'
 })
-class ApiDemoPage {
+export class ApiDemoPage {
   constructor(private toastCtrl: ToastController) { }
 
   showToast(position: string) {
@@ -59,8 +57,21 @@ class ApiDemoPage {
 @Component({
   template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
   root = ApiDemoPage;
 }
 
-ionicBootstrap(ApiDemoApp);
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/toggle/AppModule.ts

@@ -0,0 +1,44 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class ApiDemoPage {
+  data = {
+    frodo: true,
+    sam: false,
+    eowyn: true,
+    legolas: true,
+    gimli: false,
+    saruman: true,
+    gandalf: true,
+    arwen: false,
+    boromir: false,
+    gollum: true,
+    galadriel: false
+  };
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/toggle/index.ts

@@ -1,33 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {
-  data = {
-    frodo: true,
-    sam: false,
-    eowyn: true,
-    legolas: true,
-    gimli: false,
-    saruman: true,
-    gandalf: true,
-    arwen: false,
-    boromir: false,
-    gollum: true,
-    galadriel: false
-  };
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);

demos/toolbar/AppModule.ts

@@ -0,0 +1,34 @@
+import { Component, NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class ApiDemoPage {
+  demo = "Toolbar";
+  favorites = "recent";
+  apps = "free";
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}

demos/toolbar/index.ts

@@ -1,23 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {
-  demo = "Toolbar";
-  favorites = "recent";
-  apps = "free";
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);