diff --git a/demos/weather/index.ts b/demos/weather/index.ts
index 2579213ea5..781d6e728c 100755
--- a/demos/weather/index.ts
+++ b/demos/weather/index.ts
@@ -1,4 +1,4 @@
-import {Component, Directive, View, NgIf, NgFor, NgClass, ElementRef} from 'angular2/angular2';
+import {Component, Directive, NgIf, NgFor, NgClass, ElementRef} from 'angular2/angular2';
 import {FormBuilder, Control, ControlGroup, Validators, FORM_DIRECTIVES} from 'angular2/angular2';
 
 import {App, IonicView, Animation, Content, Scroll, Modal, NavController, NavParams} from 'ionic/ionic';
@@ -58,9 +58,7 @@ let WEATHER_ICONS = {
   selector: 'weather-icon',
   inputs: [
     'icon'
-  ]
-})
-@View({
+  ],
   template: '<i class="icon" [ng-class]="weatherIcon"></i>',
   directives: [NgClass]
 })
@@ -82,9 +80,7 @@ export class WeatherIcon {
   selector: 'current-time',
   inputs: [
     'localtz'
-  ]
-})
-@View({
+  ],
   template: '<span class="current-time">{{currentTime}}</span>',
 })
 export class CurrentTime {
@@ -102,9 +98,7 @@ export class CurrentTime {
   selector: 'current-weather',
   inputs: [
     'current'
-  ]
-})
-@View({
+  ],
   templateUrl: 'current-weather.html',
   directives: [NgIf]
 })
