IonicComponent not required for views

ionic/components.ts

@@ -1,7 +1,6 @@
-// DON'T reference this file in the source. Only in demos.
+
 export * from 'ionic/components/app/app'
 export * from 'ionic/components/action-menu/action-menu'
-// export * from 'ionic/components/alert/alert'
 export * from 'ionic/components/aside/aside'
 export * from 'ionic/components/checkbox/checkbox'
 export * from 'ionic/components/content/content'
@@ -11,7 +10,6 @@ export * from 'ionic/components/item/item-group'
 export * from 'ionic/components/form/form'
 export * from 'ionic/components/form/input/input'
 export * from 'ionic/components/form/label/label'
-// export * from 'ionic/components/layout/layout'
 export * from 'ionic/components/list/list'
 export * from 'ionic/components/modal/modal'
 export * from 'ionic/components/nav/nav'
@@ -23,10 +21,8 @@ export * from 'ionic/components/radio/radio'
 export * from 'ionic/components/scroll/scroll'
 export * from 'ionic/components/scroll/pull-to-refresh'
 export * from 'ionic/components/search-bar/search-bar'
-// export * from 'ionic/components/split-view/split-view'
 export * from 'ionic/components/segment/segment'
 export * from 'ionic/components/switch/switch'
-export * from 'ionic/components/view/view'
 export * from 'ionic/components/tabs/tabs'
 export * from 'ionic/components/tabs/tab'
 export * from 'ionic/components/toolbar/toolbar'

ionic/components/app/test/barkpark/index.ts

@@ -1,12 +1,9 @@
-import {Component, View, Directive} from 'angular2/angular2';
-
 import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
 import {Log} from 'ionic/util'
 
 import {App, IonicView, NavController} from 'ionic/ionic'
 
 
-@Component({selector: 'ion-view'})
 @IonicView({
   templateUrl: 'pages/login.html'
 })
@@ -37,7 +34,6 @@ class LoginPage {
 }
 
 
-@Component({selector: 'ion-view'})
 @IonicView({
   templateUrl: 'pages/signup.html'
 })
@@ -71,7 +67,6 @@ export class SignupPage {
 
 
 
-@Component({selector: 'ion-view'})
 @IonicView({
   templateUrl: 'pages/app.html'
 })
@@ -82,7 +77,6 @@ export class AppPage {
   }
 }
 
-@Component({selector: 'ion-view'})
 @IonicView({
   templateUrl: 'pages/tabs/home.html'
 })
@@ -104,7 +98,6 @@ class StreamTab {
   }
 }
 
-@Component({selector: 'ion-view'})
 @IonicView({
   templateUrl: 'pages/post/detail.html'
 })
@@ -118,7 +111,6 @@ class PostDetail {
   }
 }
 
-@Component({selector: 'ion-view'})
 @IonicView({
   templateUrl: 'pages/splash.html'
 })

ionic/components/app/test/hn/index.ts

@@ -18,9 +18,6 @@ export class Story {
   }
 }
 
-@Component({
-  selector: 'ion-view'
-})
 @IonicView({
   templateUrl: './pages/top.html'
 })

ionic/components/app/test/hn/pages/single.ts

@@ -1,14 +1,10 @@
-import {Component, View, NgFor} from 'angular2/angular2';
+import {IonicView, NavController, NavParams} from 'ionic/ionic';
-
-import {NavController, NavParams, NavbarTemplate, Navbar, Content, Nav, List, Item} from 'ionic/ionic';
 
 import {HackerNews} from '../hn'
 
 
