chore(): remove use of @View

2025-08-18 19:21:34 +08:00 · 2015-10-09 09:15:02 -05:00
parent 9255d473f1
commit 0cac4d9a2e
27 changed files with 134 additions and 337 deletions
--- 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 {
--- 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>' +
--- 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 {

--- 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 {
--- 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 {
--- 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>' +
--- 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)]
 })
--- 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">' +
--- 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>' +
--- a/ionic/components/nav/test/user-app/index.ts
+++ b/ionic/components/nav/test/user-app/index.ts
@ -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);
-});
--- 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';
--- 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 {
--- 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]
 })
--- 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 {
  /**
--- 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 {
--- 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 {
  /**
--- 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]
 })

--- 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");
 });
--- 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)]
 })
--- 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 {
  /**
--- 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 {
--- 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)]
 })
--- 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>' +
--- 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';
--- 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>' +
--- 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]
 * })
 * ```
--- 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',