@@ -177,9 +171,7 @@ export class CurrentWeather {
   selector: 'background-cycler',
   inputs: [
     'image'
-  ]
-})
-@View({
+  ],
   template: '<div class="bg-image"></div>'
 })
 export class BackgroundCycler {
diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts
index c9f47bd696..c67ebd8441 100644
--- a/ionic/components/action-sheet/action-sheet.ts
+++ b/ionic/components/action-sheet/action-sheet.ts
@@ -6,7 +6,7 @@
 * The ActionSheet is a modal menu with options to select based on an action.
 */
 
-import {Component, View, Injectable, NgFor, NgIf} from 'angular2/angular2';
+import {Component, Injectable, NgFor, NgIf} from 'angular2/angular2';
 
 import {OverlayController} from '../overlay/overlay-controller';
 import {IonicConfig} from '../../config/config';
@@ -54,9 +54,7 @@ import * as util from 'ionic/util';
  * ```
  */
 @Component({
-  selector: 'ion-action-sheet'
-})
-@View({
+  selector: 'ion-action-sheet',
   template:
     '<backdrop (click)="_cancel()" tappable disable-activated></backdrop>' +
     '<action-sheet-wrapper>' +
diff --git a/ionic/components/checkbox/checkbox.ts b/ionic/components/checkbox/checkbox.ts
index c39e87d05e..e32ff3fd4e 100644
--- a/ionic/components/checkbox/checkbox.ts
+++ b/ionic/components/checkbox/checkbox.ts
@@ -1,4 +1,4 @@
-import {Component, View, Directive, Optional, NgControl, ElementRef, Renderer} from 'angular2/angular2';
+import {Component, Directive, Optional, NgControl, ElementRef, Renderer} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicForm} from '../form/form';
@@ -31,16 +31,14 @@ import {IonicForm} from '../form/form';
     '[attr.aria-disabled]': 'disabled',
     '[attr.aria-labelledby]': 'labelId',
     '(click)': 'click($event)'
-  }
-})
-@View({
+  },
   template:
-  '<media-checkbox disable-activated>' +
-    '<checkbox-icon></checkbox-icon>' +
-  '</media-checkbox>' +
-  '<ion-item-content id="{{labelId}}">' +
-    '<ng-content></ng-content>' +
-  '</ion-item-content>'
+    '<media-checkbox disable-activated>' +
+      '<checkbox-icon></checkbox-icon>' +
+    '</media-checkbox>' +
+    '<ion-item-content id="{{labelId}}">' +
+      '<ng-content></ng-content>' +
+    '</ion-item-content>'
 })
 export class Checkbox {
 
diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts
index 198cb6ba0d..c670aafa5b 100644
--- a/ionic/components/content/content.ts
+++ b/ionic/components/content/content.ts
@@ -1,4 +1,4 @@
-import {Component, View, ElementRef, Optional, Host} from 'angular2/angular2';
+import {Component, ElementRef, Optional} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
@@ -25,11 +25,7 @@ import {ScrollTo} from '../../animations/scroll-to';
  */
 @Component({
   selector: 'ion-content',
-  inputs: [
-    'parallax'
-  ]
-})
-@View({
+  inputs: ['parallax'],
   template: '<scroll-content><ng-content></ng-content></scroll-content>'
 })
 export class Content extends Ion {
diff --git a/ionic/components/item/item-sliding.ts b/ionic/components/item/item-sliding.ts
index 1452bbad6f..561d89298b 100644
--- a/ionic/components/item/item-sliding.ts
+++ b/ionic/components/item/item-sliding.ts
@@ -1,4 +1,4 @@
-import {Component, Directive, View, ElementRef, NgIf, Host, Optional, Renderer} from 'angular2/angular2';
+import {Component, Directive, ElementRef, NgIf, Host, Optional, Renderer} from 'angular2/angular2';
 
 import {Gesture} from 'ionic/gestures/gesture';
 import {DragGesture} from 'ionic/gestures/drag-gesture';
@@ -32,17 +32,15 @@ import {CSS, raf} from 'ionic/util/dom';
   selector: 'ion-item-sliding,[ion-item-sliding]',
   inputs: [
     'sliding'
-  ]
-})
-@View({
+  ],
   template:
-      '<ng-content select="ion-item-options"></ng-content>' +
-      '<ion-item-sliding-content>' +
-        '<ion-item-content>' +
-          '<ng-content></ng-content>'+
-        '</ion-item-content>' +
-        '<ng-content select="[item-right]"></ng-content>' +
-      '</ion-item-sliding-content>',
+    '<ng-content select="ion-item-options"></ng-content>' +
+    '<ion-item-sliding-content>' +
+      '<ion-item-content>' +
+        '<ng-content></ng-content>'+
+      '</ion-item-content>' +
+      '<ng-content select="[item-right]"></ng-content>' +
+    '</ion-item-sliding-content>',
   directives: [NgIf]
 })
 export class ItemSliding {
diff --git a/ionic/components/item/item.ts b/ionic/components/item/item.ts
index 785cca26cc..a4c4d0c27a 100644
--- a/ionic/components/item/item.ts
+++ b/ionic/components/item/item.ts
@@ -1,4 +1,4 @@
-import {Component, View, ElementRef, Renderer} from 'angular2/angular2';
+import {Component, ElementRef, Renderer} from 'angular2/angular2';
 
 
 /**
@@ -18,9 +18,7 @@ import {Component, View, ElementRef, Renderer} from 'angular2/angular2';
  *  ```
  */
 @Component({
-  selector: 'ion-item,[ion-item]'
-})
-@View({
+  selector: 'ion-item,[ion-item]',
   template:
     '<ng-content select="[item-left]"></ng-content>' +
     '<ng-content select="[item-right]"></ng-content>' +
diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts
index f24dae1cd1..c3bd5b3dd9 100644
--- a/ionic/components/menu/menu.ts
+++ b/ionic/components/menu/menu.ts
@@ -1,4 +1,4 @@
-import {forwardRef, Directive, Host, View, EventEmitter, ElementRef} from 'angular2/angular2';
+import {forwardRef, Directive, Host, EventEmitter, ElementRef} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
@@ -54,12 +54,10 @@ import * as gestures from  './menu-gestures';
     'side': 'left',
     'type': 'reveal'
   },
+  outputs: ['opening'],
   host: {
     'role': 'navigation'
   },
-  outputs: ['opening']
-})
-@View({
   template: '<ng-content></ng-content><backdrop tappable disable-activated></backdrop>',
   directives: [forwardRef(() => MenuBackdrop)]
 })
