IonicView / update tests

ionic/components/action-menu/test/basic/index.js

@@ -1,19 +1,16 @@
 import {Component} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Content} from 'ionic/ionic';
+import {IonicView} from 'ionic/ionic';
 import {ActionMenu} from 'ionic/components/action-menu/action-menu';
 
 
 @Component({ selector: 'ion-view' })
-@View({
-  templateUrl: 'main.html',
-  directives: [Content]
+@IonicView({
+  templateUrl: 'main.html'
 })
 class IonicApp {
 
   openMenu() {
-    console.log('Opening ActionMenu')
 
     ActionMenu.open({
       buttons: [
@@ -24,7 +21,6 @@ class IonicApp {
       titleText: 'Modify your album',
       cancelText: 'Cancel',
       cancel: function() {
-        // add cancel code..
         console.log('Canceled');
       },
       destructiveButtonClicked: () => {
@@ -37,7 +33,8 @@ class IonicApp {
       }
     }).then(actionMenu => {
       this.actionMenu = actionMenu;
-    })
+    });
+
   }
 
 }

ionic/components/alert/test/basic/index.js

@@ -1,13 +1,12 @@
 import {Component} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Alert} from 'ionic/components/alert/alert';
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-app' })
-@View({
-  templateUrl: 'main.html',
-  directives: [Alert]
+@IonicView({
+  templateUrl: 'main.html'
 })
 class IonicApp {
   constructor() {

ionic/components/alert/test/basic/main.html

@@ -1,5 +1,5 @@
 <ion-view>
-  <button (click)="showAlert()">Alert</button>
+  <button primary (click)="showAlert()">Alert</button>
   <!--
   <ion-alert>
 

ionic/components/aside/test/basic/index.js

@@ -1,14 +1,12 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Aside, List, Item, Content} from 'ionic/ionic';
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({
   selector: 'ion-view'
 })
-@View({
-  directives: [Aside, Content, List, Item],
+@IonicView({
   templateUrl: 'main.html'
 })
 class IonicApp {}

ionic/components/button/test/basic/index.js

@@ -1,9 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-view' })
-@View({
+@IonicView({
   templateUrl: 'main.html'
 })
 class IonicApp {}

ionic/components/button/test/block/index.js

@@ -1,9 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-view' })
-@View({
+@IonicView({
   templateUrl: 'main.html'
 })
 class IonicApp {}

ionic/components/button/test/clear/index.js

@@ -1,9 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-view' })
-@View({
+@IonicView({
   templateUrl: 'main.html'
 })
 class IonicApp {}

ionic/components/button/test/full/index.js

@@ -1,9 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-view' })
-@View({
+@IonicView({
   templateUrl: 'main.html'
 })
 class IonicApp {}

ionic/components/button/test/icons/index.js

@@ -1,9 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-view' })
-@View({
+@IonicView({
   templateUrl: 'main.html'
 })
 class IonicApp {}

ionic/components/button/test/outline/index.js

@@ -1,9 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-view' })
-@View({
+@IonicView({
   templateUrl: 'main.html'
 })
 class IonicApp {}

ionic/components/button/test/sizes/index.js

@@ -1,9 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-view' })
-@View({
+@IonicView({
   templateUrl: 'main.html'
 })
 class IonicApp {}

ionic/components/card/test/basic/index.js

@@ -1,14 +1,11 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Content} from 'ionic/components/content/content';
-import {List} from 'ionic/components/list/list';
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-view' })
-@View({
-  templateUrl: 'main.html',
-  directives: [Content, List]
+@IonicView({
+  templateUrl: 'main.html'
 })
 class IonicApp {}
 

ionic/components/checkbox/test/basic/index.js

@@ -1,14 +1,13 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
 import {FormBuilder, Validators, formDirectives} from 'angular2/forms';
-import {Checkbox, Content, List} from 'ionic/ionic';
-//import {IONIC_DIRECTIVES} from 'ionic/ionic'
+
+import {IonicView} from 'ionic/ionic';
+
 
 @Component({ selector: 'ion-view' })
-@View({
+@IonicView({
   templateUrl: 'main.html',
-  directives: [formDirectives].concat([Checkbox, List, Content])
+  directives: [formDirectives]
 })
 class IonicApp {
   constructor() {

ionic/components/content/test/basic/index.js

@@ -1,35 +0,0 @@
-import {NgFor} from 'angular2/angular2';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-import {Content} from 'ionic/components/content/content';
-import {Icon} from 'ionic/components/icon/icon';
-import {Checkbox} from 'ionic/components/checkbox/checkbox';
-import {List} from 'ionic/components/list/list';
-import {Item} from 'ionic/components/item/item';
-
-
-@Component({ selector: 'ion-view' })
-@View({
-  templateUrl: 'main.html',
-  directives: [Content, Icon, Checkbox, List, Item, NgFor]
-})
-class IonicApp {
-  constructor() {
-    console.log('IonicApp Start')
-
-    this.items = [];
-    for(let i = 0; i < 100; i++) {
-      this.items.push({
-        title: 'Item ' + i
-      });
-    }
-    setTimeout(() => {
-      console.log(this.items);
-    })
-  }
-}
-
-export function main(ionicBootstrap) {
-  ionicBootstrap(IonicApp);
-}

ionic/components/content/test/basic/main.html

@@ -1,29 +0,0 @@
-
-<ion-view nav-title="Content">
-
-  <ion-content>
-
-    <!--
-  <f></f>
-  <f></f>
-  <f></f>
-  <f></f>
-  <f></f>
--->
-    <b>Items: {{items.length}}</b>
-    <ion-list>
-      <ion-item *for="#item of items">
-        {{item.title}}
-      </ion-item>
-    </ion-list>
-
-  </ion-content>
-
-</ion-view>
-<style>
-  ion-content { background-color: black !important; }
-  .item { background: transparent !important; }
-  .item-content { background: transparent !important; }
-  .item-label { color: #fff; }
-  /*f { display: block; height: 400px; width: 100%; background-color: #387ef5; margin-bottom: 15px; }*/
-</style>

ionic/components/content/test/pull-to-refresh/index.js

@@ -1,15 +1,11 @@
-import {NgFor, ProtoViewRef, ViewContainerRef} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-import {Parent} from 'angular2/src/core/annotations_impl/visibility';
 
-import {Refresher, Content, List, Item} from 'ionic/ionic';
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-app' })
-@View({
-  templateUrl: 'main.html',
-  directives: [Content, List, Item, Refresher]
+@IonicView({
+  templateUrl: 'main.html'
 })
 class IonicApp {
   constructor() {

ionic/components/form/test/basic/index.js

@@ -3,14 +3,11 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 
 import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
 //import {Switch, Form, List, Label, Item, Input, Content} from 'ionic/ionic';
-import {IONIC_DIRECTIVES} from 'ionic/ionic'
 
-console.log([formDirectives].concat(IONIC_DIRECTIVES));
 
 @Component({ selector: 'ion-app' })
 @View({
-  templateUrl: 'main.html',
-  directives: [formDirectives].concat(IONIC_DIRECTIVES)
+  templateUrl: 'main.html'
 })
 class IonicApp {
   constructor() {

ionic/components/item/test/accessories/index.js

@@ -1,17 +1,13 @@
-import {NgFor} from 'angular2/angular2';
-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 {Item, List} from 'ionic/ionic';
-import {ItemPrimarySwipeButtons} from 'ionic/components/item/item-swipe-buttons'
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({
   selector: 'ion-view'
 })
-@View({
-  templateUrl: 'main.html',
-  directives: [Item, List, NgFor, ItemPrimarySwipeButtons]
+@IonicView({
+  templateUrl: 'main.html'
 })
 class IonicApp {
   constructor() {

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

@@ -1,17 +1,13 @@
-import {NgFor} from 'angular2/angular2';
-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 {Item, List} from 'ionic/ionic'
-import {ItemPrimarySwipeButtons} from 'ionic/components/item/item-swipe-buttons'
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({
   selector: 'ion-view'
 })
-@View({
-  templateUrl: 'main.html',
-  directives: [Item, List, NgFor, ItemPrimarySwipeButtons]
+@IonicView({
+  templateUrl: 'main.html'
 })
 class IonicApp {
   constructor() {

ionic/components/list/test/basic/index.js

@@ -1,16 +0,0 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-import {Content, List, Item} from 'ionic/ionic';
-
-
-@Component({ selector: 'ion-view' })
-@View({
-  templateUrl: 'main.html',
-  directives: [Content, List, Item]
-})
-class IonicApp {}
-
-export function main(ionicBootstrap) {
-  ionicBootstrap(IonicApp);
-}

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

@@ -4,28 +4,25 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
 import {View} from 'angular2/src/core/annotations_impl/view';
 import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 
-import {Content, List, Item, Modal, ModalRef} from 'ionic/ionic';
+import {IonicView} from 'ionic/ionic';
 
-import {Nav, IonicComponent} from 'ionic/ionic';
-import {NavController, NavParams, NavbarTemplate, Navbar} from 'ionic/ionic';
+import {IonicComponent} from 'ionic/ionic';
+import {Modal, NavController, NavParams} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-view' })
-@View({
-  templateUrl: 'main.html',
-  directives: [Content, List, Item]
+@IonicView({
+  templateUrl: 'main.html'
 })
 class IonicApp {
   openModal() {
-    console.log('Opening modal');
     Modal.open(ContactModal);
   }
 }
 
 @IonicComponent(Modal)
-@View({
-  template: '<ion-nav [initial]="initial"></ion-nav>',
-  directives: [Nav, Content]
+@IonicView({
+  template: '<ion-nav [initial]="initial"></ion-nav>'
 })
 export class ContactModal extends Modal {
   constructor() {
@@ -35,7 +32,7 @@ export class ContactModal extends Modal {
 }
 
 @Component({selector: 'ion-view'})
-@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>
 
@@ -51,15 +48,12 @@ export class ContactModal extends Modal {
       <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
 
     </ion-content>
-  `,
-  directives: [NavbarTemplate, Navbar, Content]
+  `
 })
 export class ModalFirstPage {
   constructor(
-    //@Parent() modal: ContactModal,
     nav: NavController
   ) {
-    //this.modal = modal;
     this.nav = nav;
     this.val = Math.round(Math.random() * 8999) + 1000;
   }
@@ -78,14 +72,14 @@ export class ModalFirstPage {
 }
 
 @Component({selector: 'ion-view'})
-@View({
+@IonicView({
   template: `
     <ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
 
     <ion-content class="padding">
 
       <p>
-        <button primary (click)="pop()">Pop (Go back to 1st)</button>
+        <button primary (click)="nav.pop()">Pop (Go back to 1st)</button>
       </p>
 
       <p>
@@ -96,8 +90,7 @@ export class ModalFirstPage {
       <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
 
     </ion-content>
-  `,
-  directives: [NavbarTemplate, Navbar, Content]
+  `
 })
 export class ModalSecondPage {
   constructor(
@@ -110,10 +103,6 @@ export class ModalSecondPage {
     console.log('Second page params:', params);
   }
 
-  pop() {
-    this.nav.pop();
-  }
-
   push() {
   }
 

ionic/components/nav-bar/test/html-title/index.js

@@ -1,11 +1,11 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-view' })
-@View({
-  templateUrl: 'main.html',
-  directives: []
+@IonicView({
+  templateUrl: 'main.html'
 })
 class IonicApp {}
 

ionic/components/nav-bar/test/lopsided-buttons/index.js

@@ -1,9 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-view' })
-@View({
+@IonicView({
   templateUrl: 'main.html'
 })
 class IonicApp {}

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

@@ -1,8 +1,7 @@
 import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {IonicConfig} from 'ionic/ionic';
-import {Nav, NavPush, NavPop, NavParams, Routable, Router, NavController, NavbarTemplate, Navbar, NavPush, Content} from 'ionic/ionic';
+import {IonicView, IonicConfig} from 'ionic/ionic';
+import {NavParams, Routable, Router, NavController} from 'ionic/ionic';
 
 import {SecondPage} from './pages/second-page'
 
@@ -10,7 +9,7 @@ import {SecondPage} from './pages/second-page'
   selector: 'ion-view',
   lifecycle: [onInit]
 })
-@View({
+@IonicView({
   template: '' +
     '<ion-navbar *navbar>' +
       '<ion-title>First Page: {{ val }}</ion-title>' +
@@ -29,8 +28,7 @@ import {SecondPage} from './pages/second-page'
       '<icon class="ion-ios-arrow-back"></icon>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-    '</ion-content>',
-  directives: [NavbarTemplate, Navbar, NavPush, Content]
+    '</ion-content>'
 })
 class FirstPage {
   constructor(

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

@@ -1,7 +1,6 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Routable, Router, NavController, NavPop, NavParams, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
+import {Routable, Router, NavController, NavParams} from 'ionic/ionic';
 import {ThirdPage} from './third-page';
 
 
@@ -24,8 +23,7 @@ import {ThirdPage} from './third-page';
       </p>
       <div class="green"><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f></div>
     </ion-content>
-  `,
-  directives: [NavbarTemplate, NavPop, Navbar, Content]
+  `
 })
 export class SecondPage {
   constructor(
@@ -39,7 +37,6 @@ export class SecondPage {
     this.params = params;
     this.val = Math.round(Math.random() * 8999) + 1000;
 
-
     console.log('Second page params:', params);
   }
 

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

@@ -1,11 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Router, Routable, NavController, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
+import {Router, Routable, NavController} from 'ionic/ionic';
 
 
 @Component({selector: 'ion-view'})
-@View({
+@IonicView({
   template: `
     <ion-navbar *navbar><ion-title>Third Page Header</ion-title></ion-navbar>
     <ion-content class="padding">
@@ -14,8 +13,7 @@ import {Router, Routable, NavController, NavbarTemplate, Navbar, Content} from '
       </p>
       <div class="yellow"><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f></div>
     </ion-content>
-  `,
-  directives: [NavbarTemplate, Navbar, Content]
+  `
 })
 export class ThirdPage {
   constructor(

ionic/components/radio/test/basic/index.js

@@ -2,13 +2,12 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 //import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
-import {RadioGroup, RadioButton, Content, List} from 'ionic/ionic';
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-view' })
-@View({
-  templateUrl: 'main.html',
-  directives: [RadioGroup, RadioButton, List, Content]
+@IonicView({
+  templateUrl: 'main.html'
 })
 class IonicApp {
   constructor() {

ionic/components/search-bar/test/basic/index.js

@@ -1,27 +1,19 @@
-import {NgFor} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-import { bind } from 'angular2/di';
-import { PipeRegistry } from 'angular2/change_detection';
 
 import {FormBuilder, Validators, formDirectives, Control, ControlGroup} from 'angular2/forms';
 
-import {Content} from 'ionic/components/content/content';
-import {List} from 'ionic/components/list/list';
-import {Item} from 'ionic/components/item/item';
-import {SearchBar} from 'ionic/components/search-bar/search-bar';
+import {IonicView} from 'ionic/ionic';
 import {SearchPipe} from 'ionic/components/search-bar/search-bar';
 
+
 function randomTitle() {
   var items = ['Pizza', 'Pumpkin', 'Apple', 'Bologna'];
   return items[Math.floor(Math.random() * items.length)];
 }
 
 @Component({ selector: 'ion-app' })
-@View({
-  templateUrl: 'main.html',
-  directives: [formDirectives].concat([Content, List, Item, SearchBar, NgFor])
+@IonicView({
+  templateUrl: 'main.html'
 })
 class IonicApp {
   constructor() {

ionic/components/segment/test/basic/index.js

@@ -1,15 +1,12 @@
-import {NgSwitch, NgSwitchWhen} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {FormBuilder, Validators, ControlGroup} from 'angular2/forms';
 
-import {Segment, SegmentButton, Content} from 'ionic/ionic';
-import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-view' })
-@View({
-  templateUrl: 'main.html',
-  directives: [formDirectives].concat([Segment, SegmentButton, Content, NgSwitch, NgSwitchWhen])
+@IonicView({
+  templateUrl: 'main.html'
 })
 class IonicApp {
   constructor() {

ionic/components/slides/test/basic/index.js

@@ -1,14 +1,12 @@
-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 {Slides, Slide, SlidePager, List, Item, Content} from 'ionic/ionic';
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({
   selector: 'ion-view'
 })
-@View({
-  directives: [Slides, Slide, SlidePager, Content, List, Item],
+@IonicView({
   templateUrl: 'main.html'
 })
 class IonicApp {

ionic/components/slides/test/continuous/index.js

@@ -1,14 +1,12 @@
-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 {Slides, Slide, SlidePager, List, Item, Content} from 'ionic/ionic';
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({
   selector: 'ion-view'
 })
-@View({
-  directives: [Slides, Slide, SlidePager, Content, List, Item],
+@IonicView({
   template: `
     <ion-slides #slides loop>
       <ion-slide style="background-color: blue">

ionic/components/switch/test/basic/index.js

@@ -1,14 +1,12 @@
-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 {FormBuilder, Validators, ControlGroup} from 'angular2/forms';
+
+import {IonicView} from 'ionic/ionic';
 
-import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
-import {Switch, Content, List} from 'ionic/ionic';
-//import {IONIC_DIRECTIVES} from 'ionic/ionic'
 
 @Component({ selector: 'ion-view' })
-@View({
-  templateUrl: 'main.html',
-  directives: [FormDirectives].concat([Switch, List, Content])
+@IonicView({
+  templateUrl: 'main.html'
 })
 class IonicApp {
   constructor() {

ionic/components/tabs/tab-button.js

@@ -5,7 +5,7 @@ import {Tabs} from './tabs';
 
 
 @Directive({
-  selector: '.tab-button',
+  selector: 'button.tab-button',
   properties: ['tab'],
   hostProperties: {
     'btnId': 'attr.id',

ionic/components/tabs/tabs.scss

@@ -77,6 +77,7 @@ button.tab-button {
   align-self: center;
   align-items: center;
 
+  margin: 0;
   padding: $tab-button-padding;
   min-width: $tab-button-min-width;
   max-width: $tab-button-max-width;
@@ -86,6 +87,7 @@ button.tab-button {
   user-select: none;
 
   border: 0;
+  border-radius: 0;
   background: none;
 }
 

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

@@ -1,11 +1,10 @@
 import {Component} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Tabs, Tab, NavController, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
+import {IonicView, NavController} from 'ionic/ionic';
 
 
 @Component({selector: 'ion-view'})
-@View({
+@IonicView({
   template: '' +
     '<ion-navbar *navbar>' +
       '<ion-title>Sign In</ion-title>' +
@@ -14,8 +13,7 @@ import {Tabs, Tab, NavController, NavbarTemplate, Navbar, Content} from 'ionic/i
       '<p><button primary (click)="push()">Go to tabs</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-    '</ion-content>',
-  directives: [NavbarTemplate, Navbar, Content]
+    '</ion-content>'
 })
 class IonicApp {
   constructor(nav: NavController) {
@@ -31,9 +29,8 @@ class IonicApp {
 @Component({
   selector: 'ion-tabs-view'
 })
-@View({
-  templateUrl: './pages/tabs.html',
-  directives: [Tabs, Tab, Content, NavbarTemplate, Navbar]
+@IonicView({
+  templateUrl: './pages/tabs.html'
 })
 
 class TabsPage {
@@ -48,7 +45,7 @@ class TabsPage {
 // tab 1
 //
 @Component({selector: 'ion-view'})
-@View({
+@IonicView({
   template: '' +
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 1 Page 1</ion-title>' +
@@ -57,8 +54,7 @@ class TabsPage {
       '<p><button primary (click)="push()">Go to Tab 1, Page 2</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-    '</ion-content>',
-  directives: [NavbarTemplate, Navbar, Content]
+    '</ion-content>'
 })
 class Tab1Page1 {
   constructor(nav: NavController) {
@@ -71,7 +67,7 @@ class Tab1Page1 {
 }
 
 @Component({selector: 'ion-view'})
-@View({
+@IonicView({
   template: '' +
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 1 Page 2</ion-title>' +
@@ -81,8 +77,7 @@ class Tab1Page1 {
       '<p><button primary (click)="nav.pop()">Back to Tab 1, Page 1</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-    '</ion-content>',
-  directives: [NavbarTemplate, Navbar, Content]
+    '</ion-content>'
 })
 class Tab1Page2 {
   constructor(nav: NavController) {
@@ -95,7 +90,7 @@ class Tab1Page2 {
 }
 
 @Component({selector: 'ion-view'})
-@View({
+@IonicView({
   template: '' +
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 1 Page 3</ion-title>' +
@@ -104,8 +99,7 @@ class Tab1Page2 {
       '<p><button primary (click)="nav.pop()">Back to Tab 1, Page 2</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-    '</ion-content>',
-  directives: [NavbarTemplate, Navbar, Content]
+    '</ion-content>'
 })
 class Tab1Page3 {
   constructor(nav: NavController) {
@@ -119,7 +113,7 @@ class Tab1Page3 {
 // tab 2
 //
 @Component({selector: 'ion-view'})
-@View({
+@IonicView({
   template: '' +
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 2 Page 1</ion-title>' +
@@ -128,8 +122,7 @@ class Tab1Page3 {
       '<p><button primary (click)="push()">Go to Tab 2, Page 2</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-    '</ion-content>',
-  directives: [NavbarTemplate, Navbar, Content]
+    '</ion-content>'
 })
 class Tab2Page1 {
   constructor(nav: NavController) {
@@ -142,7 +135,7 @@ class Tab2Page1 {
 }
 
 @Component({selector: 'ion-view'})
-@View({
+@IonicView({
   template: '' +
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 2 Page 2</ion-title>' +
@@ -152,8 +145,7 @@ class Tab2Page1 {
       '<p><button primary (click)="nav.pop()">Back to Tab 2, Page 1</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-    '</ion-content>',
-  directives: [NavbarTemplate, Navbar, Content]
+    '</ion-content>'
 })
 class Tab2Page2 {
   constructor(nav: NavController) {
@@ -166,7 +158,7 @@ class Tab2Page2 {
 }
 
 @Component({selector: 'ion-view'})
-@View({
+@IonicView({
   template: '' +
     '<ion-navbar *navbar>' +
       '<ion-title>Tabs 2 Page 3</ion-title>' +
@@ -175,8 +167,7 @@ class Tab2Page2 {
       '<p><button primary (click)="nav.pop()">Back to Tab 2, Page 2</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-    '</ion-content>',
-  directives: [NavbarTemplate, Navbar, Content]
+    '</ion-content>'
 })
 class Tab2Page3 {
   constructor(nav: NavController) {

ionic/components/tabs/test/basic/index.js

@@ -1,15 +1,11 @@
-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-view' })
-@View({
-  templateUrl: 'main.html',
-  directives: [Tabs, Tab, Content]
+@IonicView({
+  templateUrl: 'main.html'
 })
 class IonicApp {}
 

ionic/components/tabs/test/tab-bar-bottom/index.js

@@ -1,16 +0,0 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-import {Tabs, Tab} from 'ionic/ionic';
-
-
-@Component({ selector: 'ion-view' })
-@View({
-  templateUrl: 'main.html',
-  directives: [Tabs, Tab]
-})
-class IonicApp {}
-
-export function main(ionicBootstrap) {
-  ionicBootstrap(IonicApp);
-}

ionic/components/tabs/test/tab-bar-icons/index.js

@@ -1,9 +1,10 @@
-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 {IonicView} from 'ionic/ionic';
 
 
-@Component({ selector: 'ion-app' })
-@View({
+@Component({ selector: 'ion-view' })
+@IonicView({
   templateUrl: 'main.html'
 })
 class IonicApp {}

ionic/components/tabs/test/tab-bar-top/index.js

@@ -1,13 +1,11 @@
-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} from 'ionic/ionic';
+import {IonicView} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-view' })
-@View({
-  templateUrl: 'main.html',
-  directives: [Tabs, Tab]
+@IonicView({
+  templateUrl: 'main.html'
 })
 class IonicApp {}
 

ionic/config/component.js

@@ -1,18 +1,14 @@
+import {NgFor, NgIf} from 'angular2/angular2';
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
 
-import * as util from 'ionic/util'
-import {dom} from 'ionic/util'
-import {Platform} from 'ionic/platform/platform'
+import * as util from 'ionic/util';
+import {dom} from 'ionic/util';
+import {Platform} from 'ionic/platform/platform';
 
-let platformMode = Platform.getMode();
+const platformMode = Platform.getMode();
 
 
-export function Config(instance, config){
-  for (var setting in config) {
-    instance[setting] = config[setting][platformMode];
-  }
-}
-
 export class IonicDirective extends Directive {
   constructor(ComponentType) {
     super( appendModeConfig(ComponentType) );

ionic/config/view.js

@@ -0,0 +1,51 @@
+import {NgFor, NgIf} from 'angular2/angular2';
+import {NgSwitch, NgSwitchWhen} from 'angular2/angular2'
+import {formDirectives} from 'angular2/forms';
+
+import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {
+  Aside, Content, Refresher,
+  Slides, Slide, SlidePager,
+  Tabs, Tab,
+  ActionMenu,
+  List, Item,
+  Icon,
+  Checkbox, Switch, Label, Input, Segment, SegmentButton,
+  RadioGroup, RadioButton, SearchBar,
+  Nav, NavbarTemplate, Navbar, NavPush, NavPop
+} from 'ionic/ionic';
+
+
+export class IonicView extends View {
+  constructor(config) {
+    let directives = [
+
+      // Angular
+      NgFor, NgIf, formDirectives,
+      NgSwitch, NgSwitchWhen,
+
+      // Content
+      Aside, Content, Refresher,
+      List, Item,
+      Slides, Slide, SlidePager,
+      Tabs, Tab,
+
+      // Overlays
+      ActionMenu,
+
+      // Media
+      Icon,
+
+      // Form elements
+      Checkbox, Switch, Label, Input, Segment, SegmentButton,
+      RadioGroup, RadioButton, SearchBar,
+
+      // Nav
+      Nav, NavbarTemplate, Navbar, NavPush, NavPop
+    ];
+
+    config.directives = (config.directives || []).concat(directives);
+    super(config);
+  }
+}

ionic/directives.js

@@ -1,20 +0,0 @@
-import {
-  List, Content,
-
-  Icon,
-
-  // Form elements
-  Switch, Checkbox, Label, Item, Input,Segment, SegmentButton
-
-} from 'ionic/ionic';
-
-var IONIC_DIRECTIVES = [
-  List, Content,
-
-  Icon,
-
-  // Form elements
-  Switch, Checkbox, Label, Item, Input,Segment, SegmentButton
-]
-
-export {IONIC_DIRECTIVES};

ionic/ionic.js

@@ -1,8 +1,8 @@
 
 export * from 'ionic/config/component'
 export * from 'ionic/config/config'
+export * from 'ionic/config/view'
 export * from 'ionic/components'
-export * from 'ionic/directives'
 export * from 'ionic/platform/platform'
 export * from 'ionic/routing/router'