let there be typescript

gulpfile.js

@@ -20,6 +20,7 @@ var exec = require('child_process').exec;
 var babel = require('gulp-babel');
 var traceur = require('gulp-traceur');
 var webpack = require('gulp-webpack');
+var tsc = require('gulp-typescript');
 var lazypipe = require('lazypipe');
 var cache = require('gulp-cached');
 var connect = require('gulp-connect');
@@ -59,7 +60,7 @@ gulp.task('watch', function() {
     'serve',
 
     function() {
-      watch(['ionic/**/*.js', '!ionic/components/*/test/**/*'], function() {
+      watch(['ionic/**/*.js', 'ionic/**/*.ts', '!ionic/components/*/test/**/*'], function() {
         runSequence(
           'transpile',
           'bundle.js',
@@ -92,7 +93,7 @@ var traceurOptions = {
   annotations: true,
   types: true,
   outputLanguage: 'es6'
-}
+};
 
 var babelOptions = {
   optional: ['es7.decorators'],
@@ -122,14 +123,32 @@ var exampleBabelOptions = {
   }
 };
 
+var tscOptions = {
+  target: 'ES6',
+  // Don't use the version of typescript that gulp-typescript depends on, we need 1.5
+  // see https://github.com/ivogabe/gulp-typescript#typescript-version
+  typescript: require('typescript'),
+  allowNonTsExtensions: true,
+  isolatedModules: true,
+  //declaration: true, //generate d.ts files
+  emitDecoratorMetadata: true,
+  experimentalDecorators: true,
+  noEmitOnError: false,  // ignore errors
+  rootDir: '.'
+}
+
 gulp.task('transpile', function() {
-  return gulp.src(['ionic/**/*.js', '!ionic/components/*/test/**/*', '!ionic/init.js'])
+  var stream = gulp.src(['ionic/**/*.ts', 'ionic/**/*.js', '!ionic/components/*/test/**/*', '!ionic/init.js'])
              .pipe(cache('transpile', { optimizeMemory: true }))
-             .pipe(traceur(traceurOptions))
-             .on('error', function (err) {
-               console.log("ERROR: " + err.message);
-               this.emit('end');
-             })
+             .pipe(tsc(tscOptions, null, tsc.reporter.nullReporter()))
+            // .on('error', function(error) {
+            //   stream.emit('error', error);
+            // })
+            // .pipe(traceur(traceurOptions))
+            // .on('error', function (err) {
+            //   console.log("ERROR: " + err.message);
+            //   this.emit('end');
+            // })
              .pipe(gulp.dest('dist/js/es6/ionic'))
              .pipe(babel(babelOptions))
              .on('error', function (err) {
@@ -137,6 +156,8 @@ gulp.task('transpile', function() {
                this.emit('end');
              })
              .pipe(gulp.dest('dist/js/es5/ionic'))
+
+  return stream;
 });
 
 gulp.task('bundle.js', function() {
@@ -166,18 +187,19 @@ gulp.task('bundle.js', function() {
 
 gulp.task('examples', function() {
   var buildTest = lazypipe()
-             .pipe(traceur, traceurOptions)
+             //.pipe(traceur, traceurOptions)
+             .pipe(tsc, tscOptions, null, tsc.reporter.nullReporter())
              .pipe(babel, exampleBabelOptions)
 
   // Get each test folder with gulp.src
   return gulp.src('ionic/components/*/test/*/**/*')
     .pipe(cache('examples', { optimizeMemory: true }))
-    .pipe(gulpif(/.js$/, buildTest()))
+    .pipe(gulpif(/.ts$/, buildTest()))
     .on('error', function (err) {
             console.log("ERROR: " + err.message);
             this.emit('end');
         })
-    .pipe(gulpif(/index.js$/, createIndexHTML()))
+    .pipe(gulpif(/index.js$/, createIndexHTML())) //TSC changes .ts to .js
     .pipe(rename(function(file) {
       file.dirname = file.dirname.replace(path.sep + 'test' + path.sep, path.sep)
     }))

ionic/components/action-menu/action-menu.ts

@@ -6,79 +6,59 @@
 * The ActionMenu is a modal menu with options to select based on an action.
 */
 
-import {NgIf, NgFor} from 'angular2/angular2';
-import {View} from 'angular2/src/core/annotations_impl/view';
-import {Injectable} from 'angular2/di';
+import {View, Injectable, NgFor, NgIf} from 'angular2/angular2';
 
-import {Icon} from 'ionic/ionic';
 import {IonicApp} from '../app/app';
+import {Overlay} from '../overlay/overlay';
+import {Animation} from '../../animations/animation';
 import * as util from 'ionic/util';
 
-import {Overlay} from '../overlay/overlay';
-import {IonicComponent} from '../../config/annotations';
-import {Animation} from 'ionic/animations/animation';
 
-
-@IonicComponent(ActionMenu)
 @View({
   template: `
-    <div class="action-menu-backdrop" (click)="cancel()"></div>
+    <div class="action-menu-backdrop" (click)="_cancel()"></div>
     <div class="action-menu-wrapper">
       <div class="action-menu-container">
         <div class="action-menu-group action-menu-options">
-          <div class="action-menu-title" *ng-if="options.titleText">{{options.titleText}}</div>
-          <button (click)="_buttonClicked(index)" *ng-for="#b of options.buttons; #index = index" class="action-menu-option">{{b.text}}</button>
-          <button *ng-if="options.destructiveText" (click)="_destructiveButtonClicked()" class="destructive action-menu-destructive">{{options.destructiveText}}</button>
+          <div class="action-menu-title" *ng-if="titleText">{{titleText}}</div>
+          <button (click)="_buttonClicked(index)" *ng-for="#b of buttons; #index = index" class="action-menu-option">{{b.text}}</button>
+          <button *ng-if="destructiveText" (click)="_destructive()" class="destructive action-menu-destructive">{{destructiveText}}</button>
         </div>
-        <div class="action-menu-group action-menu-cancel" *ng-if="options.cancelText">
-          <button (click)="cancel()">{{options.cancelText}}</button>
+        <div class="action-menu-group action-menu-cancel" *ng-if="cancelText">
+          <button (click)="_cancel()">{{cancelText}}</button>
         </div>
       </div>
     </div>`,
-  directives: [Icon, NgIf, NgFor]
+  directives: [NgFor, NgIf]
 })
-@Injectable()
-export class ActionMenu extends Overlay {
+class ActionMenuDirective {
 
-  static get config() {
-    return {
-      selector: 'ion-action-menu',
-      host: {
-        '[style.z-index]': 'zIndex'
-      }
-    }
+  _cancel() {
+    this.cancel && this.cancel();
+    return this.overlayRef.close();
   }
 
-  constructor(app: IonicApp) {
-    super(app);
-
-    this.extendOptions({
-      destructiveButtonClicked: util.noop,
-      buttonClicked: util.noop,
-      cancel: util.noop,
-      enterAnimation: 'action-menu-slide-in',
-      leaveAnimation: 'action-menu-slide-out'
-    });
-  }
-
-  cancel() {
-    this.options.cancel();
-    this.close();
-  }
-
-  _destructiveButtonClicked() {
-    let shouldClose = this.options.destructiveButtonClicked();
+  _destructive() {
+    let shouldClose = this.destructiveButtonClicked();
     if (shouldClose === true) {
-      return this.close();
+      return this.overlayRef.close();
     }
   }
 
   _buttonClicked(index) {
-    let shouldClose = this.options.buttonClicked(index);
+    let shouldClose = this.buttonClicked(index);
     if (shouldClose === true) {
-      return this.close();
+      return this.overlayRef.close();
     }
   }
+}
+
+
+@Injectable()
+export class ActionMenu extends Overlay {
+  constructor(app: IonicApp) {
+    super(app);
+  }
 
   /**
    * Create and open a new Action Menu. This is the
@@ -86,8 +66,13 @@ export class ActionMenu extends Overlay {
    *
    * @return Promise that resolves when the action menu is open.
    */
-  open(opts) {
-    return this.create(OVERLAY_TYPE, ActionMenu, opts);
+  open(opts={}) {
+    let defaults = {
+      enterAnimation: 'action-menu-slide-in',
+      leaveAnimation: 'action-menu-slide-out'
+    };
+
+    return this.create(OVERLAY_TYPE, ActionMenuDirective, util.extend(defaults, opts), opts);
   }
 
   get() {
@@ -96,7 +81,7 @@ export class ActionMenu extends Overlay {
 
 }
 
-const OVERLAY_TYPE = 'actionmenu';
+const OVERLAY_TYPE = 'action-menu';
 
 
 /**

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

@@ -1,25 +1,23 @@
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
+import {Component} from 'angular2/angular2';
 
-import {IonicView} from 'ionic/ionic';
-import {ActionMenu} from 'ionic/components/action-menu/action-menu';
+import {IonicView, ActionMenu} from 'ionic/ionic';
 
 
 @Component({
-  selector: 'ion-app',
-  appInjector: [ActionMenu]
+  selector: 'ion-app'
 })
 @IonicView({
   templateUrl: 'main.html'
 })
 class IonicApp {
 
-  constructor(ActionMenu: ActionMenu) {
-    this.ActionMenu = ActionMenu;
+  constructor(actionMenu: ActionMenu) {
+    this.actionMenu = actionMenu;
   }
 
   openMenu() {
 
-    this.ActionMenu.open({
+    this.actionMenu.open({
       buttons: [
         { text: 'Share This' },
         { text: 'Move' }
@@ -39,8 +37,8 @@ class IonicApp {
         return true;
       }
 
-    }).then(actionMenu => {
-      this.actionMenu = actionMenu;
+    }).then(actionMenuRef => {
+      this.actionMenuRef = actionMenuRef;
     });
 
   }

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

@@ -1,4 +1,4 @@
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
+import {Component} from 'angular2/angular2';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 import {IonicView} from 'ionic/ionic';

ionic/components/app/app.ts

@@ -1,8 +1,5 @@
-import {bootstrap} from 'angular2/angular2';
+import {bootstrap, Compiler, ElementRef, NgZone, bind, ViewRef} from 'angular2/angular2';
 import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
-import {Compiler} from 'angular2/angular2';
-import {ElementRef} from 'angular2/src/core/compiler/element_ref';
-import {bind} from 'angular2/di';
 import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 import {NgZone} from 'angular2/src/core/zone/ng_zone';
 
@@ -12,6 +9,10 @@ import {Platform} from '../../platform/platform';
 import {Registry} from '../../registry';
 import * as util from '../../util/util';
 
+// injectables
+import {ActionMenu} from '../action-menu/action-menu';
+import {Modal} from '../modal/modal';
+
 
 export class IonicApp {
 
@@ -77,7 +78,7 @@ export class IonicApp {
    * @param Component the ComponentType to create and insert
    * @return Promise that resolves with the ContainerRef created
    */
-  appendComponent(ComponentType: Type) {
+  appendComponent(ComponentType: Type, context=null) {
     return new Promise((resolve, reject) => {
       let injector = this.injector();
       let compiler = injector.get(Compiler);
@@ -86,19 +87,18 @@ export class IonicApp {
       let viewContainerLocation = rootComponentRef.location;
 
       compiler.compileInHost(ComponentType).then(protoViewRef => {
-
         let atIndex = 0;
-        let context = null;
 
         let hostViewRef = viewMngr.createViewInContainer(
                                       viewContainerLocation,
                                       atIndex,
                                       protoViewRef,
-                                      context,
+                                      null,
                                       injector);
 
         hostViewRef.elementRef = new ElementRef(hostViewRef, 0, viewMngr._renderer);
         hostViewRef.instance = viewMngr.getComponent(hostViewRef.elementRef);
+        util.extend(hostViewRef.instance, context);
 
         hostViewRef.dispose = () => {
           viewMngr.destroyViewInContainer(viewContainerLocation, 0, 0, hostViewRef.viewRef);
@@ -107,30 +107,31 @@ export class IonicApp {
         resolve(hostViewRef);
 
       }).catch(err => {
-        console.error('IonicApp appendComponent:', err);
+        console.error('appendComponent:', err);
         reject(err);
       });
     });
   }
 
-  applyCss(bodyEle, platform, config) {
-    let className = bodyEle.className;
-
+  applyBodyCss(bodyClassList, platform, config) {
     let versions = platform.versions();
     platform.platforms().forEach(platformName => {
-      // platform-ios platform-ios_8 platform-ios_8_3
-      let platformClass = ' platform-' + platformName;
-      className += platformClass;
+      // platform-ios
+      let platformClass = 'platform-' + platformName;
+      bodyClassList.add(platformClass);
 
       let platformVersion = versions[platformName];
       if (platformVersion) {
+        // platform-ios_8
         platformClass += '_' + platformVersion.major;
-        className += platformClass + platformClass + '_' + platformVersion.minor;
+        bodyClassList.add(platformClass);
+
+        // platform-ios_8_3
+        bodyClassList.add(platformClass + '_' + platformVersion.minor);
       }
     });
 
-    className += ' mode-' + config.setting('mode');
-    bodyEle.className = className.trim();
+    bodyClassList.add('mode-' + config.setting('mode'));
   }
 
   isRTL(val) {
@@ -176,7 +177,7 @@ export function ionicBootstrap(ComponentType, config, router) {
 
       // config and platform settings have been figured out
       // apply the correct CSS to the app
-      app.applyCss(document.body, Platform, config);
+      app.applyBodyCss(document.body.classList, Platform, config);
 
       // prepare the ready promise to fire....when ready
       Platform.prepareReady(config);
@@ -188,11 +189,17 @@ export function ionicBootstrap(ComponentType, config, router) {
       // TODO: don't wire these together
       app.router = router;
 
+      // TODO: probs need a better way to inject global injectables
+      let actionMenu = new ActionMenu(app);
+      let modal = new Modal(app);
+
       // add injectables that will be available to all child components
       let injectableBindings = [
         bind(IonicApp).toValue(app),
         bind(IonicConfig).toValue(config),
-        bind(IonicRouter).toValue(router)
+        bind(IonicRouter).toValue(router),
+        bind(ActionMenu).toValue(actionMenu),
+        bind(Modal).toValue(modal)
       ];
 
       bootstrap(ComponentType, injectableBindings).then(appRef => {

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

@@ -1,8 +1,8 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component, View} from 'angular2/angular2';
 
 import {Animation} from 'ionic/ionic';
 
+
 let opacity = 0.2;
 let rotateZ = '180deg';
 let translateX = '100px';

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

@@ -1,6 +1,4 @@
-import {For, Parent} from 'angular2/angular2'
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component, View, Directive} from 'angular2/angular2';
 
 import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
 import {Log} from 'ionic/util'

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

@@ -1,5 +1,3 @@
-import {Promise} from 'angular2/src/facade/async';
-
 var APIUrl = 'https://hacker-news.firebaseio.com/v0/';
 
 export class HackerNewsClient {
@@ -29,5 +27,4 @@ export class HackerNewsClient {
   }
 }
 
-var HackerNews = new HackerNewsClient();
-export { HackerNews };
+export var HackerNews = new HackerNewsClient();

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

@@ -1,4 +1,4 @@
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
+import {Component} from 'angular2/angular2';
 
 import {NavController, IonicView} from 'ionic/ionic';
 

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

@@ -1,7 +1,4 @@
-import {NgFor} from 'angular2/angular2';
-import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component, View, NgFor} from 'angular2/angular2';
 
 import {NavController, NavParams, NavbarTemplate, Navbar, Content, Nav, List, Item} from 'ionic/ionic';
 

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

@@ -1,5 +1,4 @@
-import {ElementRef} from 'angular2/angular2';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Component, Directive, ElementRef} from 'angular2/angular2';
 import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
 
 import {Routable, NavController, IonicView} from 'ionic/ionic';
@@ -17,27 +16,6 @@ class AppPage {
   }
 }
 
-
-/**
- * Main app entry point
- */
-@Component({ selector: 'ion-app' })
-@IonicView({
-  directives: [ParallaxEffect],
-  templateUrl: 'main.html'
-})
-class IonicApp {
-  constructor() {
-    this.rootView = AppPage
-
-    this.menuOpenAmount = 0;
-  }
-
-  onMenuOpening(amt) {
-    this.menuOpenAmount = amt;
-  }
-}
-
 @Directive({
   selector: '[parallax]',
   properties: [
@@ -71,6 +49,27 @@ export class ParallaxEffect {
   }
 }
 
+
+/**
+ * Main app entry point
+ */
+@Component({ selector: 'ion-app' })
+@IonicView({
+  directives: [ParallaxEffect],
+  templateUrl: 'main.html'
+})
+class IonicApp {
+  constructor() {
+    this.rootView = AppPage
+
+    this.menuOpenAmount = 0;
+  }
+
+  onMenuOpening(amt) {
+    this.menuOpenAmount = amt;
+  }
+}
+
 export function main(ionicBootstrap) {
   ionicBootstrap(IonicApp);
 }

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

@@ -1,18 +1,16 @@
-import {bind, Injector} from 'angular2/di';
-import {bootstrap, ElementRef, NgFor} from 'angular2/angular2'
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-
+import {Component} from 'angular2/angular2';
 import {Control, ControlGroup, formDirectives} from 'angular2/forms';
 
 import {IonicView, Http} from 'ionic/ionic';
 
+
 let testUrl = 'https://ionic-api-tester.herokuapp.com/json';
 let testUrl404 = 'https://ionic-api-tester.herokuapp.com/404';
 
+
 @Component({ selector: 'ion-app' })
 @IonicView({
-  templateUrl: 'main.html',
-  directives: [formDirectives]
+  templateUrl: 'main.html'
 })
 class IonicApp {
   constructor() {

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

@@ -1,6 +1,5 @@
-import {bind, Injector} from 'angular2/di';
-import {bootstrap, ElementRef, NgFor} from 'angular2/angular2'
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {ElementRef} from 'angular2/angular2'
+import {Component, Directive} from 'angular2/angular2';
 import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
 
 import {Modal, Animation, Content} from 'ionic/ionic';
@@ -8,23 +7,6 @@ import {NavController, NavParams, IonicView} from 'ionic/ionic';
 import {dom} from 'ionic/util';
 
 
-@Component({ selector: 'ion-app' })
-@IonicView({
-  templateUrl: 'main.html',
-  directives: [ParallaxEffect]
-})
-class IonicApp {
-  constructor() {
-
-    this.items = [];
-    for(let i = 0; i < 100; i++) {
-      this.items.push({
-        title: 'Item ' + i
-      })
-    }
-  }
-}
-
 @Directive({
   selector: '[parallax]',
   properties: [
@@ -57,6 +39,24 @@ export class ParallaxEffect {
   }
 }
 
+
+@Component({ selector: 'ion-app' })
+@IonicView({
+  templateUrl: 'main.html',
+  directives: [ParallaxEffect]
+})
+class IonicApp {
+  constructor() {
+
+    this.items = [];
+    for(let i = 0; i < 100; i++) {
+      this.items.push({
+        title: 'Item ' + i
+      })
+    }
+  }
+}
+
 export function main(ionicBootstrap) {
   ionicBootstrap(IonicApp);
 }

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

@@ -1,4 +1,4 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Component, Directive} from 'angular2/angular2';
 
 import {IonicApp, IonicView, Register} from 'ionic/ionic';
 

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

@@ -1,10 +1,8 @@
-import {NgFor} from 'angular2/angular2';
-import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component, Directive, View} from 'angular2/angular2';
 
 import {ActionMenu, NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
+
 @Component({
   selector: 'ion-view'
 })
@@ -28,15 +26,15 @@ import {ActionMenu, NavbarTemplate, Navbar, NavController, Content} from 'ionic/
   directives: [NavbarTemplate, Navbar, Content]
 })
 export class ActionMenuPage {
-  constructor(nav: NavController) {
+  constructor(nav: NavController, actionMenu: ActionMenu) {
     this.nav = nav;
-    window.nav = nav;
+    this.actionMenu = actionMenu;
   }
 
   openMenu() {
     console.log('Opening ActionMenu')
 
-    ActionMenu.open({
+    this.actionMenu.open({
       buttons: [
         { text: '<b>Share</b> This' },
         { text: 'Move' }
@@ -56,8 +54,8 @@ export class ActionMenuPage {
         if(index == 1) { return false; }
         return true;
       }
-    }).then(actionMenu => {
-      this.actionMenu = actionMenu;
+    }).then(actionMenuRef => {
+      this.actionMenuRef = actionMenuRef;
     })
   }
 

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

@@ -1,11 +1,9 @@
-import {NgFor, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
-import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component, Directive, View} from 'angular2/angular2';
 
 import {List, Item, ActionMenu, Modal, ModalRef,
   NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
+
 @Component({
   selector: 'ion-view'
 })

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

@@ -1,10 +1,8 @@
-import {NgFor, NgIf} from 'angular2/angular2';
-import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component, View, NgIf} from 'angular2/angular2';
 
 import {Routable, NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
+
 @Component({
   selector: 'ion-view'
 })

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

@@ -1,11 +1,9 @@
-import {NgFor, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
-import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component, Directive, View} from 'angular2/angular2';
 
 import {List, Item, ActionMenu, Modal, ModalRef,
   NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
+
 @Component({
   selector: 'ion-view'
 })

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

@@ -1,13 +1,11 @@
-import {NgFor, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
-import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component, Directive, View} from 'angular2/angular2';
 
 import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
 
 import {List, Item, Input, ActionMenu, Modal, ModalRef,
   NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
+
 @Component({
   selector: 'ion-view'
 })

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

@@ -1,11 +1,9 @@
-import {NgFor, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
-import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component, Directive, View} from 'angular2/angular2';
 
 import {List, Item, ActionMenu, Modal, ModalRef,
   NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
+
 @Component({
   selector: 'ion-view'
 })

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

@@ -1,11 +1,9 @@
-import {NgFor, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
-import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component, Directive, View} from 'angular2/angular2';
 
 import {List, Item, ActionMenu, Modal, ModalRef,
   NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
+
 @Component({
   selector: 'ion-view'
 })

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

@@ -1,13 +1,10 @@
-import {NgFor, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
-import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component, Directive, View} from 'angular2/angular2';
 
 import {IonicView, ActionMenu, Modal, NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
+
 @Component({
-  selector: 'ion-view',
-  appInjector: [Modal]
+  selector: 'ion-view'
 })
 @IonicView({
   template: `
@@ -25,18 +22,17 @@ import {IonicView, ActionMenu, Modal, NavbarTemplate, Navbar, NavController, Con
     </p>
     <button primary (click)="openModal()">Open Modal</button>
   </ion-content>
-  `,
-  directives: [NavbarTemplate, Navbar, Content]
+  `
 })
 export class ModalPage {
-  constructor(Modal: Modal) {
-    this.Modal = Modal;
+  constructor(modal: Modal) {
+    this.modal = modal;
   }
 
   openModal() {
     console.log('Opening modal');
 
-    this.Modal.open(MyModal, {
+    this.modal.open(MyModal, {
       enterAnimation: 'my-fade-in',
       leaveAnimation: 'my-fade-out',
       handle: 'my-awesome-modal'
@@ -44,12 +40,8 @@ export class ModalPage {
   }
 }
 
-@IonicComponent(Modal)
+
 @IonicView({
   template: '<ion-content padding><button (click)="close()" primary>Close Modal</button></ion-content>',
 })
-export class MyModal extends Modal {
-  constructor() {
-    super();
-  }
-}
+export class MyModal {}

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

@@ -1,11 +1,9 @@
-import {NgFor, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
-import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component, Directive, View} from 'angular2/angular2';
 
 import {List, Item, ActionMenu, Modal, ModalRef,
   NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
+
 @Component({
   selector: 'ion-view'
 })

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

@@ -1,7 +1,4 @@
-import {NgFor, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
-import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component, Directive, View} from 'angular2/angular2';
 import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
 
 import {Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalRef,

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

@@ -1,6 +1,6 @@
 import {NgFor, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
 import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Component, Directive} from 'angular2/angular2';
 import {View} from 'angular2/src/core/annotations_impl/view';
 import {FormBuilder, Validators, formDirectives, Control, ControlGroup} from 'angular2/forms';
 

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

@@ -1,11 +1,9 @@
-import {NgFor, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
-import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component, Directive, View} from 'angular2/angular2';
 
 import {Slides, Slide, SlidePager, List, Item, ActionMenu, Modal, ModalRef,
   NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
+
 @Component({
   selector: 'ion-view'
 })

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

@@ -1,13 +1,10 @@
-import {NgFor, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
-import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {NgFor, Injector} 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,
   NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
-  console.log(NavbarTemplate, Navbar, Content, formDirectives);
 
 function randomTitle() {
   var items = ['Pizza', 'Pumpkin', 'Apple', 'Bologna', 'Durian', 'Banana', 'Meat pie'];

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

@@ -1,25 +0,0 @@
-import {NgFor, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
-import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
-
-import {NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
-
-@Component({
-  selector: 'ion-view'
-})
-@View({
-  template: `
-  <ion-navbar *navbar><ion-title>Tabs</ion-title></ion-navbar>
-
-  <ion-content class="padding">
-
-  </ion-content>
-  `,
-  directives: [NavbarTemplate, Navbar, Content]
-})
-export class TabsPage {
-  constructor() {
-  }
-}

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

@@ -0,0 +1,20 @@
+import {Component, Directive, View} from 'angular2/angular2';
+import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
+
+import {NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
+
+
+@Component({
+  selector: 'ion-view'
+})
+@View({
+  template: `
+    <ion-navbar *navbar><ion-title>Tabs</ion-title></ion-navbar>
+    <ion-content class="padding"></ion-content>
+  `,
+  directives: [NavbarTemplate, Navbar, Content]
+})
+export class TabsPage {
+  constructor() {
+  }
+}

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

@@ -1,4 +1,4 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Component, Directive} from 'angular2/angular2';
 import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
 
 import {IonicView, Animation, Modal, NavController, NavParams, IonicComponent} from 'ionic/ionic';
@@ -65,22 +65,21 @@ export class FeedPage {
 }
 
 @Component({
-  selector: 'ion-app',
-  appInjector: [Modal]
+  selector: 'ion-app'
 })
 @IonicView({
   templateUrl: 'main.html'
 })
 class IonicApp {
-  constructor(Modal: Modal) {
-    this.Modal = Modal;
+  constructor(modal: Modal) {
+    this.modal = modal;
     this.rootView = FeedPage;
   }
 
   openHeart() {
     console.log('openHeart');
 
-    this.Modal.open(HeartModal, {
+    this.modal.open(HeartModal, {
       enterAnimation: 'my-fade-in',
       leaveAnimation: 'my-fade-out'
     });
@@ -89,25 +88,23 @@ class IonicApp {
   openGear() {
     console.log('openGear');
 
-    this.Modal.open(SettingsModal, {
+    this.modal.open(SettingsModal, {
       enterAnimation: 'my-fade-in',
       leaveAnimation: 'my-fade-out'
     });
   }
 }
 
-@IonicComponent(Modal)
 @IonicView({
   template: '<ion-view id="settings-modal"><ion-content padding><button primary (click)="close()">Close</button></ion-content></ion-view>'
 })
-export class SettingsModal extends Modal {}
+export class SettingsModal {}
 
 
-@IonicComponent(Modal)
 @IonicView({
   template: '<ion-view id="heart-modal"><button icon (^click)="close()"><i class="icon ion-close"></i></button><h2>20</h2><p>You\'re pretty awesome</p></ion-view>'
 })
-export class HeartModal extends Modal {}
+export class HeartModal {}
 
 
 export function main(ionicBootstrap) {

ionic/components/app/test/snapcat/main.html

@@ -45,7 +45,6 @@
     background-color: #F5F5F5;
   }
   .platform-ios ion-toolbar {
-    height: 64px !important;
     padding-top: 20px;
   }
   ion-content {

ionic/components/app/test/typography/index.js

@@ -1,13 +0,0 @@
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-
-@Component({ selector: 'ion-app' })
-@View({
-  templateUrl: 'main.html'
-})
-class IonicApp {}
-
-export function main(ionicBootstrap) {
-  ionicBootstrap(IonicApp);
-}

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

@@ -0,0 +1,12 @@
+import {Component, View} from 'angular2/angular2';
+
+
+@Component({ selector: 'ion-app' })
+@View({
+  templateUrl: 'main.html'
+})
+class IonicApp {}
+
+export function main(ionicBootstrap) {
+  ionicBootstrap(IonicApp);
+}

ionic/components/app/test/weather/flickr.ts

@@ -0,0 +1,35 @@
+import {Http} from 'ionic/net/http';
+
+let FLICKR_API_KEY = '504fd7414f6275eb5b657ddbfba80a2c';
+
+let baseUrl = 'https://api.flickr.com/services/rest/';
+
+export class Flickr {
+  constructor() {
+
+    /*
+    var flickrSearch = $resource(baseUrl, {
+      method: 'flickr.groups.pools.getPhotos',
+      group_id: '1463451@N25',
+      safe_search: 1,
+      jsoncallback: 'JSON_CALLBACK',
+      api_key: FLICKR_API_KEY,
+      format: 'json'
+    }, {
+      get: {
+        method: 'JSONP'
+      }
+    });
+    */
+  }
+
+  static search(tags, lat, lng) {
+    return new Promise((resolve, reject) => {
+      Http.get(baseUrl + '?method=flickr.groups.pools.getPhotos&group_id=1463451@N25&safe_search=1&api_key=' + FLICKR_API_KEY + '&format=json&tags=' + tags + '&lat=' + lat + '&lng=' + lng).then((val) => {
+        resolve(val);
+      }, (err) => {
+        reject(httpResponse);
+      })
+    })
+  }
+}

ionic/components/app/test/weather/geo.ts

@@ -0,0 +1,56 @@
+export class Geo {
+  static reverseGeocode(lat, lng) {
+    return new Promise((resolve, reject) => {
+
+      let geocoder = new google.maps.Geocoder();
+
+      geocoder.geocode({
+        'latLng': new google.maps.LatLng(lat, lng)
+      }, (results, status) => {
+
+        if (status == google.maps.GeocoderStatus.OK) {
+
+          console.log('Reverse', results);
+
+          if(results.length > 1) {
+            var r = results[1];
+            var a, types;
+            var parts = [];
+            var foundLocality = false;
+            var foundState = false;
+
+            for(var i = 0; i < r.address_components.length; i++) {
+              a = r.address_components[i];
+              types = a.types;
+              for(var j = 0; j < types.length; j++) {
+                if(!foundLocality && types[j] == 'locality') {
+                  foundLocality = true;
+                  parts.push(a.long_name);
+                } else if(!foundState && types[j] == 'administrative_area_level_1') {
+                  foundState = true;
+                  parts.push(a.short_name);
+                }
+              }
+            }
+
+            console.log('Reverse', parts);
+            resolve(parts.join(', '));
+          }
+        } else {
+          console.log('reverse fail', results, status);
+          reject(results);
+        }
+      });
+    });
+  }
+
+  static getLocation() {
+    return new Promise((resolve, reject) => {
+      navigator.geolocation.getCurrentPosition((position) => {
+        resolve(position);
+      }, (error) => {
+        reject(error);
+      })
+    });
+  }
+}

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

@@ -0,0 +1,123 @@
+import {Component, Directive} from 'angular2/angular2';
+import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
+
+import {IonicView, Animation, Modal, NavController, NavParams, IonicComponent} from 'ionic/ionic';
+
+import {Geo} from './geo';
+import {Weather} from './weather';
+import {Flickr} from './flickr';
+
+console.log('Imported', Geo, Weather, Flickr);
+
+@Component({
+  selector: 'ion-app',
+})
+@IonicView({
+  templateUrl: 'main.html'
+})
+class WeatherApp {
+  constructor(modal: Modal) {
+    this.modal = Modal;
+
+    this.currentLocationString = 'Madison, WI';
+    this.current = {
+      local_tz_short: 'CDT'
+    };
+
+    this.activeBgImageIndex = 0;
+
+    /*
+    $ionicPlatform.ready(function() {
+      // Hide the status bar
+      if(window.StatusBar) {
+        StatusBar.hide();
+      }
+    });
+    */
+
+  }
+
+  onInit() {
+    this.refreshData();
+  }
+
+  showSettings() {
+    this.modal.open(SettingsModal).then((settingsModal) => {
+      this.settingsModal = settingsModal;
+    });
+  }
+
+  getBackgroundImage(lat, lng, locString) {
+    Flickr.search(locString, lat, lng).then((resp) => {
+      let photos = resp.photos;
+      if(photos.photo.length) {
+        this.bgImages = photos.photo;
+        this.cycleBgImages();
+      }
+    }, (error) => {
+      console.error('Unable to get Flickr images', error);
+    });
+  }
+
+  getCurrent(lat, lng, locString) {
+    Weather.getAtLocation(lat, lng).then((resp) => {
+      this.current = resp.data;
+      console.log('GOT CURRENT', this.current);
+    }, (error) => {
+      alert('Unable to get current conditions');
+      console.error(error);
+    });
+  }
+
+  cycleBgImages() {
+    setTimeout(() => {
+      if(this.bgImages) {
+        this.activeBgImage = this.bgImages[this.activeBgImageIndex++ % this.bgImages.length];
+      }
+    });
+  }
+
+  refreshData() {
+    Geo.getLocation().then((position) => {
+      let lat = position.coords.latitude;
+      let lng = position.coords.longitude;
+
+      Geo.reverseGeocode(lat, lng).then((locString) => {
+        this.currentLocationString = locString;
+        this.getBackgroundImage(lat, lng, locString);
+      });
+
+      this.getCurrent(lat, lng);
+    }, (error) => {
+      alert('Unable to get current location: ' + error);
+    });
+  }
+}
+
+/*
+.controller('SettingsCtrl', function($scope, Settings) {
+  $scope.settings = Settings.getSettings();
+
+  // Watch deeply for settings changes, and save them
+  // if necessary
+  $scope.$watch('settings', function(v) {
+    Settings.save();
+  }, true);
+
+  $scope.closeSettings = function() {
+    $scope.modal.hide();
+  };
+
+});
+*/
+
+@IonicView({
+  template: '<ion-view id="settings-modal"><ion-content padding><button primary (click)="close()">Close</button></ion-content></ion-view>'
+})
+export class SettingsModal {
+
+}
+
+export function main(ionicBootstrap) {
+  ionicBootstrap(WeatherApp);
+}

ionic/components/app/test/weather/weather.ts

@@ -0,0 +1,12 @@
+import {Http} from 'ionic/net/http';
+
+let WUNDERGROUND_API_KEY = '1cc2d3de40fa5af0';
+
+let FORECASTIO_KEY = '4cd3c5673825a361eb5ce108103ee84a';
+
+export class Weather {
+  static getAtLocation(lat, lng) {
+    let url = 'https://api.forecast.io/forecast/' + FORECASTIO_KEY + '/';
+    return Http.get(url + lat + ',' + lng);
+  }
+}

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

@@ -1,4 +1,4 @@
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
+import {Component} from 'angular2/angular2';
 
 import {IonicView, NavController} from 'ionic/ionic';
 

ionic/components/aside/aside.ts

@@ -1,8 +1,6 @@
-import {EventEmitter, ElementRef} from 'angular2/angular2'
-import {onInit} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {View, EventEmitter, ElementRef, onInit} from 'angular2/angular2';
 
-import {IonicComponent} from '../../config/annotations';
+import {IonicComponent, IonicView} from '../../config/annotations';
 import * as types from './extensions/types'
 import * as gestures from  './extensions/gestures'
 import {dom} from 'ionic/util'
@@ -11,40 +9,36 @@ import {dom} from 'ionic/util'
  * TODO (?) add docs about how to have a root aside and a nested aside, then hide the root one
  */
 
-@IonicComponent(Aside)
+@IonicComponent({
+  selector: 'ion-aside',
+  properties: [
+    'content',
+    'dragThreshold'
+  ],
+  defaultProperties: {
+    'side': 'left',
+    'type': 'reveal'
+  },
+  delegates: {
+    gesture: [
+      [instance => instance.side == 'top', gestures.TopAsideGesture],
+      [instance => instance.side == 'bottom', gestures.BottomAsideGesture],
+      [instance => instance.side == 'right', gestures.RightAsideGesture],
+      [instance => instance.side == 'left', gestures.LeftAsideGesture],
+    ],
+    type: [
+      [instance => instance.type == 'overlay', types.AsideTypeOverlay],
+      [instance => instance.type == 'reveal', types.AsideTypeReveal],
+      [instance => instance.type == 'push', types.AsideTypePush],
+    ]
+  },
+  events: ['opening']
+})
 @View({
   template: `<content></content>`
 })
 export class Aside {
 
-  static get config() {
-    return {
-      selector: 'ion-aside',
-      properties: [
-        'content',
-        'dragThreshold'
-      ],
-      defaultProperties: {
-        'side': 'left',
-        'type': 'reveal'
-      },
-      delegates: {
-        gesture: [
-          [instance => instance.side == 'top', gestures.TopAsideGesture],
-          [instance => instance.side == 'bottom', gestures.BottomAsideGesture],
-          [instance => instance.side == 'right', gestures.RightAsideGesture],
-          [instance => instance.side == 'left', gestures.LeftAsideGesture],
-        ],
-        type: [
-          [instance => instance.type == 'overlay', types.AsideTypeOverlay],
-          [instance => instance.type == 'reveal', types.AsideTypeReveal],
-          [instance => instance.type == 'push', types.AsideTypePush],
-        ]
-      },
-      events: ['opening']
-    }
-  }
-
   constructor(elementRef: ElementRef) {
     this.ele = elementRef.nativeElement
 

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

@@ -1,4 +1,4 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Component, Directive} from 'angular2/angular2';
 
 import {IonicView} from 'ionic/ionic';
 

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

@@ -1,14 +0,0 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-
-import {IonicView} from 'ionic/ionic';
-
-
-@Component({ selector: 'ion-app' })
-@IonicView({
-  templateUrl: 'main.html'
-})
-class IonicApp {}
-
-export function main(ionicBootstrap) {
-  ionicBootstrap(IonicApp);
-}

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

@@ -1,4 +1,4 @@
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
+import {Component} from 'angular2/angular2';
 
 import {IonicView} from 'ionic/ionic';
 

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

@@ -1,14 +0,0 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-
-import {IonicView} from 'ionic/ionic';
-
-
-@Component({ selector: 'ion-app' })
-@IonicView({
-  templateUrl: 'main.html'
-})
-class IonicApp {}
-
-export function main(ionicBootstrap) {
-  ionicBootstrap(IonicApp);
-}

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

@@ -1,4 +1,4 @@
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
+import {Component} from 'angular2/angular2';
 
 import {IonicView} from 'ionic/ionic';
 

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

@@ -1,14 +0,0 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-
-import {IonicView} from 'ionic/ionic';
-
-
-@Component({ selector: 'ion-app' })
-@IonicView({
-  templateUrl: 'main.html'
-})
-class IonicApp {}
-
-export function main(ionicBootstrap) {
-  ionicBootstrap(IonicApp);
-}

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

@@ -1,4 +1,4 @@
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
+import {Component} from 'angular2/angular2';
 
 import {IonicView} from 'ionic/ionic';
 

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

@@ -1,14 +0,0 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-
-import {IonicView} from 'ionic/ionic';
-
-
-@Component({ selector: 'ion-app' })
-@IonicView({
-  templateUrl: 'main.html'
-})
-class IonicApp {}
-
-export function main(ionicBootstrap) {
-  ionicBootstrap(IonicApp);
-}

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

@@ -1,4 +1,4 @@
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
+import {Component} from 'angular2/angular2';
 
 import {IonicView} from 'ionic/ionic';
 

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

@@ -1,14 +0,0 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-
-import {IonicView} from 'ionic/ionic';
-
-
-@Component({ selector: 'ion-app' })
-@IonicView({
-  templateUrl: 'main.html'
-})
-class IonicApp {}
-
-export function main(ionicBootstrap) {
-  ionicBootstrap(IonicApp);
-}

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

@@ -0,0 +1,14 @@
+import {Component} from 'angular2/angular2';
+
+import {IonicView} from 'ionic/ionic';
+
+
+@Component({ selector: 'ion-app' })
+@IonicView({
+  templateUrl: 'main.html'
+})
+class IonicApp {}
+
+export function main(ionicBootstrap) {
+  ionicBootstrap(IonicApp);
+}

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

@@ -1,14 +0,0 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-
-import {IonicView} from 'ionic/ionic';
-
-
-@Component({ selector: 'ion-app' })
-@IonicView({
-  templateUrl: 'main.html'
-})
-class IonicApp {}
-
-export function main(ionicBootstrap) {
-  ionicBootstrap(IonicApp);
-}

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

@@ -0,0 +1,14 @@
+import {Component} from 'angular2/angular2';
+
+import {IonicView} from 'ionic/ionic';
+
+
+@Component({ selector: 'ion-app' })
+@IonicView({
+  templateUrl: 'main.html'
+})
+class IonicApp {}
+
+export function main(ionicBootstrap) {
+  ionicBootstrap(IonicApp);
+}

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

@@ -1,14 +0,0 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-
-import {IonicView} from 'ionic/ionic';
-
-
-@Component({ selector: 'ion-app' })
-@IonicView({
-  templateUrl: 'main.html'
-})
-class IonicApp {}
-
-export function main(ionicBootstrap) {
-  ionicBootstrap(IonicApp);
-}

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

@@ -0,0 +1,14 @@
+import {Component} from 'angular2/angular2';
+
+import {IonicView} from 'ionic/ionic';
+
+
+@Component({ selector: 'ion-app' })
+@IonicView({
+  templateUrl: 'main.html'
+})
+class IonicApp {}
+
+export function main(ionicBootstrap) {
+  ionicBootstrap(IonicApp);
+}

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

@@ -1,14 +0,0 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-
-import {IonicView} from 'ionic/ionic';
-
-
-@Component({ selector: 'ion-app' })
-@IonicView({
-  templateUrl: 'main.html'
-})
-class IonicApp {}
-
-export function main(ionicBootstrap) {
-  ionicBootstrap(IonicApp);
-}

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

@@ -0,0 +1,14 @@
+import {Component} from 'angular2/angular2';
+
+import {IonicView} from 'ionic/ionic';
+
+
+@Component({ selector: 'ion-app' })
+@IonicView({
+  templateUrl: 'main.html'
+})
+class IonicApp {}
+
+export function main(ionicBootstrap) {
+  ionicBootstrap(IonicApp);
+}

ionic/components/checkbox/checkbox.ts

@@ -1,19 +1,45 @@
-import {ElementRef, Renderer, EventEmitter, onChange} from 'angular2/angular2';
+import {View, ElementRef, Renderer, EventEmitter, onChange, onInit} from 'angular2/angular2';
 import {isPresent} from 'angular2/src/facade/lang';
 import {setProperty} from 'angular2/src/forms/directives/shared'
 
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-import {View} from 'angular2/src/core/annotations_impl/view';
-import {onInit} from 'angular2/angular2';
-
 //pretty sure this has changed in the latest angular
 import {NgControl} from 'angular2/forms';
 import {IonicComponent} from '../../config/annotations';
 import {Icon} from '../icon/icon';
 
 
-@IonicComponent(Checkbox)
+@IonicComponent({
+  selector: 'ion-checkbox',
+  properties: [
+    'checked',
+    'disabled',
+    'value'
+  ],
+  defaultProperties: {
+    'iconOff': 'ion-ios-circle-outline',
+    'iconOn': 'ion-ios-checkmark'
+  },
+  //events: ['change'],
+  host: {
+    '(^click)': 'onClick($event)',
+    //'(change)': 'onChange($event.checked)',
+    '(blur)': 'onTouched()',
+    //'[checked]': 'checked',
+    '[attr.aria-checked]': 'checked',
+    '[attr.aria-disabled]': 'disabled',
+    '[attr.value]': 'value',
+    'role': 'checkbox',
+    'class': 'item',
+    '[class.ng-untouched]': 'ngClassUntouched',
+    '[class.ng-touched]': 'ngClassTouched',
+    '[class.ng-pristine]': 'ngClassPristine',
+    '[class.ng-dirty]': 'ngClassDirty',
+    '[class.ng-valid]': 'ngClassValid',
+    '[class.ng-invalid]': 'ngClassInvalid'
+  },
+  appInjector: [ NgControl ]
+  //lifecycle: [onChange]
+})
 @View({
   template: `
   <div class="item-media media-checkbox">
@@ -28,38 +54,6 @@ import {Icon} from '../icon/icon';
   directives: [Icon]
 })
 export class Checkbox {
-
-  static get config() {
-    return {
-      selector: 'ion-checkbox',
-      properties: [ 'checked', 'disabled', 'value' ],
-      defaultProperties: {
-        'iconOff': 'ion-ios-circle-outline',
-        'iconOn': 'ion-ios-checkmark'
-      },
-      //events: ['change'],
-      host: {
-        '(^click)': 'onClick($event)',
-        //'(change)': 'onChange($event.checked)',
-        '(blur)': 'onTouched()',
-        '[checked]': 'checked',
-        '[attr.aria-checked]': 'checked',
-        '[attr.aria-disabled]': 'disabled',
-        '[attr.value]': 'value',
-        'role': 'checkbox',
-        'class': 'item',
-        '[class.ng-untouched]': 'ngClassUntouched',
-        '[class.ng-touched]': 'ngClassTouched',
-        '[class.ng-pristine]': 'ngClassPristine',
-        '[class.ng-dirty]': 'ngClassDirty',
-        '[class.ng-valid]': 'ngClassValid',
-        '[class.ng-invalid]': 'ngClassInvalid'
-      },
-      appInjector: [ NgControl ],
-      //lifecycle: [onChange]
-    }
-  }
-
   constructor(
     ngControl: NgControl,
     renderer: Renderer,

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

@@ -1,5 +1,4 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component, View} from 'angular2/angular2';
 
 import {Query, QueryList, NgFor} from 'angular2/angular2';
 // import {FormBuilder, Validators, NgFormControl, Control, NgControlName, NgControlGroup, ControlContainer} from 'angular2/forms';

ionic/components/content/content.ts

@@ -0,0 +1,33 @@
+import {Component, View, ElementRef} from 'angular2/angular2';
+
+import {Ion} from '../ion';
+
+
+@Component({
+  selector: 'ion-content',
+  properties: [
+    'parallax'
+  ]
+})
+@View({
+  template: '<div class="scroll-content"><content></content></div>'
+})
+export class Content extends Ion {
+  constructor(elementRef: ElementRef) {
+    super(elementRef);
+
+    setTimeout(() => {
+      this.scrollElement = elementRef.nativeElement.children[0];
+    });
+  }
+
+  addScrollEventListener(handler) {
+    if(!this.scrollElement) { return; }
+
+    this.scrollElement.addEventListener('scroll', handler);
+
+    return () => {
+      this.scrollElement.removeEventListener('scroll', handler);
+    }
+  }
+}

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

@@ -1,4 +1,4 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Component, Directive} from 'angular2/angular2';
 
 import {IonicView} from 'ionic/ionic';
 

ionic/components/form/input/input.ts

@@ -1,4 +1,4 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Component, Directive} from 'angular2/angular2';
 
 
 @Directive({

ionic/components/form/label/label.ts

@@ -1,4 +1,4 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Component, Directive} from 'angular2/angular2';
 
 
 @Directive({

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

@@ -1,4 +1,4 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Component, Directive} from 'angular2/angular2';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';

ionic/components/icon/icon.ts

@@ -1,5 +1,4 @@
-import {Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
-import {ElementRef} from 'angular2/src/core/compiler/element_ref';
+import {Directive, onInit, ElementRef} from 'angular2/angular2';
 
 
 @Directive({

ionic/components/ion.ts

@@ -0,0 +1,31 @@
+import {IonicConfig} from '../config/config';
+
+/**
+ * Base class for all Ionic components. Exposes some common functionality
+ * that all Ionic components need, such as accessing underlying native elements and
+ * sending/receiving app-level events.
+ */
+export class Ion {
+  constructor(elementRef: ElementRef) {
+    this.elementRef = elementRef;
+  }
+
+  getNativeElement() {
+    return this.elementRef.nativeElement;
+  }
+
+  get cssClass() {
+    // IonicConfig.global
+
+    // should be able to set map of classes to add soon:
+    // https://github.com/angular/angular/issues/2364
+
+    let componentId = this.constructor.name;
+
+    // let classes = {};
+    // classes[componentId + '-ios'] = true;
+    // return classes;
+
+    return true;
+  }
+}

ionic/components/item/item-swipe-buttons.ts

@@ -1,5 +1,5 @@
 import {ElementRef, Parent} from 'angular2/angular2'
-import {Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Directive} from 'angular2/angular2';
 import {Item} from 'ionic/components/item/item'
 import {SlideGesture} from 'ionic/gestures/slide-gesture'
 

ionic/components/item/item.ts

@@ -1,13 +1,14 @@
-import {ElementRef} from 'angular2/angular2';
+import {Component, View, ElementRef} from 'angular2/angular2';
 
 import {ItemPrimaryOptions, ItemSecondaryOptions} from './item-options';
 import {ItemPrimarySwipeButtons, ItemSecondarySwipeButtons} from './item-swipe-buttons';
-import {IonicComponent, IonicView} from '../../config/annotations';
 import {dom} from 'ionic/util';
 
 
-@IonicComponent(Item)
-@IonicView({
+@Component({
+  selector: 'ion-item'
+})
+@View({
   template: `
     <!--
     <content select="ion-primary-options"></content>
@@ -38,18 +39,6 @@ import {dom} from 'ionic/util';
   */
 })
 export class Item {
-  static get config() {
-    return {
-      selector: 'ion-item',
-      properties: [
-      ]
-    }
-  }
-
-  onInit() {
-    Item.applyConfig(this);
-  }
-
   constructor(elementRef: ElementRef) {
     this._isOpen = false;
     this._isSlideActive = false;

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

@@ -1,4 +1,4 @@
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
+import {Component} from 'angular2/angular2';
 
 import {IonicView} from 'ionic/ionic';
 

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

@@ -1,4 +1,4 @@
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
+import {Component} from 'angular2/angular2';
 
 import {IonicView} from 'ionic/ionic';
 

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

@@ -4,7 +4,7 @@
       List Header
     </ion-list-header>
 
-    <ion-item *for="#item of items">
+    <ion-item *ng-for="#item of items">
 
       <ion-primary-swipe-buttons>
         <div style="width: 200px; background: red; height: 100%">

ionic/components/layout/layout.ts

@@ -1,4 +1,4 @@
-import {ElementRef, Component, View, Parent} from 'angular2/angular2'
+import {Component, View, ElementRef} from 'angular2/angular2'
 
 
 @Component({

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

@@ -1,18 +0,0 @@
-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 {Layout} from 'ionic/components/layout/layout';
-
-
-@Component({ selector: 'ion-view' })
-@View({
-  templateUrl: 'main.html',
-  directives: [Content, Layout]
-})
-class IonicApp {}
-
-export function main(ionicBootstrap) {
-  ionicBootstrap(IonicApp);
-}
-

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

@@ -0,0 +1,15 @@
+import {Component, View} from 'angular2/angular2';
+
+import {IonicView} from 'ionic/ionic';
+
+
+@Component({ selector: 'ion-app' })
+@IonicView({
+  templateUrl: 'main.html'
+})
+class IonicApp {}
+
+export function main(ionicBootstrap) {
+  ionicBootstrap(IonicApp);
+}
+

ionic/components/list/list.ts

@@ -1,25 +1,19 @@
-import {ElementRef} from 'angular2/angular2';
-import {onInit} from 'angular2/src/core/annotations_impl/annotations';
+import {ElementRef, onInit} from 'angular2/angular2';
 
 import {IonicDirective} from '../../config/annotations';
 import {ListVirtualScroll} from './virtual';
 import * as util from 'ionic/util';
 
 
-@IonicDirective(List)
+@IonicDirective({
+  selector: 'ion-list',
+  properties: [
+    'items',
+    'virtual',
+    'content'
+  ]
+})
 export class List {
-
-  static get config() {
-    return {
-      selector: 'ion-list',
-      properties: [
-        'items',
-        'virtual',
-        'content'
-      ]
-    }
-  }
-
   constructor(elementRef: ElementRef) {
     this.ele = elementRef.nativeElement;
   }

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

@@ -0,0 +1,14 @@
+import {Component} from 'angular2/angular2';
+
+import {IonicView} from 'ionic/ionic';
+
+
+@Component({ selector: 'ion-app' })
+@IonicView({
+  templateUrl: 'main.html'
+})
+class IonicApp {}
+
+export function main(ionicBootstrap) {
+  ionicBootstrap(IonicApp);
+}

ionic/components/list/test/infinite/index.ts

@@ -1,29 +1,9 @@
 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 {Component, Directive, View, Parent} from 'angular2/angular2';
 
 import {Content, List, Item} from 'ionic/ionic';
 
 
-@Component({ selector: 'ion-app' })
-@View({
-  templateUrl: 'main.html',
-  directives: [Content, List, Item, ItemCellTemplate, NgFor]
-})
-class IonicApp {
-  constructor() {
-    console.log('IonicApp Start')
-
-    this.items = []
-    for(let i = 0; i < 1000; i++) {
-      this.items.push({
-        title: 'Item ' + i
-      })
-    }
-  }
-}
-
 /*
   Used to find and register headers in a view, and this directive's
   content will be moved up to the common navbar location, and created
@@ -43,6 +23,25 @@ export class ItemCellTemplate {
   }
 }
 
+
+@Component({ selector: 'ion-app' })
+@View({
+  templateUrl: 'main.html',
+  directives: [Content, List, Item, ItemCellTemplate, NgFor]
+})
+class IonicApp {
+  constructor() {
+    console.log('IonicApp Start')
+
+    this.items = []
+    for(let i = 0; i < 1000; i++) {
+      this.items.push({
+        title: 'Item ' + i
+      })
+    }
+  }
+}
+
 export function main(ionicBootstrap) {
   ionicBootstrap(IonicApp);
 }