diff --git a/ionic/components/nav-bar/nav-bar.ts b/ionic/components/nav-bar/nav-bar.ts
index d6884024c4..19a93a178d 100644
--- a/ionic/components/nav-bar/nav-bar.ts
+++ b/ionic/components/nav-bar/nav-bar.ts
@@ -1,4 +1,4 @@
-import {Component, Directive, View, Optional, ElementRef, Renderer, TemplateRef, forwardRef, Inject} from 'angular2/angular2';
+import {Component, Directive, Optional, ElementRef, Renderer, TemplateRef, forwardRef, Inject} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {Icon} from '../icon/icon';
@@ -50,9 +50,7 @@ class BackButtonText extends Ion {
 
 
 @Component({
-  selector: 'ion-navbar'
-})
-@View({
+  selector: 'ion-navbar',
   template:
     '<div class="toolbar-inner">' +
       '<button class="back-button">' +
diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts
index 04d045e61a..a98a4ef1f8 100644
--- a/ionic/components/nav/nav.ts
+++ b/ionic/components/nav/nav.ts
@@ -1,4 +1,4 @@
-import {Component, Directive, View, ElementRef, Host, Optional, forwardRef, Inject, NgZone, Compiler, AppViewManager, DynamicComponentLoader, Renderer, ViewContainerRef} from 'angular2/angular2';
+import {Component, Directive, ElementRef, Host, Optional, forwardRef, Inject, NgZone, Compiler, AppViewManager, DynamicComponentLoader, Renderer, ViewContainerRef} from 'angular2/angular2';
 
 import {IonicApp} from '../app/app';
 import {IonicConfig} from '../../config/config';
@@ -129,9 +129,7 @@ import {NavController} from './nav-controller';
   ],
   defaultInputs: {
     'swipeBackEnabled': true
-  }
-})
-@View({
+  },
   template: '<template pane-anchor></template>',
   directives: [forwardRef(() => NavPaneAnchor)]
 })
