diff --git a/ionic/components/app/test/animations/index.js b/ionic/components/app/test/animations/index.js
index 24273c8cf0..04f5b7f42a 100644
--- a/ionic/components/app/test/animations/index.js
+++ b/ionic/components/app/test/animations/index.js
@@ -8,7 +8,7 @@ let rotateZ = '180deg';
 let translateX = '100px';
 let scale = 0.6;
 
-@Component({ selector: 'ion-view' })
+@Component({ selector: 'ion-app' })
 @View({
   templateUrl: 'main.html'
 })
diff --git a/ionic/components/app/test/animations/main.html b/ionic/components/app/test/animations/main.html
index 9d3a3f73c8..32c69cd7f7 100644
--- a/ionic/components/app/test/animations/main.html
+++ b/ionic/components/app/test/animations/main.html
@@ -5,7 +5,7 @@
     .ball-container {
       position: absolute;
       top: 200px;
-      left: 50px;
+      left: 20px;
       border: 1px solid gray;
       width: 300px;
       height: 51px;
@@ -24,7 +24,7 @@
     <div class="ball"></div>
   </div>
 
-  <div style="position: absolute; top: 300px; left: 50px;">
+  <div style="position: absolute; top: 300px; left: 20px;">
 
     <div class="red square" style="position:absolute; width:100px; height:100px; background:red; top: 0; left: 0;"></div>
     <div class="green square" style="position:absolute; width:100px; height:100px; background:green; top: 0; left: 100px;"></div>
@@ -32,7 +32,7 @@
 
   </div>
 
-  <div style="position: absolute; top: 400px; left: 50px;">
+  <div style="position: absolute; top: 400px; left: 20px;">
 
     <div class="yellow square2" style="position:absolute; width:100px; height:100px; background:yellow; top: 0; left: 0;"></div>
     <div class="purple square2" style="position:absolute; width:100px; height:100px; background:purple; top: 0; left: 100px;"></div>
diff --git a/ionic/components/app/test/barkpark/index.js b/ionic/components/app/test/barkpark/index.js
index dc08c60cc8..98265c36df 100644
--- a/ionic/components/app/test/barkpark/index.js
+++ b/ionic/components/app/test/barkpark/index.js
@@ -1,4 +1,3 @@
-//import {Router} from 'ionic/routing/router'
 import {For, Parent} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
@@ -7,15 +6,13 @@ import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/fo
 import {Log} from 'ionic/util'
 
 import {
-  Router, Routable, List, Item, HeaderTemplate, Nav, NavController,
-  Toolbar, Input, Tabs,
-  Tab, Content, Aside
+  Router, Routable, IonicView, NavController
 } from 'ionic/ionic'
 
+
 @Component({selector: 'ion-view'})
-@View({
-  templateUrl: 'pages/login.html',
-  directives: [FormDirectives, Input, Content, HeaderTemplate, Toolbar]
+@IonicView({
+  templateUrl: 'pages/login.html'
 })
 class LoginPage {
   constructor( nav: NavController ) {
@@ -36,8 +33,6 @@ class LoginPage {
     Log.log('Doing login')
     event.preventDefault();
     console.log(this.loginForm.value);
-
-    //this.viewport.push(SecondPage)
   }
 
   doSignup(event) {
@@ -51,9 +46,8 @@ new Routable(LoginPage, {
 })
 
 @Component({selector: 'ion-view'})
-@View({
-  templateUrl: 'pages/signup.html',
-  directives: [FormDirectives, Input]
+@IonicView({
+  templateUrl: 'pages/signup.html'
 })
 export class SignupPage {
   constructor( nav: NavController ) { //, fb: FormBuilder ) {
@@ -80,16 +74,14 @@ export class SignupPage {
     console.log(this.signupForm.value);
 
     this.nav.push(AppPage)
-    //this.viewport.push(SecondPage)
   }
 }
 
 
 
 @Component({selector: 'ion-view'})
-@View({
-  templateUrl: 'pages/app.html',
-  directives: [FormDirectives, Input, Tabs, Tab]
+@IonicView({
+  templateUrl: 'pages/app.html'
 })
 export class AppPage {
   constructor( nav: NavController ) { //, fb: FormBuilder ) {
@@ -99,9 +91,8 @@ export class AppPage {
 }
 
 @Component({selector: 'ion-view'})
-@View({
-  templateUrl: 'pages/tabs/home.html',
-  directives: [For, Content, List, Item]
+@IonicView({
+  templateUrl: 'pages/tabs/home.html'
 })
 class StreamTab {
   constructor(nav: NavController) {
@@ -122,9 +113,8 @@ class StreamTab {
 }
 
 @Component({selector: 'ion-view'})
-@View({
-  templateUrl: 'pages/post/detail.html',
-  directives: [Content]
+@IonicView({
+  templateUrl: 'pages/post/detail.html'
 })
 class PostDetail {
   constructor(nav: NavController) {
@@ -137,9 +127,8 @@ class PostDetail {
 }
 
 @Component({selector: 'ion-view'})
-@View({
-  templateUrl: 'pages/splash.html',
-  directives: [Content]
+@IonicView({
+  templateUrl: 'pages/splash.html'
 })
 class SplashPage {
   constructor(nav: NavController) {
@@ -151,7 +140,20 @@ class SplashPage {
   }
 }
 
-export function main(ionicBootstrap) {
-  ionicBootstrap(SplashPage);
+
+@Component({
+  selector: 'ion-app'
+})
+@IonicView({
+  template: '<ion-nav [root]="rootView"></ion-nav>'
+})
+class IonicApp {
+  constructor() {
+    this.rootView = SplashPage;
+  }
+}
+
+export function main(ionicBootstrap) {
+  ionicBootstrap(IonicApp);
 }
 
diff --git a/ionic/components/app/test/hn/index.js b/ionic/components/app/test/hn/index.js
index e74dfe5633..efe2a3f5f7 100644
--- a/ionic/components/app/test/hn/index.js
+++ b/ionic/components/app/test/hn/index.js
@@ -1,20 +1,15 @@
-import {NgFor} from 'angular2/angular2';
-import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component} from 'angular2/src/core/annotations_impl/annotations';
 
-import {NavController, NavbarTemplate, Navbar, Content, List, Item} from 'ionic/ionic';
+import {NavController, IonicView} from 'ionic/ionic';
 
 import {HackerNews} from './hn';
 import {HNSinglePost} from './pages/single';
 
 
-console.log('Angular directives', NgFor, Content, List, Item);
-
 @Component({
   selector: 'story'
 })
-@View({
+@IonicView({
   template: '<div class="hn-story"><content></content></div>'
 })
 export class Story {
@@ -26,9 +21,8 @@ export class Story {
 @Component({
   selector: 'ion-view'
 })
-@View({
-  templateUrl: './pages/top.html',
-  directives: [NavbarTemplate, Navbar, Content, NgFor, List, Story, Item]
+@IonicView({
+  templateUrl: './pages/top.html'
 })
 class HNTopStories {
   constructor(
@@ -92,6 +86,19 @@ class HNTopStories {
   */
 }
 
-export function main(ionicBootstrap) {
-  ionicBootstrap(HNTopStories);
+
+@Component({
+  selector: 'ion-app'
+})
+@IonicView({
+  template: '<ion-nav [root]="rootView"></ion-nav>'
+})
+class IonicApp {
+  constructor() {
+    this.rootView = HNTopStories;
+  }
+}
+
+export function main(ionicBootstrap) {
+  ionicBootstrap(IonicApp);
 }
diff --git a/ionic/components/app/test/music/index.js b/ionic/components/app/test/music/index.js
index 21e9e517a4..f037a40794 100644
--- a/ionic/components/app/test/music/index.js
+++ b/ionic/components/app/test/music/index.js
@@ -1,4 +1,3 @@
-//import {Router} from 'ionic/routing/router'
 import {ElementRef, For, Parent} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
@@ -7,16 +6,14 @@ import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/fo
 import {Log} from 'ionic/util'
 
 import {
-  Router, Routable, List, Item, HeaderTemplate, Nav, NavController,
-  Toolbar, Input, Tabs,
-  Tab, Content, Aside
+  Router, Routable, NavController,
+  IonicView
 } from 'ionic/ionic'
 
 
 @Component({selector: 'ion-view'})
-@View({
-  templateUrl: 'pages/app.html',
-  directives: [Nav, List, Item, Content, HeaderTemplate, Toolbar]
+@IonicView({
+  templateUrl: 'pages/app.html'
 })
 class AppPage {
   constructor(nav: NavController) {
@@ -30,14 +27,14 @@ class AppPage {
 /**
  * Main app entry point
  */
-@Component({ selector: 'ion-view' })
-@View({
-  directives: [Nav, Aside, List, Item, ParallaxEffect],
+@Component({ selector: 'ion-app' })
+@IonicView({
+  directives: [ParallaxEffect],
   templateUrl: 'main.html'
 })
 class IonicApp {
   constructor() {
-    this.firstPage = AppPage
+    this.rootView = AppPage
 
     this.menuOpenAmount = 0;
 
diff --git a/ionic/components/app/test/music/main.html b/ionic/components/app/test/music/main.html
index 49a0c23e9c..0634169020 100644
--- a/ionic/components/app/test/music/main.html
+++ b/ionic/components/app/test/music/main.html
@@ -23,8 +23,7 @@
     </ion-list>
   </ion-aside>
 
-  <ion-nav #content [initial]="firstPage">
-  </ion-nav>
+  <ion-nav #content [root]="rootView"></ion-nav>
 
   <style>
     ion-view {
diff --git a/ionic/components/app/test/profile/index.js b/ionic/components/app/test/profile/index.js
index 99a07da2e4..bbb8039057 100644
--- a/ionic/components/app/test/profile/index.js
+++ b/ionic/components/app/test/profile/index.js
@@ -1,18 +1,17 @@
 import {bind, Injector} from 'angular2/di';
 import {bootstrap, ElementRef, NgFor} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
 import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
 
-import {Modal, ModalRef, Nav, Segment, Animation,
-  SegmentButton, Slides, Slide, Content, List, Item} from 'ionic/ionic';
-import {NavController, NavbarTemplate, NavParams, Navbar} from 'ionic/ionic';
+import {Modal, Animation, Content} from 'ionic/ionic';
+import {NavController, NavParams, IonicView} from 'ionic/ionic';
 import {dom} from 'ionic/util';
 
-@Component({ selector: 'ion-view' })
-@View({
+
+@Component({ selector: 'ion-app' })
+@IonicView({
   templateUrl: 'main.html',
-  directives: [formDirectives, Nav, Slides, Slide, Content, List, Item, NgFor, ParallaxEffect]
+  directives: [ParallaxEffect]
 })
 class IonicApp {
   constructor() {
diff --git a/ionic/components/app/test/sink/index.js b/ionic/components/app/test/sink/index.js
index bde66e9807..3e7d72e68e 100644
--- a/ionic/components/app/test/sink/index.js
+++ b/ionic/components/app/test/sink/index.js
@@ -1,10 +1,6 @@
-import {QueryList, ElementRef, NgFor, NgIf} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {Descendant} from 'angular2/src/core/annotations_impl/visibility';
-import {View} from 'angular2/src/core/annotations_impl/view';
-import {Query} from 'angular2/src/core/annotations_impl/di';
 
-import {Ionic, Nav, ViewContainer, Aside, List, Item, Content} from 'ionic/ionic';
+import {IonicView} from 'ionic/ionic';
 
 import {ButtonPage} from './pages/button'
 import {NavPage} from './pages/nav'
@@ -21,17 +17,15 @@ import {SlidePage} from './pages/slides'
 import {ActionMenuPage} from './pages/action-menu'
 import {ModalPage} from './pages/modal'
 
-console.log('Loaded', Nav, NgFor, NgIf, Aside, List, Item, Content);
 
 @Component({
-  selector: 'ion-view',
+  selector: 'ion-app',
 })
-@View({
-  templateUrl: 'main.html',
-  directives: [Nav, NgFor, NgIf, Aside, List, Item, Content]
+@IonicView({
+  templateUrl: 'main.html'
 })
 class IonicApp {
-  constructor(elementRef: ElementRef) {//, @Query(Aside) nav: QueryList) {//, @Descendant() aside: Aside) {
+  constructor() {
     this.components = [
       { title: 'Navigation', component: NavPage },
       { title: 'Buttons', component: ButtonPage },
@@ -49,7 +43,7 @@ class IonicApp {
       { title: 'Modal', component: ModalPage }
     ];
 
-    this.firstPage = ButtonPage
+    this.rootView = ButtonPage
   }
 
   openPage(aside, component) {
diff --git a/ionic/components/app/test/sink/main.html b/ionic/components/app/test/sink/main.html
index 48f3b46c6b..0b5e90b8b3 100644
--- a/ionic/components/app/test/sink/main.html
+++ b/ionic/components/app/test/sink/main.html
@@ -11,7 +11,7 @@
   </ion-content>
 </ion-aside>
 
-<ion-nav #content [initial]="firstPage"></ion-nav>
+<ion-nav #content [root]="rootView"></ion-nav>
 
 <style>
 my-modal {
diff --git a/ionic/components/app/test/snapcat/index.js b/ionic/components/app/test/snapcat/index.js
index 73fa8adbe8..146b2d2cb8 100644
--- a/ionic/components/app/test/snapcat/index.js
+++ b/ionic/components/app/test/snapcat/index.js
@@ -1,39 +1,9 @@
-import {DynamicComponentLoader, ElementRef, ComponentRef, onDestroy, DomRenderer} from 'angular2/angular2';
-import {bind, Injector} from 'angular2/di';
-import {bootstrap, NgFor} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
 import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
 
 import {IonicView, Animation, Modal, NavController, IonicComponent} from 'ionic/ionic';
 
 
-class FadeIn extends Animation {
-  constructor(element) {
-    super(element);
-    this
-      .easing('ease')
-      .duration(250)
-      .fadeIn()
-      .before.addClass('show-modal');
-  }
-}
-
-Animation.register('my-fade-in', FadeIn);
-
-class FadeOut extends Animation {
-  constructor(element) {
-    super(element);
-    this
-      .easing('ease')
-      .duration(250)
-      .fadeOut()
-      .after.removeClass('show-modal');
-  }
-}
-
-Animation.register('my-fade-out', FadeOut);
-
 @Component({ selector: 'ion-view' })
 @IonicView({
   templateUrl: 'detail.html'
@@ -94,20 +64,23 @@ export class FeedPage {
   }
 }
 
-@Component({ selector: 'ion-view' })
+@Component({
+  selector: 'ion-app',
+  appInjector: [Modal]
+})
 @IonicView({
   templateUrl: 'main.html'
 })
 class IonicApp {
-  constructor() {
-    this.feedPage = FeedPage;
-    console.log('IonicApp Start');
+  constructor(Modal: Modal) {
+    this.Modal = Modal;
+    this.rootView = FeedPage;
   }
 
   openHeart() {
     console.log('openHeart');
 
-    Modal.open(HeartModal, {
+    this.Modal.open(HeartModal, {
       enterAnimation: 'my-fade-in',
       leaveAnimation: 'my-fade-out'
     });
@@ -116,7 +89,7 @@ class IonicApp {
   openGear() {
     console.log('openGear');
 
-    Modal.open(SettingsModal, {
+    this.Modal.open(SettingsModal, {
       enterAnimation: 'my-fade-in',
       leaveAnimation: 'my-fade-out'
     });
@@ -140,3 +113,30 @@ export class HeartModal extends Modal {}
 export function main(ionicBootstrap) {
   ionicBootstrap(IonicApp);
 }
+
+
+class FadeIn extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('ease')
+      .duration(250)
+      .fadeIn()
+      .before.addClass('show-modal');
+  }
+}
+
+Animation.register('my-fade-in', FadeIn);
+
+class FadeOut extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('ease')
+      .duration(250)
+      .fadeOut()
+      .after.removeClass('show-modal');
+  }
+}
+
+Animation.register('my-fade-out', FadeOut);
diff --git a/ionic/components/app/test/snapcat/main.html b/ionic/components/app/test/snapcat/main.html
index 3f399c38ec..184caa5b7e 100644
--- a/ionic/components/app/test/snapcat/main.html
+++ b/ionic/components/app/test/snapcat/main.html
@@ -29,7 +29,7 @@
 
   <ion-slide>
 
-    <ion-nav [initial]="feedPage"></ion-nav>
+    <ion-nav [root]="rootView"></ion-nav>
 
     </ion-view>
   </ion-slide>
diff --git a/ionic/components/app/test/typography/index.js b/ionic/components/app/test/typography/index.js
index b4bca59a5c..59be4e13f7 100644
--- a/ionic/components/app/test/typography/index.js
+++ b/ionic/components/app/test/typography/index.js
@@ -1,16 +1,12 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Component} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 
-@Component({ selector: 'ion-view' })
+@Component({ selector: 'ion-app' })
 @View({
   templateUrl: 'main.html'
 })
-class IonicApp {
-  constructor() {
-    console.log('IonicApp Start')
-  }
-}
+class IonicApp {}
 
 export function main(ionicBootstrap) {
   ionicBootstrap(IonicApp);
diff --git a/ionic/components/app/test/yerk/index.js b/ionic/components/app/test/yerk/index.js
index 9f0bdfab5c..ca42a5e898 100644
--- a/ionic/components/app/test/yerk/index.js
+++ b/ionic/components/app/test/yerk/index.js
@@ -1,21 +1,13 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component} from 'angular2/src/core/annotations_impl/annotations';
 
-import {Tabs, Tab, Content} from 'ionic/ionic'
-import {Engine} from 'ionic/engine/engine'
-import * as util from 'ionic/util'
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-app' })
-@View({
-  templateUrl: 'main.html',
-  directives: [Tabs, Tab, Content]
+@IonicView({
+  templateUrl: 'main.html'
 })
-class IonicApp {
-  constructor() {
-    console.log('IonicApp Start');
-  }
-}
+class IonicApp {}
 
 export function main(ionicBootstrap) {
   ionicBootstrap(IonicApp);