-@Component({ selector: 'ion-view' })
+@IonicView({
-@View({
+  templateUrl: 'pages/single.html'
-  templateUrl: 'pages/single.html',
-  directives: [NavbarTemplate, Navbar, Content, NgFor, List, Item]
 })
 export class HNSinglePost {
   constructor(

ionic/components/app/test/music/index.ts

@@ -1,10 +1,9 @@
-import {Component, Directive, ElementRef} from 'angular2/angular2';
+import {Directive, ElementRef} from 'angular2/angular2';
 import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
 
 import {App, NavController, IonicView} from 'ionic/ionic';
 
 
-@Component({selector: 'ion-view'})
 @IonicView({
   templateUrl: 'pages/app.html'
 })

ionic/components/app/test/sink/pages/action-menu.ts

@@ -1,17 +1,12 @@
-import {Component, Directive, View} from 'angular2/angular2';
+import {IonicApp, IonicView, NavController, ActionMenu} from 'ionic/ionic';
-
-import {IonicApp, ActionMenu, NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 import {SinkPage} from '../sink-page';
 
-@Component({
+
-  selector: 'ion-view'
+@IonicView({
-})
-@View({
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Action Menu</ion-title></ion-navbar>
 
-
   <ion-content class="padding">
     <h2>Action Menu</h2>
     <p>
@@ -24,8 +19,7 @@ import {SinkPage} from '../sink-page';
     </p>
     <button primary (click)="openMenu()">Open Menu</button>
   </ion-content>
-  `,
+  `
-  directives: [NavbarTemplate, Navbar, Content]
 })
 export class ActionMenuPage extends SinkPage {
   constructor(app: IonicApp, nav: NavController, actionMenu: ActionMenu) {

ionic/components/app/test/sink/pages/animation.ts

@@ -1,20 +1,15 @@
-import {Component, Directive, View} from 'angular2/angular2';
+import {IonicView, Animation, IonicApp} from 'ionic/ionic';
-
-import {Animation, IonicApp, List, Item, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 import {SinkPage} from '../sink-page';
 
+
 let opacity = 0.2;
 let rotateZ = '180deg';
 let translateX = '100px';
 let scale = 0.6;
 
 
-@Component({
+@IonicView({
-  selector: 'ion-view'
-})
-@View({
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Animation</ion-title></ion-navbar>
 
@@ -35,7 +30,6 @@ let scale = 0.6;
     }
   </style>
 
-
   <ion-content class="padding">
     <h2>Animation</h2>
     <p>
@@ -72,8 +66,7 @@ let scale = 0.6;
     </p>
 
   </ion-content>
-  `,
+  `
-  directives: [NavbarTemplate, Navbar, Content, List, Item]
 })
 export class AnimationPage extends SinkPage {
   constructor(app: IonicApp) {

ionic/components/app/test/sink/pages/aside.ts

@@ -1,14 +1,9 @@
-import {Component, Directive, View} from 'angular2/angular2';
+import {IonicApp, IonicView} from 'ionic/ionic';
-
-import {IonicApp, List, Item, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 import {SinkPage} from '../sink-page';
 
-@Component({
+
-  selector: 'ion-view'
+@IonicView({
-})
-@View({
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Aside</ion-title></ion-navbar>
 
@@ -29,8 +24,7 @@ import {SinkPage} from '../sink-page';
       <button primary (click)="toggleMenu()">Toggle</button>
     </p>
   </ion-content>
-  `,
+  `
-  directives: [NavbarTemplate, Navbar, Content, List, Item]
 })
 export class AsidePage extends SinkPage {
   constructor(app: IonicApp) {

ionic/components/app/test/sink/pages/button.ts

@@ -1,17 +1,12 @@
-import {Component, View, NgIf} from 'angular2/angular2';
+import {IonicApp, IonicView, NavController} from 'ionic/ionic';
-
-import {IonicApp, Routable, NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 import {SinkPage} from '../sink-page';
 
-@Component({
+
-  selector: 'ion-view'
+@IonicView({
-})
-@View({
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Buttons</ion-title></ion-navbar>
 
-
   <ion-content class="padding">
 
     <h2>Buttons</h2>
@@ -57,8 +52,7 @@ import {SinkPage} from '../sink-page';
       </div>
     </p>
   </ion-content>
-  `,
+  `
-  directives: [NavbarTemplate, Navbar, Content, NgIf]
 })
 export class ButtonPage extends SinkPage {
   constructor(app: IonicApp, nav: NavController) {
@@ -78,7 +72,3 @@ export class ButtonPage extends SinkPage {
 
 }
 
-new Routable(ButtonPage, {
-  url: '/components/button',
-  tag: 'button'
-})

ionic/components/app/test/sink/pages/card.ts

@@ -1,14 +1,9 @@
-import {Component, Directive, View} from 'angular2/angular2';
+import {IonicApp, IonicView} from 'ionic/ionic';
-
-import {IonicApp, List, Item, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 import {SinkPage} from '../sink-page';
 
-@Component({
+
-  selector: 'ion-view'
+@IonicView({
-})
-@View({
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Cards</ion-title></ion-navbar>
 
@@ -20,7 +15,7 @@ import {SinkPage} from '../sink-page';
     </p>
     <p>
       Cards are great for displaying contextual information in a small space,
-      like a Tweet, today's weather report, or a photo.
+      like a Tweet, todays weather report, or a photo.
     </p>
     <div class="card">
 
@@ -48,8 +43,7 @@ import {SinkPage} from '../sink-page';
 
     </div>
   </ion-content>
-  `,
+  `
-  directives: [NavbarTemplate, Navbar, Content, List, Item]
 })
 export class CardPage extends SinkPage {
   constructor(app: IonicApp) {

ionic/components/app/test/sink/pages/form.ts

@@ -1,16 +1,11 @@
-import {Component, Directive, View} from 'angular2/angular2';
+import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/angular2';
 
-import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
+import {IonicApp, IonicView} from 'ionic/ionic';
-
-import {IonicApp, List, Item, Input, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 import {SinkPage} from '../sink-page';
 
-@Component({
+
-  selector: 'ion-view'
+@IonicView({
-})
-@View({
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Form</ion-title></ion-navbar>
 
@@ -34,8 +29,7 @@ import {SinkPage} from '../sink-page';
       <button ion-button primary block type="submit">Submit</button>
     </form>
   </ion-content>
-  `,
+  `
-  directives: [formDirectives, NavbarTemplate, Navbar, Content, List, Item, Input]
 })
 export class FormPage extends SinkPage {
   constructor(app: IonicApp) {

ionic/components/app/test/sink/pages/ionicons.ts

@@ -1,14 +1,9 @@
-import {Component, Directive, View} from 'angular2/angular2';
+import {IonicApp, IonicView} from 'ionic/ionic';
-
-import {IonicApp, List, Item, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 import {SinkPage} from '../sink-page';
 
-@Component({
+
-  selector: 'ion-view'
+@IonicView({
-})
-@View({
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Icons</ion-title></ion-navbar>
 
@@ -26,8 +21,7 @@ import {SinkPage} from '../sink-page';
       <img src="http://ionic-io-assets.s3.amazonaws.com/v2/ionicons.png" style="max-width: 100%">
     </div>
   </ion-content>
-  `,
+  `
-  directives: [NavbarTemplate, Navbar, Content, List, Item]
 })
 export class IconsPage extends SinkPage {
   constructor(app: IonicApp) {

ionic/components/app/test/sink/pages/list-group.ts

@@ -1,14 +1,9 @@
-import {NgFor, Component, Directive, View} from 'angular2/angular2';
+import {IonicApp, IonicView} from 'ionic/ionic';
-
-import {IonicApp, List, Item, ItemGroup, ItemGroupTitle, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 import {SinkPage} from '../sink-page';
 
-@Component({
+
-  selector: 'ion-view'
+@IonicView({
-})
-@View({
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>List Groups</ion-title></ion-navbar>
 
@@ -23,8 +18,7 @@ import {SinkPage} from '../sink-page';
 
     </ion-list>
   </ion-content>
-  `,
+  `
-  directives: [NavbarTemplate, Navbar, Content, List, Item, ItemGroup, ItemGroupTitle, NgFor]
 })
 export class ListGroupPage extends SinkPage {
   constructor(app: IonicApp) {

ionic/components/app/test/sink/pages/list.ts

@@ -1,14 +1,9 @@
-import {Component, Directive, View} from 'angular2/angular2';
+import {IonicApp, IonicView} from 'ionic/ionic';
-
-import {IonicApp, List, Item, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 import {SinkPage} from '../sink-page';
 
-@Component({
+
-  selector: 'ion-view'
+@IonicView({
-})
-@View({
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Lists</ion-title></ion-navbar>
 
@@ -42,8 +37,7 @@ import {SinkPage} from '../sink-page';
       </div>
     </ion-list>
   </ion-content>
-  `,
+  `
-  directives: [NavbarTemplate, Navbar, Content, List, Item]
 })
 export class ListPage extends SinkPage {
   constructor(app: IonicApp) {

ionic/components/app/test/sink/pages/modal.ts

@@ -1,13 +1,8 @@
-import {Component, Directive, View} from 'angular2/angular2';
+import {IonicApp, IonicView, Modal} from 'ionic/ionic';
-
-import {IonicApp, IonicView, ActionMenu, Modal,
-  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 import {SinkPage} from '../sink-page';
 
-@Component({
+
-  selector: 'ion-view'
-})
 @IonicView({
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Modal</ion-title></ion-navbar>

ionic/components/app/test/sink/pages/nav.ts

@@ -1,13 +1,7 @@
-import {Component, Directive, View} from 'angular2/angular2';
+import {IonicView, NavController} from 'ionic/ionic';
-
-import {List, Item, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 
-@Component({
+@IonicView({
-  selector: 'ion-view'
-})
-@View({
   template: `
   <ion-navbar *navbar><ion-title>Cards</ion-title></ion-navbar>
 
@@ -23,8 +17,7 @@ import {List, Item, ActionMenu, Modal, ModalRef,
     </p>
     <button primary (click)="push()">Push</button>
   </ion-content>
-  `,
+  `
-  directives: [NavbarTemplate, Navbar, Content, List, Item]
 })
 export class NavPage {
   constructor(nav: NavController) {
@@ -35,22 +28,17 @@ export class NavPage {
   }
 }
 
-@Component({selector: 'ion-view'})
+
-@View({
+@IonicView({
   template: `
     <ion-navbar *navbar><ion-title>Second Page</ion-title></ion-navbar>
-  <ion-content padding>
+    <ion-content class="padding">
-    <button primary (click)="pop()">Pop</button>
+      <button primary (click)="nav.pop()">Pop</button>
     </ion-content>
-  `,
+  `
-  directives: [NavbarTemplate, Navbar, Content]
 })
 export class NavSecondPage {
   constructor(nav: NavController) {
     this.nav = nav;
   }
-
-  pop() {
-    this.nav.pop();
-  }
 }

ionic/components/app/test/sink/pages/pull-to-refresh.ts

@@ -1,14 +1,9 @@
-import {NgFor, Component, Directive, View} from 'angular2/angular2';
+import {IonicApp, IonicView} from 'ionic/ionic';
-
-import {IonicApp, List, Item, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Content, Refresher} from 'ionic/ionic';
 
 import {SinkPage} from '../sink-page';
 
-@Component({
+
-  selector: 'ion-view'
+@IonicView({
-})
-@View({
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Pull to Refresh</ion-title></ion-navbar>
 
@@ -21,8 +16,7 @@ import {SinkPage} from '../sink-page';
       </ion-item>
     </ion-list>
   </ion-content>
-  `,
+  `
-  directives: [NgFor, NavbarTemplate, Navbar, Content, List, Item, Refresher]
 })
 export class PullToRefreshPage extends SinkPage {
   constructor(app: IonicApp) {

ionic/components/app/test/sink/pages/search-bar.ts

@@ -1,16 +1,16 @@
-import {Component, Directive, View} from 'angular2/angular2';
+import {Component} from 'angular2/angular2';
 import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
 
-import {IonicApp, Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalRef,
+import {IonicApp, IonicView} from 'ionic/ionic';
-  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 import {SinkPage} from '../sink-page';
 
+
 @Component({
   selector: 'ion-view',
   appInjector: [FormBuilder]
 })
-@View({
+@IonicView({
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Search Bar</ion-title></ion-navbar>
 
@@ -31,8 +31,7 @@ import {SinkPage} from '../sink-page';
       </div>
     </form>
   </ion-content>
-  `,
+  `
-  directives: [formDirectives, NavbarTemplate, Navbar, Content, SearchBar]
 })
 export class SearchBarPage extends SinkPage {
   constructor(app: IonicApp, formBuilder: FormBuilder) {

ionic/components/app/test/sink/pages/segment.ts

@@ -1,13 +1,8 @@
-import {NgFor, Injector, DomRenderer, ElementRef, Ancestor} from 'angular2/angular2';
+import {FormBuilder, Validators, formDirectives, Control, ControlGroup} from 'angular2/angular2';
-import {Component, Directive, View} from 'angular2/angular2';
+
-import {FormBuilder, Validators, formDirectives, Control, ControlGroup} from 'angular2/forms';
+import {IonicView} from 'ionic/ionic';
 
-import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Content, IonicView} from 'ionic/ionic';
 
-@Component({
-  selector: 'ion-view'
-})
 @IonicView({
   template: `
   <ion-navbar *navbar><ion-title>Segment</ion-title></ion-navbar>
@@ -55,8 +50,7 @@ import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
       </div>
     </div>
   </ion-content>
-  `,
+  `
-  directives: [formDirectives]
 })
 export class SegmentPage {
   constructor() {

ionic/components/app/test/sink/pages/slides.ts

@@ -1,14 +1,9 @@
-import {Component, Directive, View} from 'angular2/angular2';
+import {IonicApp, IonicView} from 'ionic/ionic';
-
-import {IonicApp, Slides, Slide, SlidePager, List, Item, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 import {SinkPage} from '../sink-page';
 
-@Component({
+
-  selector: 'ion-view'
+@IonicView({
-})
-@View({
   template: `
   <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Slides</ion-title></ion-navbar>
 
@@ -41,8 +36,7 @@ import {SinkPage} from '../sink-page';
       </ion-pager>
     </ion-slides>
   </ion-content>
-  `,
+  `
-  directives: [NavbarTemplate, Navbar, Content, Slides, Slide, SlidePager]
 })
 export class SlidePage extends SinkPage {
   constructor(app: IonicApp) {

ionic/components/app/test/sink/pages/table-search.ts

@@ -1,9 +1,7 @@
-import {NgFor, Injector} from 'angular2/angular2';
+import {Component} from 'angular2/angular2';
-import {Component, Directive, View} from 'angular2/angular2';
 import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
 
-import {Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalRef,
+import {IonicView} from 'ionic/ionic';
-  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 
 function randomTitle() {
@@ -15,7 +13,7 @@ function randomTitle() {
   selector: 'ion-view',
   appInjector: [FormBuilder]
 })
-@View({
+@IonicView({
   template: `
   <ion-navbar *navbar><ion-title>Table Search</ion-title></ion-navbar>
 
@@ -26,14 +24,13 @@ function randomTitle() {
 
       <ion-list #list>
 
-        <ion-item *ng-for="#item of getItems()"><!--items | search:form.controls.searchControl.value">-->
+        <ion-item *ng-for="#item of getItems()"><!--items | search:form.controls.searchControl.value-->
           {{item.title}}
         </ion-item>
       </ion-list>
     </form>
   </ion-content>
-  `,
+  `
-  directives: [formDirectives].concat([Content, NavbarTemplate, Navbar, List, Item, SearchBar, NgFor])
 })
 export class TableSearchPage {
   constructor(formBuilder: FormBuilder) {
@@ -43,16 +40,16 @@ export class TableSearchPage {
       searchQuery: ['', Validators.required]
     });
 
-
     this.query = 'HELLO';
 
-    this.items = []
+    this.items = [];
     for(let i = 0; i < 100; i++) {
       this.items.push({
         title: randomTitle()
       })
     }
   }
+
   getItems() {
     var q = this.form.controls.searchQuery.value;
     if(q.trim() == '') {

ionic/components/app/test/sink/pages/tabs.ts

@@ -1,11 +1,10 @@
-import {Component, Directive, View} from 'angular2/angular2';
 import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
 
-import {IonicApp, IonicView, Tabs, Tab, NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
+import {IonicApp, IonicView, NavController} from 'ionic/ionic';
 
 import {SinkPage} from '../sink-page';
 
-@Component({selector: 'ion-view'})
+
 @IonicView({
   template: '' +
     '<ion-navbar *navbar>' +
@@ -19,7 +18,7 @@ class FeaturedTabPage {
     this.nav = nav;
   }
 }
-@Component({selector: 'ion-view'})
+
 @IonicView({
   template: '' +
     '<ion-navbar *navbar>' +
@@ -34,10 +33,7 @@ class TopTabPage {
   }
 }
 
-@Component({
+@IonicView({
-  selector: 'ion-view'
-})
-@View({
   template: `
     <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Tabs</ion-title></ion-navbar>
 
@@ -51,8 +47,7 @@ class TopTabPage {
         <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Updates</ion-title></ion-navbar>
       </ion-tab>
     </ion-tabs>
-  `,
+  `
-  directives: [NavbarTemplate, Navbar, Content, Tabs, Tab]
 })
 export class TabsPage extends SinkPage {
   constructor(app: IonicApp) {

ionic/components/app/test/snapcat/index.ts

@@ -1,10 +1,8 @@
-import {Component, Directive} from 'angular2/angular2';
 import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
 
 import {App, IonicView, Animation, Modal, NavController, NavParams} from 'ionic/ionic';
 
 
-@Component({ selector: 'ion-view' })
 @IonicView({
   templateUrl: 'detail.html'
 })
@@ -14,7 +12,6 @@ export class DetailPage {
   }
 }
 
-@Component({ selector: 'ion-view' })
 @IonicView({
   templateUrl: 'feed.html'
 })

ionic/components/app/test/yerk/index.ts

@@ -1,5 +1,3 @@
-import {Component} from 'angular2/angular2';
-
 import {App, IonicView, NavController} from 'ionic/ionic';
 
 
@@ -12,7 +10,7 @@ class IonicApp {
   }
 }
 
-@Component({selector: 'ion-view'})
+
 @IonicView({
   template: '' +
     '<ion-navbar *navbar>' +
@@ -30,7 +28,6 @@ class HomeTabPage {
   }
 }
 
-@Component({selector: 'ion-view'})
 @IonicView({
   template: '' +
     '<ion-navbar *navbar>' +
@@ -49,7 +46,6 @@ class PeekTabPage {
 }
 
 
-@Component({selector: 'ion-view'})
 @IonicView({
   templateUrl: 'tabs.html'
 })

ionic/components/item/test/basic/index.ts

@@ -0,0 +1,11 @@
+import {App} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class IonicApp {
+  constructor() {
+    this.items = [1, 2, 3, 4, 5]
+  }
+}

ionic/components/modal/test/basic/index.ts

@@ -1,7 +1,5 @@
-import {Component} from 'angular2/angular2';
+import {App, IonicView, IonicApp, IonicConfig, Platform} from 'ionic/ionic';
-
+import {Modal, ActionMenu, NavController, NavParams, Animation} from 'ionic/ionic';
-import {App, IonicComponent, IonicView, IonicApp, IonicConfig, Platform} from 'ionic/ionic';
-import {Modal, NavController, NavParams, Animation, ActionMenu} from 'ionic/ionic';
 
 
 @App({
@@ -53,9 +51,6 @@ export class ContactModal {
 }
 
 
-@Component({
-  selector: 'ion-view'
-})
 @IonicView({
   template: `
     <ion-navbar *navbar><ion-title>First Page Header: {{ val }}</ion-title><ion-nav-items primary><button primary (click)="closeModal()">Close</button></ion-nav-items></ion-navbar>
@@ -127,7 +122,7 @@ export class ModalFirstPage {
   }
 }
 
-@Component({selector: 'ion-view'})
+
 @IonicView({
   template: `
     <ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>

ionic/components/nav/test/basic/index.ts

@@ -2,7 +2,7 @@ import {App} from 'ionic/ionic';
 
 
 @App({
-  router: {
+  routes: {
     'FirstPage': {
       'path': '/firstpage',
       'module': 'dist/examples/nav/basic/pages/first-page',

ionic/components/nav/test/basic/pages/first-page.ts

@@ -1,13 +1,10 @@
-import {IonicComponent, IonicView, IonicConfig, IonicApp} from 'ionic/ionic';
+import {IonicView, IonicConfig, IonicApp} from 'ionic/ionic';
 import {NavParams, Routable, NavController} from 'ionic/ionic';
 
 import {SecondPage} from './second-page';
 import {ThirdPage} from './third-page';
 
 
-@IonicComponent({
-  selector: 'ion-view'
-})
 @IonicView({
   template: '' +
     '<ion-navbar *navbar>' +

ionic/components/nav/test/basic/pages/second-page.ts

@@ -1,14 +1,8 @@
-import {IonicComponent, IonicView, Routable, NavController, NavParams} from 'ionic/ionic';
+import {IonicView, Routable, NavController, NavParams} from 'ionic/ionic';
 import {ThirdPage} from './third-page';
 import {FirstPage} from './first-page';
 
 
-@IonicComponent({
-  selector: 'ion-view',
-  route: {
-    path: '/secondpage'
-  }
-})
 @IonicView({
   template: `
     <ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>

ionic/components/nav/test/basic/pages/third-page.ts

@@ -1,12 +1,6 @@
-import {IonicComponent, IonicView, Routable, NavController} from 'ionic/ionic';
+import {IonicView, Routable, NavController} from 'ionic/ionic';
 
 
-@IonicComponent({
-  selector: 'ion-view',
-  route: {
-    path: '/thirdpage'
-  }
-})
 @IonicView({
   template: `
     <ion-navbar *navbar><ion-title>Third Page Header</ion-title></ion-navbar>

ionic/components/overlay/overlay.ts

@@ -18,13 +18,14 @@ export class Overlay {
     return new Promise((resolve, reject) => {
       let app = this.app;
 
-      let annotation = new Component();
+      let annotation = new Component({
-      annotation.selector = 'ion-' + overlayType;
+        selector: 'ion-' + overlayType,
-      annotation.host = {
+        host: {
           '[style.z-index]': 'zIndex',
           'class': overlayType + ' ion-app',
           'mode': this.ionicConfig.setting('mode')
-      };
+        }
+      });
       let overlayComponent = DirectiveBinding.createFromType(ComponentType, annotation);
 
       app.appendComponent(overlayComponent, context).then(ref => {

ionic/components/tabs/tabs.scss

@@ -9,20 +9,6 @@ $tab-button-min-width:             80px !default;
 $tab-button-max-width:             160px !default;
 
 
-ion-tabs-view {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: white;
-
-  display: none;
-  &.show-view {
-    display: flex;
-  }
-}
-
 ion-tabs {
   display: flex;
   flex-direction: column;
@@ -48,7 +34,7 @@ ion-tab {
   flex-direction: column;
 
   display: none;
-  &.show-tab {
+  &.show-view {
     display: flex;
   }
 }

ionic/components/tabs/test/advanced/index.ts

@@ -3,7 +3,6 @@ import {Component} from 'angular2/angular2';
 import {App, IonicView, NavController} from 'ionic/ionic';
 
 
-@Component({selector: 'ion-view'})
 @IonicView({
   template: '' +
     '<ion-navbar *navbar>' +
@@ -25,10 +24,6 @@ class SignIn {
   }
 }
 
-
-@Component({
-  selector: 'ion-tabs-view'
-})
 @IonicView({
   templateUrl: './tabs.html'
 })
@@ -44,7 +39,6 @@ class TabsPage {
 //
 // tab 1
 //
-@Component({selector: 'ion-view'})
 @IonicView({
   template: '' +
     '<ion-navbar *navbar>' +
@@ -66,7 +60,7 @@ class Tab1Page1 {
   }
 }
 
-@Component({selector: 'ion-view'})
+
 @IonicView({
   template: '' +
     '<ion-navbar *navbar>' +
@@ -89,7 +83,7 @@ class Tab1Page2 {
   }
 }
 
-@Component({selector: 'ion-view'})
+
 @IonicView({
   template: '' +
     '<ion-navbar *navbar>' +
@@ -112,7 +106,6 @@ class Tab1Page3 {
 //
 // tab 2
 //
-@Component({selector: 'ion-view'})
 @IonicView({
   template: '' +
     '<ion-navbar *navbar>' +
@@ -134,7 +127,7 @@ class Tab2Page1 {
   }
 }
 
-@Component({selector: 'ion-view'})
+
 @IonicView({
   template: '' +
     '<ion-navbar *navbar>' +
@@ -157,7 +150,7 @@ class Tab2Page2 {
   }
 }
 
-@Component({selector: 'ion-view'})
+
 @IonicView({
   template: '' +
     '<ion-navbar *navbar>' +
@@ -177,10 +170,12 @@ class Tab2Page3 {
 
 
 @App({
-  template: '<ion-nav [root]="rootView"></ion-nav>'
+  routes: {
+    'SignIn': {
+      'path': '/signin',
+      'cls': SignIn,
+      'root': true
+    }
+  }
 })
-class IonicApp {
+class IonicApp {}
-  constructor() {
-    this.rootView = SignIn;
-  }
-}

ionic/components/view/view-item.ts

@@ -1,15 +1,14 @@
-import {EventEmitter} from 'angular2/angular2';
+import {Component, EventEmitter, ElementRef, bind} from 'angular2/angular2';
-import {ElementRef} from 'angular2/src/core/compiler/element_ref';
+import {DirectiveBinding} from 'angular2/src/core/compiler/element_injector';
-import {bind} from 'angular2/di';
 
 import {NavParams} from '../nav/nav-controller';
 
 
 export class ViewItem {
 
-  constructor(viewCtrl, ComponentType, params = {}) {
+  constructor(viewCtrl, cls, params = {}) {
     this.viewCtrl = viewCtrl;
-    this.ComponentType = ComponentType;
+    this.cls = cls;
     this.params = new NavParams(params);
     this.instance = null;
     this.state = 0;
@@ -32,8 +31,16 @@ export class ViewItem {
       return callback();
     }
 
+    let annotation = new Component({
+      selector: 'ion-view',
+      host: {
+        'class': 'nav-item'
+      }
+    });
+    let ionViewComponent = DirectiveBinding.createFromType(this.cls, annotation);
+
     // compile the Component
-    viewCtrl.compiler.compileInHost(this.ComponentType).then(componentProtoViewRef => {
+    viewCtrl.compiler.compileInHost(ionViewComponent).then(componentProtoViewRef => {
 
       // figure out the sturcture of this Component
       // does it have a navbar? Is it tabs? Should it not have a navbar or any toolbars?
@@ -178,10 +185,9 @@ export class ViewItem {
     }
   }
 
-  viewElement() {
+  viewElement(val) {
     if (arguments.length) {
-      this._vwEle = arguments[0];
+      this._vwEle = val;
-      this._vwEle && this._vwEle.classList.add('nav-item');
     }
     return this._vwEle;
   }

ionic/components/view/view.ts

@@ -1,15 +0,0 @@
-import {Directive, ElementRef, Optional} from 'angular2/angular2';
-
-import {ViewItem} from './view-item';
-import {Ion} from '../ion';
-
-
-@Directive({
-  selector: 'ion-view',
-})
-export class IonView extends Ion {
-  constructor(@Optional() item: ViewItem, elementRef: ElementRef) {
-    super(elementRef);
-    this.ele = elementRef.nativeElement;
-  }
-}

ionic/config/annotations.ts

@@ -146,7 +146,7 @@ export function App(args={}) {
     // redefine with added annotations
     Reflect.defineMetadata('annotations', annotations, cls);
 
-    ionicBootstrap(cls, args.config, args.router);
+    ionicBootstrap(cls, args.config, args.routes);
 
     return cls;
   }