@@ -405,9 +403,7 @@ class ContentAnchor {
  * @private
  */
 @Component({
-  selector: 'ion-pane'
-})
-@View({
+  selector: 'ion-pane',
   template:
     '<section class="navbar-container">' +
       '<template navbar-anchor></template>' +
diff --git a/ionic/components/nav/test/user-app/index.ts b/ionic/components/nav/test/user-app/index.ts
deleted file mode 100644
index eef8076437..0000000000
--- a/ionic/components/nav/test/user-app/index.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-import {
-  Directive,
-  Component,
-  View,
-  bootstrap,
-  Injectable,
-  Inject,
-  forwardRef,
-  Inject,
-  DynamicComponentLoader,
-  ElementRef,
-  Query,
-  QueryList,
-  ComponentRef
-  } from 'angular2/angular2';
-
-
-@Injectable()
-class IonicModal {
-  constructor() {
-    console.log('IonicModal constructor');
-  }
-  open(componentType) {
-    console.log('IonicModal open:', componentType.name);
-  }
-}
-
-@Injectable()
-class UserService {
-  constructor() {
-    console.log('UserService constructor');
-    this.id = Math.random();
-  }
-}
-
-@Directive({
-  selector: 'button',
-  host: {
-    'ionic-button': 'true'
-  }
-})
-class IonicButton {
-  constructor() {
-    console.log('IonicButton')
-  }
-}
-
-@Directive({
-  selector: 'button',
-  host: {
-    'user-button': 'true'
-  }
-})
-class UserButton {
-  constructor() {
-    console.log('UserButton')
-  }
-}
-
-var IONIC_DIRECTIVES = [IonicButton];
-
-@Component({
-  selector: 'user-modal'
-})
-@View({
-  template: `
-    <div style="position:absolute;top:0;right:0;bottom:0;left:0;background:#ddd;">
-      <h2>user modal</h2>
-      <p>UserService: {{userService.id}}
-    </div>
-  `
-})
-class UserModal {
-  constructor(userService: UserService) {
-    console.log('UserModal constructor');
-    this.userService = userService;
-  }
-}
-
-
-
-@Component({
-  selector: 'user-app',
-  hostInjector: [UserService]
-})
-@View({
-  template: `
-    <h1>user root component</h1>
-    <button (click)="openModal()">Open Modal</button>
-    <ng-content></ng-content>
-  `,
-  directives: IONIC_DIRECTIVES.concat([UserButton])
-})
-class UserRootComponent {
-  constructor(ionicModal: IonicModal, userService: UserService) {
-    console.log('UserRootComponent constructor');
-    this.ionicModal = ionicModal;
-  }
-  openModal(){
-    this.ionicModal.open(UserModal);
-  }
-}
-
-
-@Directive({
-  selector: 'overlay-anchor'
-})
-class OverlayAnchor {
-  constructor(
-    userService: UserService,
-    public elementRef: ElementRef,
-    loader: DynamicComponentLoader)
-  {
-    console.log('OverlayAnchor constructor', userService);
-    loader.loadNextToLocation(UserModal, elementRef).then((ref: ComponentRef) => {
-    });
-  }
-}
-
-
-
-function ionicApp(userApp: Type) {
-  function IonicRootComponent() {}
-  IonicRootComponent.annotations = [
-    new Component({
-      selector: 'ion-app',
-      viewInjector: [IonicModal]
-    }),
-    new View({
-      template: `
-        <user-app>
-          <overlay-anchor></overlay-anchor>
-        </user-app>`,
-      directives: [userApp, OverlayAnchor]
-    })
-  ];
-  return IonicRootComponent;
-}
-
-console.log('bootstrap')
-bootstrap(ionicApp(UserRootComponent)).catch(err => {
-  console.error('bootstrap', err);
-});
diff --git a/ionic/components/overlay/overlay-controller.ts b/ionic/components/overlay/overlay-controller.ts
index f5ec1687b2..afa679830f 100644
--- a/ionic/components/overlay/overlay-controller.ts
+++ b/ionic/components/overlay/overlay-controller.ts
@@ -1,4 +1,4 @@
-import {Component, View, NgZone, Injectable, Renderer} from 'angular2/angular2';
+import {Component, NgZone, Injectable, Renderer} from 'angular2/angular2';
 
 import {IonicApp} from '../app/app';
 import {Animation} from '../../animations/animation';
diff --git a/ionic/components/overlay/overlay.ts b/ionic/components/overlay/overlay.ts
index 8ec71dac36..36030abdee 100644
--- a/ionic/components/overlay/overlay.ts
+++ b/ionic/components/overlay/overlay.ts
@@ -1,12 +1,10 @@
-import {Component, View, ElementRef, DynamicComponentLoader} from 'angular2/angular2';
+import {Component, ElementRef, DynamicComponentLoader} from 'angular2/angular2';
 
 import {OverlayController} from './overlay-controller';
 
 
 @Component({
-  selector: 'ion-overlay'
-})
-@View({
+  selector: 'ion-overlay',
   template: ''
 })
 export class OverlayAnchor {
diff --git a/ionic/components/popup/popup.ts b/ionic/components/popup/popup.ts
index b12b254ec1..84b82ca93c 100644
--- a/ionic/components/popup/popup.ts
+++ b/ionic/components/popup/popup.ts
@@ -1,5 +1,5 @@
 import {FORM_DIRECTIVES, NgControl, NgControlGroup,
-  Component, View, ElementRef, Injectable, NgClass, NgIf, NgFor} from 'angular2/angular2';
+  Component, ElementRef, Injectable, NgClass, NgIf, NgFor} from 'angular2/angular2';
 
 import {OverlayController} from '../overlay/overlay-controller';
 import {IonicConfig} from '../../config/config';
@@ -265,25 +265,23 @@ export class Popup {
 
 const OVERLAY_TYPE = 'popup';
 
-@Component({
-  selector: 'ion-popup'
-})
 // TODO add button type to button: [type]="button.type"
-@View({
+@Component({
+  selector: 'ion-popup',
   template:
-  '<backdrop (click)="_cancel($event)" tappable disable-activated></backdrop>' +
-  '<popup-wrapper [ng-class]="cssClass">' +
-    '<div class="popup-head">' +
-      '<h2 class="popup-title" [inner-html]="title" *ng-if="title"></h2>' +
-      '<h3 class="popup-sub-title" [inner-html]="subTitle" *ng-if="subTitle"></h3>' +
-    '</div>' +
-    '<div class="popup-body">' +
-      '<div [inner-html]="template" *ng-if="template"></div>' +
-      '<input type="{{inputType || \'text\'}}" placeholder="{{inputPlaceholder}}" *ng-if="showPrompt" class="prompt-input">' +
-    '</div>' +
-    '<div class="popup-buttons" *ng-if="buttons.length">' +
-      '<button *ng-for="#button of buttons" (click)="buttonTapped(button, $event)" [inner-html]="button.text"></button>' +
-    '</div>' +
+    '<backdrop (click)="_cancel($event)" tappable disable-activated></backdrop>' +
+    '<popup-wrapper [ng-class]="cssClass">' +
+      '<div class="popup-head">' +
+        '<h2 class="popup-title" [inner-html]="title" *ng-if="title"></h2>' +
+        '<h3 class="popup-sub-title" [inner-html]="subTitle" *ng-if="subTitle"></h3>' +
+      '</div>' +
+      '<div class="popup-body">' +
+        '<div [inner-html]="template" *ng-if="template"></div>' +
+        '<input type="{{inputType || \'text\'}}" placeholder="{{inputPlaceholder}}" *ng-if="showPrompt" class="prompt-input">' +
+      '</div>' +
+      '<div class="popup-buttons" *ng-if="buttons.length">' +
+        '<button *ng-for="#button of buttons" (click)="buttonTapped(button, $event)" [inner-html]="button.text"></button>' +
+      '</div>' +
   '</popup-wrapper>',
   directives: [FORM_DIRECTIVES, NgClass, NgIf, NgFor, Button]
 })
diff --git a/ionic/components/radio/radio.ts b/ionic/components/radio/radio.ts
index 64b8aae3df..5742e41b47 100644
--- a/ionic/components/radio/radio.ts
+++ b/ionic/components/radio/radio.ts
@@ -1,4 +1,4 @@
-import {Component, Directive, ElementRef, Renderer, Host, Optional, NgControl, Query, QueryList, View} from 'angular2/angular2';
+import {Component, Directive, ElementRef, Renderer, Host, Optional, NgControl, Query, QueryList} from 'angular2/angular2';
 
 import {IonicConfig} from '../../config/config';
 import {Ion} from '../ion';
@@ -180,16 +180,14 @@ export class RadioGroup extends Ion {
     '[attr.aria-disabled]': 'disabled',
     '[attr.aria-labelledby]': 'labelId',
     '(click)': 'click($event)'
-  }
-})
-@View({
+  },
   template:
-  '<ion-item-content id="{{labelId}}">' +
-    '<ng-content></ng-content>' +
-  '</ion-item-content>' +
-  '<media-radio>' +
-    '<radio-icon></radio-icon>' +
-  '</media-radio>'
+    '<ion-item-content id="{{labelId}}">' +
+      '<ng-content></ng-content>' +
+    '</ion-item-content>' +
+    '<media-radio>' +
+      '<radio-icon></radio-icon>' +
+    '</media-radio>'
 })
 export class RadioButton extends Ion {
   /**
diff --git a/ionic/components/scroll/pull-to-refresh.ts b/ionic/components/scroll/pull-to-refresh.ts
index 67534828ce..035b105a2e 100644
--- a/ionic/components/scroll/pull-to-refresh.ts
+++ b/ionic/components/scroll/pull-to-refresh.ts
@@ -1,10 +1,10 @@
-import {Component, View, NgIf, NgClass, ElementRef, EventEmitter, Host} from 'angular2/angular2'
+import {Component, NgIf, NgClass, ElementRef, EventEmitter, Host} from 'angular2/angular2'
 
 import {Content} from '../content/content';
-
 import * as util from 'ionic/util';
 import {raf, ready, CSS} from 'ionic/util/dom';
 
+
 /**
  * Allows you to add pull-to-refresh to an Content component.
  *
@@ -50,20 +50,18 @@ import {raf, ready, CSS} from 'ionic/util/dom';
     '[class.active]': 'isActive',
     '[class.refreshing]': 'isRefreshing',
     '[class.refreshingTail]': 'isRefreshingTail'
-  }
-})
-@View({
-  template: `<div class="refresher-content" [class.refresher-with-text]="pullingText || refreshingText">
-      <div class="icon-pulling">
-        <i class="icon" [ng-class]="pullingIcon"></i>
-      </div>
-      <div class="text-pulling" [inner-html]="pullingText" *ng-if="pullingText"></div>
-      <div class="icon-refreshing">
-        <!--<ion-spinner ng-if="showSpinner" icon="{{spinner}}"></ion-spinner>-->
-        <i class="icon" [ng-class]="refreshingIcon"></i>
-      </div>
-      <div class="text-refreshing" [inner-html]="refreshingText" *ng-if="refreshingText"></div>
-    </div>`,
+  },
+  template:
+    '<div class="refresher-content" [class.refresher-with-text]="pullingText || refreshingText">' +
+      '<div class="icon-pulling">' +
+        '<i class="icon" [ng-class]="pullingIcon"></i>' +
+      '</div>' +
+      '<div class="text-pulling" [inner-html]="pullingText" *ng-if="pullingText"></div>' +
+      '<div class="icon-refreshing">' +
+        '<i class="icon" [ng-class]="refreshingIcon"></i>' +
+      '</div>' +
+      '<div class="text-refreshing" [inner-html]="refreshingText" *ng-if="refreshingText"></div>' +
+    '</div>',
   directives: [NgIf, NgClass]
 })
 export class Refresher {
diff --git a/ionic/components/scroll/scroll.ts b/ionic/components/scroll/scroll.ts
index 51a0be4736..5cb8190037 100644
--- a/ionic/components/scroll/scroll.ts
+++ b/ionic/components/scroll/scroll.ts
@@ -1,4 +1,4 @@
-import {Component, View, ElementRef, onInit} from 'angular2/angular2';
+import {Component, ElementRef, onInit} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
@@ -21,9 +21,12 @@ import * as util from 'ionic/util';
     '[class.scroll-x]': 'scrollX',
     '[class.scroll-y]': 'scrollY'
   },
-})
-@View({
-  template: '<scroll-content><div class="scroll-zoom-wrapper"><ng-content></ng-content></div></scroll-content>'
+  template:
+    '<scroll-content>' +
+      '<div class="scroll-zoom-wrapper">' +
+        '<ng-content></ng-content>' +
+      '</div>' +
+    '</scroll-content>'
 })
 export class Scroll extends Ion {
   /**
diff --git a/ionic/components/search-bar/search-bar.ts b/ionic/components/search-bar/search-bar.ts
index 766fe60c6d..b2f1062889 100644
--- a/ionic/components/search-bar/search-bar.ts
+++ b/ionic/components/search-bar/search-bar.ts
@@ -1,4 +1,4 @@
-import {ElementRef, Pipe, NgControl, Renderer, View, FORM_DIRECTIVES, NgIf, NgClass} from 'angular2/angular2';
+import {ElementRef, Pipe, NgControl, Renderer, FORM_DIRECTIVES, NgIf, NgClass} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
@@ -33,17 +33,15 @@ import {ConfigComponent} from '../../config/decorators';
       this.element = this.elementRef.nativeElement.querySelector('input');
       this.element.blur();
     }
-  }
-})
-@View({
-  template: `
-  <div class="search-bar-input-container" [class.left-align]="shouldLeftAlign">
-    <div class="search-bar-search-icon"></div>
-    <input (focus)="inputFocused()" (blur)="inputBlurred()"
-    (input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder" [(ng-model)]="value">
-    <div class="search-bar-close-icon" (click)="clearInput()"></div>
-  </div>
-  <button *ng-if="showCancel" (click)="cancelAction()" class="search-bar-cancel" [class.left-align]="shouldLeftAlign">{{cancelText}}</button>`,
+  },
+  template:
+    '<div class="search-bar-input-container" [class.left-align]="shouldLeftAlign">' +
+      '<div class="search-bar-search-icon"></div>' +
+      '<input (focus)="inputFocused()" (blur)="inputBlurred()" ' +
+      '(input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder" [(ng-model)]="value">' +
+      '<div class="search-bar-close-icon" (click)="clearInput()"></div>' +
+    '</div>' +
+    '<button *ng-if="showCancel" (click)="cancelAction()" class="search-bar-cancel" [class.left-align]="shouldLeftAlign">{{cancelText}}</button>',
   directives: [FORM_DIRECTIVES, NgIf, NgClass]
 })
 
diff --git a/ionic/components/search-bar/test/floating/e2e.ts b/ionic/components/search-bar/test/floating/e2e.ts
index b9a75978aa..397a2ff77c 100644
--- a/ionic/components/search-bar/test/floating/e2e.ts
+++ b/ionic/components/search-bar/test/floating/e2e.ts
@@ -1,4 +1,4 @@
 
 it('should animate focus', function() {
-  element(by.css('.e2eFloatingSearchBar input')).sendKeys("Should animate");
+  element(by.css('.e2eFloatingSearchBar input')).sendKeys("A");
 });
diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts
index 6c05834be1..8def668160 100644
--- a/ionic/components/segment/segment.ts
+++ b/ionic/components/segment/segment.ts
@@ -1,4 +1,4 @@
-import {Component, Directive, View, Renderer, ElementRef, EventEmitter, Host, forwardRef, Optional} from 'angular2/angular2';
+import {Component, Directive, Renderer, ElementRef, EventEmitter, Host, forwardRef, Optional} from 'angular2/angular2';
 import {Control, NgControl, NgFormControl, ControlGroup, ControlDirective} from 'angular2/angular2';
 
 import {Ion} from '../ion';
@@ -25,9 +25,7 @@ import {dom} from 'ionic/util';
     '[class.ng-valid]': 'cd.control?.valid == true',
     '[class.ng-invalid]': 'cd.control?.valid == false'
     */
-  }
-})
-@View({
+  },
   template: '<div class="ion-segment"><ng-content></ng-content></div>',
   directives: [forwardRef(() => SegmentButton)]
 })
diff --git a/ionic/components/slides/slides.ts b/ionic/components/slides/slides.ts
index f51879d3a0..cfebce82a1 100644
--- a/ionic/components/slides/slides.ts
+++ b/ionic/components/slides/slides.ts
@@ -1,4 +1,4 @@
-import {Directive, Component, View, ElementRef, Host, NgIf, NgClass} from 'angular2/angular2';
+import {Directive, Component, ElementRef, Host, NgClass} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {Animation} from 'ionic/animations/animation';
@@ -39,16 +39,15 @@ import {Scroll} from '../scroll/scroll';
     'zoom',
     'zoomDuration',
     'zoomMax'
-  ]
-})
-@View({
-  template: `<div class="swiper-container">
-    <div class="swiper-wrapper">
-      <ng-content></ng-content>
-    </div>
-    <div [class.hide]="!showPager" class="swiper-pagination"></div>
-  </div>`,
-  directives: [NgIf, NgClass]
+  ],
+  template:
+    '<div class="swiper-container">' +
+      '<div class="swiper-wrapper">' +
+        '<ng-content></ng-content>' +
+      '</div>' +
+      '<div [class.hide]="!showPager" class="swiper-pagination"></div>' +
+    '</div>',
+  directives: [NgClass]
 })
 export class Slides extends Ion {
 
@@ -448,10 +447,8 @@ export class Slides extends Ion {
  */
 @Component({
   selector: 'ion-slide',
-  inputs: ['zoom']
-})
-@View({
-  template: `<div class="slide-zoom"><ng-content></ng-content></div>`
+  inputs: ['zoom'],
+  template: '<div class="slide-zoom"><ng-content></ng-content></div>'
 })
 export class Slide {
   /**
diff --git a/ionic/components/switch/switch.ts b/ionic/components/switch/switch.ts
index 0ce57e66d7..2be28c6133 100644
--- a/ionic/components/switch/switch.ts
+++ b/ionic/components/switch/switch.ts
@@ -1,15 +1,4 @@
-import {
-  Component,
-  View,
-  Directive,
-  ElementRef,
-  Renderer,
-  Host,
-  Optional,
-  NgControl,
-  Inject,
-  forwardRef
-} from 'angular2/angular2';
+import {Component, Directive, ElementRef, Renderer, Host, Optional, NgControl, Inject, forwardRef} from 'angular2/angular2';
 
 import {IonicForm} from '../form/form';
 import {IonicConfig} from '../../config/config';
@@ -95,17 +84,15 @@ class MediaSwitch {
     '(mousedown)': 'pointerDown($event)',
     '(touchend)': 'pointerUp($event)',
     '(mouseup)': 'pointerUp($event)'
-  }
-})
-@View({
+  },
   template:
-  '<ng-content select="[item-left]"></ng-content>' +
-  '<ion-item-content id="{{labelId}}">' +
-    '<ng-content></ng-content>' +
-  '</ion-item-content>' +
-  '<media-switch disable-activated>' +
-    '<switch-icon></switch-icon>' +
-  '</media-switch>',
+    '<ng-content select="[item-left]"></ng-content>' +
+    '<ion-item-content id="{{labelId}}">' +
+      '<ng-content></ng-content>' +
+    '</ion-item-content>' +
+    '<media-switch disable-activated>' +
+      '<switch-icon></switch-icon>' +
+    '</media-switch>',
   directives: [MediaSwitch]
 })
 export class Switch {
diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts
index 2bee3ab38d..aa21cadd6b 100644
--- a/ionic/components/tabs/tab.ts
+++ b/ionic/components/tabs/tab.ts
@@ -1,4 +1,4 @@
-import {Directive, Component, View, Host, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, forwardRef, Injector, NgZone, ViewContainerRef} from 'angular2/angular2';
+import {Directive, Component, Host, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, forwardRef, Injector, NgZone, ViewContainerRef} from 'angular2/angular2';
 
 import {IonicApp} from '../app/app';
 import {IonicConfig} from '../../config/config';
@@ -63,9 +63,7 @@ import {Tabs} from './tabs';
     '[attr.aria-labelledby]': 'labeledBy',
     '[attr.aria-hidden]': 'isNotSelected',
     'role': 'tabpanel'
-  }
-})
-@View({
+  },
   template: '<template content-anchor></template><ng-content></ng-content>',
   directives: [forwardRef(() => TabContentAnchor)]
 })
diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts
index 11c079f094..8795338ce0 100644
--- a/ionic/components/tabs/tabs.ts
+++ b/ionic/components/tabs/tabs.ts
@@ -1,4 +1,4 @@
-import {Component, Directive, View, Injector, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, NgZone, Optional, Host, NgFor, forwardRef, ViewContainerRef} from 'angular2/angular2';
+import {Component, Directive, Injector, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, NgZone, Optional, Host, NgFor, forwardRef, ViewContainerRef} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
@@ -65,9 +65,7 @@ import * as dom from 'ionic/util/dom';
   defaultInputs: {
     'tabBarPlacement': 'bottom',
     'tabBarIcons': 'top'
-  }
-})
-@View({
+  },
   template:
     '<section class="navbar-container">' +
       '<template navbar-anchor></template>' +
diff --git a/ionic/components/text-input/text-input.ts b/ionic/components/text-input/text-input.ts
index 57fc6af1e4..b89fb382ba 100644
--- a/ionic/components/text-input/text-input.ts
+++ b/ionic/components/text-input/text-input.ts
@@ -1,4 +1,4 @@
-import {Directive, View, Host, Optional, ElementRef, Renderer, Attribute, Query, QueryList, NgZone} from 'angular2/angular2';
+import {Directive, Host, Optional, ElementRef, Renderer, Attribute, Query, QueryList, NgZone} from 'angular2/angular2';
 
 import {IonicConfig} from '../../config/config';
 import {IonicForm} from '../form/form';
diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts
index 4e236acfe1..9d6faed41c 100644
--- a/ionic/components/toolbar/toolbar.ts
+++ b/ionic/components/toolbar/toolbar.ts
@@ -1,4 +1,4 @@
-import {Component, Directive, View, Host, ElementRef, Renderer, Optional, forwardRef, Inject} from 'angular2/angular2';
+import {Component, Directive, Host, ElementRef, Renderer, Optional, forwardRef, Inject} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
@@ -56,9 +56,7 @@ export class ToolbarBase extends Ion  {
  * TODO
  */
 @Component({
-  selector: 'ion-toolbar'
-})
-@View({
+  selector: 'ion-toolbar',
   template:
     '<div class="toolbar-inner">' +
       '<ng-content select="[menu-toggle]"></ng-content>' +
@@ -82,9 +80,7 @@ export class Toolbar extends ToolbarBase {
 
 
 @Component({
-  selector: 'ion-title'
-})
-@View({
+  selector: 'ion-title',
   template:
     '<div class="toolbar-title">' +
       '<ng-content></ng-content>' +
diff --git a/ionic/config/decorators.ts b/ionic/config/decorators.ts
index 8bf56c3e38..d48405ec14 100644
--- a/ionic/config/decorators.ts
+++ b/ionic/config/decorators.ts
@@ -29,8 +29,9 @@ class PageImpl extends View {
  *
  * ```ts
  * @Page({
- *   template: '<ion-checkbox my-custom-dir>' +
- *             '</ion-checkbox>'
+ *   template: `
+ *     <ion-checkbox my-custom-dir>
+ *     </ion-checkbox>`
  *   directives: [MyCustomDirective]
  * })
  * class MyPage {}
@@ -45,11 +46,10 @@ class PageImpl extends View {
  * ```ts
  * import {IONIC_DIRECTIVES} from 'ionic/ionic';
  * @Component({
- *   template: `<div class="customStyle">
+ *   selector: 'my-component'
+ *   template: `<div class="my-style">
  *   						  <ion-checkbox></ion-checkbox>
- *   						</div>`
- * })
- * @View({
+ *   						</div>`,
  *   directives: [IONIC_DIRECTIVES]
  * })
  * class MyCustomCheckbox {}
@@ -60,7 +60,8 @@ class PageImpl extends View {
  * ```
  * along with any other components and add them individually:
  * ```
- * @View({
+ * @Component({
+ *   ...
  *   directives: [Checkbox, Icon]
  * })
  * ```
diff --git a/scripts/snapshot/snapshot.config.js b/scripts/snapshot/snapshot.config.js
index 6c177a25c1..c194fa2d30 100644
--- a/scripts/snapshot/snapshot.config.js
+++ b/scripts/snapshot/snapshot.config.js
@@ -11,7 +11,7 @@ exports.config = {
   specs: 'dist/e2e/**/*e2e.js',
   //specs: 'dist/e2e/tabs/**/*e2e.js',
 
-  sleepBetweenSpecs: 1000,
+  sleepBetweenSpecs: 900,
 
   platformDefauls: {
     browser: 'chrome',