diff --git a/gulpfile.js b/gulpfile.js
index 250f3247fe..c9f3e6d2d5 100644
--- a/gulpfile.js
+++ b/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)
     }))
diff --git a/ionic/animations/animation.js b/ionic/animations/animation.ts
similarity index 100%
rename from ionic/animations/animation.js
rename to ionic/animations/animation.ts
diff --git a/ionic/animations/builtins.js b/ionic/animations/builtins.ts
similarity index 100%
rename from ionic/animations/builtins.js
rename to ionic/animations/builtins.ts
diff --git a/ionic/components.js b/ionic/components.ts
similarity index 100%
rename from ionic/components.js
rename to ionic/components.ts
diff --git a/ionic/components/action-menu/action-menu.js b/ionic/components/action-menu/action-menu.ts
similarity index 58%
rename from ionic/components/action-menu/action-menu.js
rename to ionic/components/action-menu/action-menu.ts
index db2175bbfc..202b2c5977 100644
--- a/ionic/components/action-menu/action-menu.js
+++ b/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';
 
 
 /**
diff --git a/ionic/components/action-menu/test/basic/index.js b/ionic/components/action-menu/test/basic/index.ts
similarity index 63%
rename from ionic/components/action-menu/test/basic/index.js
rename to ionic/components/action-menu/test/basic/index.ts
index 2f9b55a854..9e57f8b95d 100644
--- a/ionic/components/action-menu/test/basic/index.js
+++ b/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;
     });
 
   }
diff --git a/ionic/components/alert/alert.js b/ionic/components/alert/alert.ts
similarity index 100%
rename from ionic/components/alert/alert.js
rename to ionic/components/alert/alert.ts
diff --git a/ionic/components/alert/test/basic/index.js b/ionic/components/alert/test/basic/index.ts
similarity index 84%
rename from ionic/components/alert/test/basic/index.js
rename to ionic/components/alert/test/basic/index.ts
index 9d67db658e..f7ec13ba51 100644
--- a/ionic/components/alert/test/basic/index.js
+++ b/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';
diff --git a/ionic/components/app/app.js b/ionic/components/app/app.ts
similarity index 82%
rename from ionic/components/app/app.js
rename to ionic/components/app/app.ts
index 0250b35e27..3f593a170b 100644
--- a/ionic/components/app/app.js
+++ b/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 => {
diff --git a/ionic/components/app/test/animations/index.js b/ionic/components/app/test/animations/index.ts
similarity index 91%
rename from ionic/components/app/test/animations/index.js
rename to ionic/components/app/test/animations/index.ts
index 04f5b7f42a..51223a8ac4 100644
--- a/ionic/components/app/test/animations/index.js
+++ b/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';
diff --git a/ionic/components/app/test/app_spec.js b/ionic/components/app/test/app_spec.ts
similarity index 100%
rename from ionic/components/app/test/app_spec.js
rename to ionic/components/app/test/app_spec.ts
diff --git a/ionic/components/app/test/barkpark/index.js b/ionic/components/app/test/barkpark/index.ts
similarity index 93%
rename from ionic/components/app/test/barkpark/index.js
rename to ionic/components/app/test/barkpark/index.ts
index 6058af9172..bb6c8342d5 100644
--- a/ionic/components/app/test/barkpark/index.js
+++ b/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'
diff --git a/ionic/components/app/test/hn/firebase-debug.js b/ionic/components/app/test/hn/firebase-debug.ts
similarity index 100%
rename from ionic/components/app/test/hn/firebase-debug.js
rename to ionic/components/app/test/hn/firebase-debug.ts
diff --git a/ionic/components/app/test/hn/firebase.js b/ionic/components/app/test/hn/firebase.ts
similarity index 100%
rename from ionic/components/app/test/hn/firebase.js
rename to ionic/components/app/test/hn/firebase.ts
diff --git a/ionic/components/app/test/hn/hn.js b/ionic/components/app/test/hn/hn.ts
similarity index 82%
rename from ionic/components/app/test/hn/hn.js
rename to ionic/components/app/test/hn/hn.ts
index 67599b999b..bd92cf19c6 100644
--- a/ionic/components/app/test/hn/hn.js
+++ b/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();
diff --git a/ionic/components/app/test/hn/index.js b/ionic/components/app/test/hn/index.ts
similarity index 96%
rename from ionic/components/app/test/hn/index.js
rename to ionic/components/app/test/hn/index.ts
index efe2a3f5f7..f56e6ade47 100644
--- a/ionic/components/app/test/hn/index.js
+++ b/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';
 
diff --git a/ionic/components/app/test/hn/pages/single.js b/ionic/components/app/test/hn/pages/single.ts
similarity index 64%
rename from ionic/components/app/test/hn/pages/single.js
rename to ionic/components/app/test/hn/pages/single.ts
index 04be7b8cee..09ce12bdd1 100644
--- a/ionic/components/app/test/hn/pages/single.js
+++ b/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';
 
diff --git a/ionic/components/app/test/music/index.js b/ionic/components/app/test/music/index.ts
similarity index 92%
rename from ionic/components/app/test/music/index.js
rename to ionic/components/app/test/music/index.ts
index 6a2bf1fec5..f98ef8d7c1 100644
--- a/ionic/components/app/test/music/index.js
+++ b/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);
 }
diff --git a/ionic/components/app/test/net/index.js b/ionic/components/app/test/net/index.ts
similarity index 85%
rename from ionic/components/app/test/net/index.js
rename to ionic/components/app/test/net/index.ts
index 4605608cf3..cc0327b9dd 100644
--- a/ionic/components/app/test/net/index.js
+++ b/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() {
diff --git a/ionic/components/app/test/profile/index.js b/ionic/components/app/test/profile/index.ts
similarity index 88%
rename from ionic/components/app/test/profile/index.js
rename to ionic/components/app/test/profile/index.ts
index 6e0fc15c73..27273e3928 100644
--- a/ionic/components/app/test/profile/index.js
+++ b/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);
 }
diff --git a/ionic/components/app/test/sink/index.js b/ionic/components/app/test/sink/index.ts
similarity index 95%
rename from ionic/components/app/test/sink/index.js
rename to ionic/components/app/test/sink/index.ts
index 5603c80fe9..90ea4fef4b 100644
--- a/ionic/components/app/test/sink/index.js
+++ b/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';
 
diff --git a/ionic/components/app/test/sink/pages/action-menu.js b/ionic/components/app/test/sink/pages/action-menu.ts
similarity index 78%
rename from ionic/components/app/test/sink/pages/action-menu.js
rename to ionic/components/app/test/sink/pages/action-menu.ts
index fac89877e9..8420628a71 100644
--- a/ionic/components/app/test/sink/pages/action-menu.js
+++ b/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;
     })
   }
 
diff --git a/ionic/components/app/test/sink/pages/aside.js b/ionic/components/app/test/sink/pages/aside.ts
similarity index 75%
rename from ionic/components/app/test/sink/pages/aside.js
rename to ionic/components/app/test/sink/pages/aside.ts
index 1f66648d43..bd42fd41da 100644
--- a/ionic/components/app/test/sink/pages/aside.js
+++ b/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'
 })
diff --git a/ionic/components/app/test/sink/pages/button.js b/ionic/components/app/test/sink/pages/button.ts
similarity index 83%
rename from ionic/components/app/test/sink/pages/button.js
rename to ionic/components/app/test/sink/pages/button.ts
index eee8f52ace..4b816bb540 100644
--- a/ionic/components/app/test/sink/pages/button.js
+++ b/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'
 })
diff --git a/ionic/components/app/test/sink/pages/card.js b/ionic/components/app/test/sink/pages/card.ts
similarity index 81%
rename from ionic/components/app/test/sink/pages/card.js
rename to ionic/components/app/test/sink/pages/card.ts
index 648551e9b3..2f27a42749 100644
--- a/ionic/components/app/test/sink/pages/card.js
+++ b/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'
 })
diff --git a/ionic/components/app/test/sink/pages/form.js b/ionic/components/app/test/sink/pages/form.ts
similarity index 83%
rename from ionic/components/app/test/sink/pages/form.js
rename to ionic/components/app/test/sink/pages/form.ts
index 10b42daa20..35172eafdc 100644
--- a/ionic/components/app/test/sink/pages/form.js
+++ b/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'
 })
diff --git a/ionic/components/app/test/sink/pages/ionicons.js b/ionic/components/app/test/sink/pages/ionicons.ts
similarity index 71%
rename from ionic/components/app/test/sink/pages/ionicons.js
rename to ionic/components/app/test/sink/pages/ionicons.ts
index 372c67ea19..3a18d9b8fd 100644
--- a/ionic/components/app/test/sink/pages/ionicons.js
+++ b/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'
 })
diff --git a/ionic/components/app/test/sink/pages/list.js b/ionic/components/app/test/sink/pages/list.ts
similarity index 78%
rename from ionic/components/app/test/sink/pages/list.js
rename to ionic/components/app/test/sink/pages/list.ts
index 33bf8fe403..840fa3e67e 100644
--- a/ionic/components/app/test/sink/pages/list.js
+++ b/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'
 })
diff --git a/ionic/components/app/test/sink/pages/modal.js b/ionic/components/app/test/sink/pages/modal.ts
similarity index 62%
rename from ionic/components/app/test/sink/pages/modal.js
rename to ionic/components/app/test/sink/pages/modal.ts
index 7b240d4321..a070fc8172 100644
--- a/ionic/components/app/test/sink/pages/modal.js
+++ b/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 {}
diff --git a/ionic/components/app/test/sink/pages/nav.js b/ionic/components/app/test/sink/pages/nav.ts
similarity index 81%
rename from ionic/components/app/test/sink/pages/nav.js
rename to ionic/components/app/test/sink/pages/nav.ts
index d617144103..5902f19099 100644
--- a/ionic/components/app/test/sink/pages/nav.js
+++ b/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'
 })
diff --git a/ionic/components/app/test/sink/pages/search-bar.js b/ionic/components/app/test/sink/pages/search-bar.ts
similarity index 80%
rename from ionic/components/app/test/sink/pages/search-bar.js
rename to ionic/components/app/test/sink/pages/search-bar.ts
index dc70285a69..fde7203635 100644
--- a/ionic/components/app/test/sink/pages/search-bar.js
+++ b/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,
diff --git a/ionic/components/app/test/sink/pages/segment.js b/ionic/components/app/test/sink/pages/segment.ts
similarity index 96%
rename from ionic/components/app/test/sink/pages/segment.js
rename to ionic/components/app/test/sink/pages/segment.ts
index 4284ad7356..a059e4960a 100644
--- a/ionic/components/app/test/sink/pages/segment.js
+++ b/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';
 
diff --git a/ionic/components/app/test/sink/pages/slides.js b/ionic/components/app/test/sink/pages/slides.ts
similarity index 80%
rename from ionic/components/app/test/sink/pages/slides.js
rename to ionic/components/app/test/sink/pages/slides.ts
index 4b0460944a..2eaece5bb4 100644
--- a/ionic/components/app/test/sink/pages/slides.js
+++ b/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'
 })
diff --git a/ionic/components/app/test/sink/pages/table-search.js b/ionic/components/app/test/sink/pages/table-search.ts
similarity index 82%
rename from ionic/components/app/test/sink/pages/table-search.js
rename to ionic/components/app/test/sink/pages/table-search.ts
index c8b63eaec7..560c7cd159 100644
--- a/ionic/components/app/test/sink/pages/table-search.js
+++ b/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'];
diff --git a/ionic/components/app/test/sink/pages/tabs.js b/ionic/components/app/test/sink/pages/tabs.js
deleted file mode 100644
index 9ee748319a..0000000000
--- a/ionic/components/app/test/sink/pages/tabs.js
+++ /dev/null
@@ -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() {
-  }
-}
diff --git a/ionic/components/app/test/sink/pages/tabs.ts b/ionic/components/app/test/sink/pages/tabs.ts
new file mode 100644
index 0000000000..fcbc8ea1da
--- /dev/null
+++ b/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() {
+  }
+}
diff --git a/ionic/components/app/test/snapcat/index.js b/ionic/components/app/test/snapcat/index.ts
similarity index 89%
rename from ionic/components/app/test/snapcat/index.js
rename to ionic/components/app/test/snapcat/index.ts
index bf0fe09c52..cbb639eeca 100644
--- a/ionic/components/app/test/snapcat/index.js
+++ b/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) {
diff --git a/ionic/components/app/test/snapcat/main.html b/ionic/components/app/test/snapcat/main.html
index 184caa5b7e..6e7003a8e0 100644
--- a/ionic/components/app/test/snapcat/main.html
+++ b/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 {
diff --git a/ionic/components/app/test/typography/index.js b/ionic/components/app/test/typography/index.js
deleted file mode 100644
index 59be4e13f7..0000000000
--- a/ionic/components/app/test/typography/index.js
+++ /dev/null
@@ -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);
-}
diff --git a/ionic/components/app/test/typography/index.ts b/ionic/components/app/test/typography/index.ts
new file mode 100644
index 0000000000..9538b6fadc
--- /dev/null
+++ b/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);
+}
diff --git a/ionic/components/app/test/weather/flickr.ts b/ionic/components/app/test/weather/flickr.ts
new file mode 100755
index 0000000000..6cb32d9964
--- /dev/null
+++ b/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);
+      })
+    })
+  }
+}
diff --git a/ionic/components/app/test/weather/geo.ts b/ionic/components/app/test/weather/geo.ts
new file mode 100755
index 0000000000..c56b15e3e8
--- /dev/null
+++ b/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);
+      })
+    });
+  }
+}
diff --git a/ionic/components/app/test/weather/index.ts b/ionic/components/app/test/weather/index.ts
new file mode 100755
index 0000000000..32f2896ce3
--- /dev/null
+++ b/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);
+}
diff --git a/ionic/components/app/test/weather/weather.ts b/ionic/components/app/test/weather/weather.ts
new file mode 100755
index 0000000000..0cefbe41c7
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/ionic/components/app/test/yerk/index.js b/ionic/components/app/test/yerk/index.ts
similarity index 93%
rename from ionic/components/app/test/yerk/index.js
rename to ionic/components/app/test/yerk/index.ts
index f0530ee4fc..78bc0fb532 100644
--- a/ionic/components/app/test/yerk/index.js
+++ b/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';
 
diff --git a/ionic/components/app/util.scss b/ionic/components/app/util.scss
old mode 100644
new mode 100755
diff --git a/ionic/components/aside/aside.js b/ionic/components/aside/aside.ts
similarity index 62%
rename from ionic/components/aside/aside.js
rename to ionic/components/aside/aside.ts
index 86e032f095..12d864dd0b 100644
--- a/ionic/components/aside/aside.js
+++ b/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
 
diff --git a/ionic/components/aside/config.js b/ionic/components/aside/config.ts
similarity index 100%
rename from ionic/components/aside/config.js
rename to ionic/components/aside/config.ts
diff --git a/ionic/components/aside/extensions/gestures.js b/ionic/components/aside/extensions/gestures.ts
similarity index 100%
rename from ionic/components/aside/extensions/gestures.js
rename to ionic/components/aside/extensions/gestures.ts
diff --git a/ionic/components/aside/extensions/types.js b/ionic/components/aside/extensions/types.ts
similarity index 100%
rename from ionic/components/aside/extensions/types.js
rename to ionic/components/aside/extensions/types.ts
diff --git a/ionic/components/aside/test/basic/index.js b/ionic/components/aside/test/basic/index.ts
similarity index 71%
rename from ionic/components/aside/test/basic/index.js
rename to ionic/components/aside/test/basic/index.ts
index b970ea821b..9d51c01a5f 100644
--- a/ionic/components/aside/test/basic/index.js
+++ b/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';
 
diff --git a/ionic/components/button/test/basic/e2e.js b/ionic/components/button/test/basic/e2e.ts
similarity index 100%
rename from ionic/components/button/test/basic/e2e.js
rename to ionic/components/button/test/basic/e2e.ts
diff --git a/ionic/components/button/test/basic/index.js b/ionic/components/button/test/basic/index.js
deleted file mode 100644
index d2ce3e90c1..0000000000
--- a/ionic/components/button/test/basic/index.js
+++ /dev/null
@@ -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);
-}
diff --git a/ionic/components/list/test/basic/index.js b/ionic/components/button/test/basic/index.ts
similarity index 73%
rename from ionic/components/list/test/basic/index.js
rename to ionic/components/button/test/basic/index.ts
index ca42a5e898..8ae1df8e63 100644
--- a/ionic/components/list/test/basic/index.js
+++ b/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';
 
diff --git a/ionic/components/button/test/block/e2e.js b/ionic/components/button/test/block/e2e.ts
similarity index 100%
rename from ionic/components/button/test/block/e2e.js
rename to ionic/components/button/test/block/e2e.ts
diff --git a/ionic/components/button/test/block/index.js b/ionic/components/button/test/block/index.js
deleted file mode 100644
index d2ce3e90c1..0000000000
--- a/ionic/components/button/test/block/index.js
+++ /dev/null
@@ -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);
-}
diff --git a/ionic/components/tabs/test/basic/index.js b/ionic/components/button/test/block/index.ts
similarity index 73%
rename from ionic/components/tabs/test/basic/index.js
rename to ionic/components/button/test/block/index.ts
index ca42a5e898..8ae1df8e63 100644
--- a/ionic/components/tabs/test/basic/index.js
+++ b/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';
 
diff --git a/ionic/components/button/test/clear/e2e.js b/ionic/components/button/test/clear/e2e.ts
similarity index 100%
rename from ionic/components/button/test/clear/e2e.js
rename to ionic/components/button/test/clear/e2e.ts
diff --git a/ionic/components/button/test/clear/index.js b/ionic/components/button/test/clear/index.js
deleted file mode 100644
index d2ce3e90c1..0000000000
--- a/ionic/components/button/test/clear/index.js
+++ /dev/null
@@ -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);
-}
diff --git a/ionic/components/tabs/test/tab-bar-bottom/index.js b/ionic/components/button/test/clear/index.ts
similarity index 73%
rename from ionic/components/tabs/test/tab-bar-bottom/index.js
rename to ionic/components/button/test/clear/index.ts
index ca42a5e898..8ae1df8e63 100644
--- a/ionic/components/tabs/test/tab-bar-bottom/index.js
+++ b/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';
 
diff --git a/ionic/components/button/test/full/e2e.js b/ionic/components/button/test/full/e2e.ts
similarity index 100%
rename from ionic/components/button/test/full/e2e.js
rename to ionic/components/button/test/full/e2e.ts
diff --git a/ionic/components/button/test/full/index.js b/ionic/components/button/test/full/index.js
deleted file mode 100644
index d2ce3e90c1..0000000000
--- a/ionic/components/button/test/full/index.js
+++ /dev/null
@@ -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);
-}
diff --git a/ionic/components/tabs/test/tab-bar-icons/index.js b/ionic/components/button/test/full/index.ts
similarity index 73%
rename from ionic/components/tabs/test/tab-bar-icons/index.js
rename to ionic/components/button/test/full/index.ts
index ca42a5e898..8ae1df8e63 100644
--- a/ionic/components/tabs/test/tab-bar-icons/index.js
+++ b/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';
 
diff --git a/ionic/components/button/test/icons/e2e.js b/ionic/components/button/test/icons/e2e.ts
similarity index 100%
rename from ionic/components/button/test/icons/e2e.js
rename to ionic/components/button/test/icons/e2e.ts
diff --git a/ionic/components/button/test/icons/index.js b/ionic/components/button/test/icons/index.js
deleted file mode 100644
index d2ce3e90c1..0000000000
--- a/ionic/components/button/test/icons/index.js
+++ /dev/null
@@ -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);
-}
diff --git a/ionic/components/button/test/icons/index.ts b/ionic/components/button/test/icons/index.ts
new file mode 100644
index 0000000000..8ae1df8e63
--- /dev/null
+++ b/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);
+}
diff --git a/ionic/components/button/test/outline/e2e.js b/ionic/components/button/test/outline/e2e.ts
similarity index 100%
rename from ionic/components/button/test/outline/e2e.js
rename to ionic/components/button/test/outline/e2e.ts
diff --git a/ionic/components/button/test/outline/index.js b/ionic/components/button/test/outline/index.js
deleted file mode 100644
index d2ce3e90c1..0000000000
--- a/ionic/components/button/test/outline/index.js
+++ /dev/null
@@ -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);
-}
diff --git a/ionic/components/button/test/outline/index.ts b/ionic/components/button/test/outline/index.ts
new file mode 100644
index 0000000000..8ae1df8e63
--- /dev/null
+++ b/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);
+}
diff --git a/ionic/components/button/test/sizes/e2e.js b/ionic/components/button/test/sizes/e2e.ts
similarity index 100%
rename from ionic/components/button/test/sizes/e2e.js
rename to ionic/components/button/test/sizes/e2e.ts
diff --git a/ionic/components/button/test/sizes/index.js b/ionic/components/button/test/sizes/index.js
deleted file mode 100644
index d2ce3e90c1..0000000000
--- a/ionic/components/button/test/sizes/index.js
+++ /dev/null
@@ -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);
-}
diff --git a/ionic/components/button/test/sizes/index.ts b/ionic/components/button/test/sizes/index.ts
new file mode 100644
index 0000000000..8ae1df8e63
--- /dev/null
+++ b/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);
+}
diff --git a/ionic/components/card/test/basic/e2e.js b/ionic/components/card/test/basic/e2e.ts
similarity index 100%
rename from ionic/components/card/test/basic/e2e.js
rename to ionic/components/card/test/basic/e2e.ts
diff --git a/ionic/components/card/test/basic/index.js b/ionic/components/card/test/basic/index.js
deleted file mode 100644
index d2ce3e90c1..0000000000
--- a/ionic/components/card/test/basic/index.js
+++ /dev/null
@@ -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);
-}
diff --git a/ionic/components/card/test/basic/index.ts b/ionic/components/card/test/basic/index.ts
new file mode 100644
index 0000000000..8ae1df8e63
--- /dev/null
+++ b/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);
+}
diff --git a/ionic/components/checkbox/checkbox.js b/ionic/components/checkbox/checkbox.ts
similarity index 63%
rename from ionic/components/checkbox/checkbox.js
rename to ionic/components/checkbox/checkbox.ts
index d18d6930db..1ae446d146 100644
--- a/ionic/components/checkbox/checkbox.js
+++ b/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,
diff --git a/ionic/components/checkbox/test/basic/index.js b/ionic/components/checkbox/test/basic/index.ts
similarity index 94%
rename from ionic/components/checkbox/test/basic/index.js
rename to ionic/components/checkbox/test/basic/index.ts
index 7f76aa9ab7..eb1428b201 100644
--- a/ionic/components/checkbox/test/basic/index.js
+++ b/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';
diff --git a/ionic/components/content/content.ts b/ionic/components/content/content.ts
new file mode 100644
index 0000000000..221070d453
--- /dev/null
+++ b/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);
+    }
+  }
+}
diff --git a/ionic/components/content/test/pull-to-refresh/index.js b/ionic/components/content/test/pull-to-refresh/index.ts
similarity index 78%
rename from ionic/components/content/test/pull-to-refresh/index.js
rename to ionic/components/content/test/pull-to-refresh/index.ts
index 265d76f100..1e55c1fec2 100644
--- a/ionic/components/content/test/pull-to-refresh/index.js
+++ b/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';
 
diff --git a/ionic/components/form/form.js b/ionic/components/form/form.ts
similarity index 100%
rename from ionic/components/form/form.js
rename to ionic/components/form/form.ts
diff --git a/ionic/components/form/input/input.js b/ionic/components/form/input/input.ts
similarity index 65%
rename from ionic/components/form/input/input.js
rename to ionic/components/form/input/input.ts
index 2dcf9f219f..fd9be0b598 100644
--- a/ionic/components/form/input/input.js
+++ b/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({
diff --git a/ionic/components/form/label/label.js b/ionic/components/form/label/label.ts
similarity index 50%
rename from ionic/components/form/label/label.js
rename to ionic/components/form/label/label.ts
index 8a843bca42..2485e60ae0 100644
--- a/ionic/components/form/label/label.js
+++ b/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({
diff --git a/ionic/components/form/test/basic/e2e.js b/ionic/components/form/test/basic/e2e.ts
similarity index 100%
rename from ionic/components/form/test/basic/e2e.js
rename to ionic/components/form/test/basic/e2e.ts
diff --git a/ionic/components/form/test/basic/index.js b/ionic/components/form/test/basic/index.ts
similarity index 89%
rename from ionic/components/form/test/basic/index.js
rename to ionic/components/form/test/basic/index.ts
index aa8846d922..0c17dae075 100644
--- a/ionic/components/form/test/basic/index.js
+++ b/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';
diff --git a/ionic/components/icon/icon.js b/ionic/components/icon/icon.ts
similarity index 71%
rename from ionic/components/icon/icon.js
rename to ionic/components/icon/icon.ts
index 2d0a2cb1cb..fb9e92e45e 100644
--- a/ionic/components/icon/icon.js
+++ b/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({
diff --git a/ionic/components/ion.ts b/ionic/components/ion.ts
new file mode 100644
index 0000000000..311e514e33
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/ionic/components/item/item-options.js b/ionic/components/item/item-options.ts
similarity index 100%
rename from ionic/components/item/item-options.js
rename to ionic/components/item/item-options.ts
diff --git a/ionic/components/item/item-swipe-buttons.js b/ionic/components/item/item-swipe-buttons.ts
similarity index 95%
rename from ionic/components/item/item-swipe-buttons.js
rename to ionic/components/item/item-swipe-buttons.ts
index 1cf30a0d96..e9063e9590 100644
--- a/ionic/components/item/item-swipe-buttons.js
+++ b/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'
 
diff --git a/ionic/components/item/item.js b/ionic/components/item/item.ts
similarity index 88%
rename from ionic/components/item/item.js
rename to ionic/components/item/item.ts
index de113cca00..187dc929d9 100644
--- a/ionic/components/item/item.js
+++ b/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;
diff --git a/ionic/components/item/test/accessories/index.js b/ionic/components/item/test/accessories/index.ts
similarity index 78%
rename from ionic/components/item/test/accessories/index.js
rename to ionic/components/item/test/accessories/index.ts
index 828759a45c..669edce61b 100644
--- a/ionic/components/item/test/accessories/index.js
+++ b/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';
 
diff --git a/ionic/components/item/test/basic/index.js b/ionic/components/item/test/basic/index.ts
similarity index 78%
rename from ionic/components/item/test/basic/index.js
rename to ionic/components/item/test/basic/index.ts
index 828759a45c..669edce61b 100644
--- a/ionic/components/item/test/basic/index.js
+++ b/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';
 
diff --git a/ionic/components/item/test/basic/main.html b/ionic/components/item/test/basic/main.html
index ce98adc877..64c159b3de 100644
--- a/ionic/components/item/test/basic/main.html
+++ b/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%">
diff --git a/ionic/components/layout/layout.js b/ionic/components/layout/layout.ts
similarity index 94%
rename from ionic/components/layout/layout.js
rename to ionic/components/layout/layout.ts
index 5a019505d3..2dc15e32f1 100644
--- a/ionic/components/layout/layout.js
+++ b/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({
diff --git a/ionic/components/layout/test/basic/index.js b/ionic/components/layout/test/basic/index.js
deleted file mode 100644
index 1655d240c0..0000000000
--- a/ionic/components/layout/test/basic/index.js
+++ /dev/null
@@ -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);
-}
-
diff --git a/ionic/components/layout/test/basic/index.ts b/ionic/components/layout/test/basic/index.ts
new file mode 100644
index 0000000000..ef9ff54ffc
--- /dev/null
+++ b/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);
+}
+
diff --git a/ionic/components/list/list.js b/ionic/components/list/list.ts
similarity index 70%
rename from ionic/components/list/list.js
rename to ionic/components/list/list.ts
index 095ed2ce10..c12099f886 100644
--- a/ionic/components/list/list.js
+++ b/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;
   }
diff --git a/ionic/components/list/test/basic/e2e.js b/ionic/components/list/test/basic/e2e.ts
similarity index 100%
rename from ionic/components/list/test/basic/e2e.js
rename to ionic/components/list/test/basic/e2e.ts
diff --git a/ionic/components/list/test/basic/index.ts b/ionic/components/list/test/basic/index.ts
new file mode 100644
index 0000000000..8ae1df8e63
--- /dev/null
+++ b/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);
+}
diff --git a/ionic/components/list/test/infinite/index.js b/ionic/components/list/test/infinite/index.ts
similarity index 83%
rename from ionic/components/list/test/infinite/index.js
rename to ionic/components/list/test/infinite/index.ts
index ae71ccd1ab..3d7100d3ba 100644
--- a/ionic/components/list/test/infinite/index.js
+++ b/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);
 }
diff --git a/ionic/components/list/virtual.js b/ionic/components/list/virtual.ts
similarity index 100%
rename from ionic/components/list/virtual.js
rename to ionic/components/list/virtual.ts
diff --git a/ionic/components/modal/modal.js b/ionic/components/modal/modal.ts
similarity index 66%
rename from ionic/components/modal/modal.js
rename to ionic/components/modal/modal.ts
index bbf805161d..7ea45bfcfc 100644
--- a/ionic/components/modal/modal.js
+++ b/ionic/components/modal/modal.ts
@@ -1,38 +1,30 @@
-import {Injectable} from 'angular2/di';
+import {Injectable} from 'angular2/angular2';
 
 import {Overlay} from '../overlay/overlay';
 import {Animation} from '../../animations/animation';
 import {IonicApp} from '../app/app';
+import * as util from 'ionic/util';
 
 
 @Injectable()
 export class Modal extends Overlay {
-
-  static get config() {
-    return {
-      selector: 'ion-modal',
-      host: {
-        '[style.z-index]': 'zIndex'
-      }
-    }
-  }
-
   constructor(app: IonicApp) {
-    // a modal created by the appInjector will inject an IonicApp
-    // a modal created by the user will not
     super(app);
+  }
 
-    this.extendOptions({
+  open(ComponentType: Type, opts={}) {
+    let defaults = {
       enterAnimation: 'modal-slide-in',
-      leaveAnimation: 'modal-slide-out'
-    });
+      leaveAnimation: 'modal-slide-out',
+    };
+
+    return this.create(OVERLAY_TYPE, ComponentType, util.extend(defaults, opts));
   }
 
-  open(ComponentType: Type, opts) {
-    return this.create(OVERLAY_TYPE, ComponentType, opts);
-  }
-
-  get() {
+  get(handle) {
+    if (handle) {
+      return this.getByHandle(handle, OVERLAY_TYPE);
+    }
     return this.getByType(OVERLAY_TYPE);
   }
 
diff --git a/ionic/components/modal/test/basic/index.js b/ionic/components/modal/test/basic/index.ts
similarity index 85%
rename from ionic/components/modal/test/basic/index.js
rename to ionic/components/modal/test/basic/index.ts
index ea6c878711..7fa4f14141 100644
--- a/ionic/components/modal/test/basic/index.js
+++ b/ionic/components/modal/test/basic/index.ts
@@ -1,6 +1,6 @@
-import {ElementRef, ComponentRef, onDestroy, DomRenderer} from 'angular2/angular2';
+import {ElementRef, ComponentRef, onDestroy} from 'angular2/angular2';
 import {bind, Injector} from 'angular2/di';
-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 {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 
@@ -11,20 +11,19 @@ import {Modal, NavController, NavParams, Animation, ActionMenu} from 'ionic/ioni
 
 
 @Component({
-  selector: 'ion-app',
-  appInjector: [Modal]
+  selector: 'ion-app'
 })
 @IonicView({
   templateUrl: 'main.html'
 })
 class MyAppCmp {
 
-  constructor(Modal: Modal) {
-    this.Modal = Modal;
+  constructor(modal: Modal) {
+    this.modal = modal;
   }
 
   openModal() {
-    this.Modal.open(ContactModal, {
+    this.modal.open(ContactModal, {
       enterAnimation: 'my-fade-in',
       leaveAnimation: 'my-fade-out',
       handle: 'my-awesome-modal'
@@ -32,24 +31,18 @@ class MyAppCmp {
   }
 }
 
-@IonicComponent(Modal)
 @IonicView({
   template: '<ion-nav [root]="rootView"></ion-nav>'
 })
-export class ContactModal extends Modal {
+export class ContactModal {
   constructor() {
-    super();
     this.rootView = ModalFirstPage;
   }
 }
 
 
 @Component({
-  selector: 'ion-view',
-  appInjector: [
-    Modal,
-    ActionMenu
-  ]
+  selector: 'ion-view'
 })
 @IonicView({
   template: `
@@ -73,13 +66,13 @@ export class ContactModal extends Modal {
 export class ModalFirstPage {
   constructor(
     nav: NavController,
-    Modal: Modal,
-    ActionMenu: ActionMenu
+    modal: Modal,
+    actionMenu: ActionMenu
   ) {
     this.nav = nav;
     this.val = Math.round(Math.random() * 8999) + 1000;
-    this.Modal = Modal;
-    this.ActionMenu = ActionMenu;
+    this.modal = modal;
+    this.actionMenu = actionMenu;
   }
 
   push() {
@@ -87,17 +80,17 @@ export class ModalFirstPage {
   }
 
   closeModal() {
-    let modal = this.Modal.get();
+    let modal = this.modal.get();
     modal.close();
   }
 
   closeByHandeModal() {
-    let modal = this.Modal.getByHandle('my-awesome-modal');
+    let modal = this.modal.get('my-awesome-modal');
     modal.close();
   }
 
   openActionMenu() {
-    this.ActionMenu.open({
+    this.actionMenu.open({
       buttons: [
         { text: 'Share This' },
         { text: 'Move' }
@@ -116,8 +109,8 @@ export class ModalFirstPage {
         if(index == 1) { return false; }
         return true;
       }
-    }).then(actionMenu => {
-      this.actionMenu = actionMenu;
+    }).then(actionMenuRef => {
+      this.actionMenuRef = actionMenuRef;
     });
   }
 }
diff --git a/ionic/components/nav-bar/nav-bar.js b/ionic/components/nav-bar/nav-bar.ts
similarity index 92%
rename from ionic/components/nav-bar/nav-bar.js
rename to ionic/components/nav-bar/nav-bar.ts
index 36686131ae..2e9b11f9c2 100644
--- a/ionic/components/nav-bar/nav-bar.js
+++ b/ionic/components/nav-bar/nav-bar.ts
@@ -1,9 +1,5 @@
-import {Parent} 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 {ElementRef} from 'angular2/src/core/compiler/element_ref';
+import {Component, Directive, View, Parent, ElementRef, forwardRef} from 'angular2/angular2';
 import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
-import {NgZone} from 'angular2/src/core/zone/ng_zone';
 
 import {ViewItem} from '../view/view-item';
 import * as dom from '../../util/dom';
@@ -35,7 +31,12 @@ import * as dom from '../../util/dom';
       </div>
     </div>
   `,
-  directives: [BackButton, BackButtonText, Title, NavbarItem]
+  directives: [
+    forwardRef(() => BackButton),
+    forwardRef(() => BackButtonText),
+    forwardRef(() => Title),
+    forwardRef(() => NavbarItem)
+  ]
 })
 export class Navbar {
   constructor(item: ViewItem, elementRef: ElementRef) {
diff --git a/ionic/components/nav-bar/test/html-title/e2e.js b/ionic/components/nav-bar/test/html-title/e2e.ts
similarity index 100%
rename from ionic/components/nav-bar/test/html-title/e2e.js
rename to ionic/components/nav-bar/test/html-title/e2e.ts
diff --git a/ionic/components/nav-bar/test/html-title/index.js b/ionic/components/nav-bar/test/html-title/index.js
deleted file mode 100644
index d2ce3e90c1..0000000000
--- a/ionic/components/nav-bar/test/html-title/index.js
+++ /dev/null
@@ -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);
-}
diff --git a/ionic/components/nav-bar/test/html-title/index.ts b/ionic/components/nav-bar/test/html-title/index.ts
new file mode 100644
index 0000000000..c062390041
--- /dev/null
+++ b/ionic/components/nav-bar/test/html-title/index.ts
@@ -0,0 +1,14 @@
+import {Component, Directive} from 'angular2/angular2';
+
+import {IonicView} from 'ionic/ionic';
+
+
+@Component({ selector: 'ion-app' })
+@IonicView({
+  templateUrl: 'main.html'
+})
+class IonicApp {}
+
+export function main(ionicBootstrap) {
+  ionicBootstrap(IonicApp);
+}
diff --git a/ionic/components/nav-bar/test/long-title/e2e.js b/ionic/components/nav-bar/test/long-title/e2e.ts
similarity index 100%
rename from ionic/components/nav-bar/test/long-title/e2e.js
rename to ionic/components/nav-bar/test/long-title/e2e.ts
diff --git a/ionic/components/nav-bar/test/lopsided-buttons/e2e.js b/ionic/components/nav-bar/test/lopsided-buttons/e2e.ts
similarity index 100%
rename from ionic/components/nav-bar/test/lopsided-buttons/e2e.js
rename to ionic/components/nav-bar/test/lopsided-buttons/e2e.ts
diff --git a/ionic/components/nav-bar/test/lopsided-buttons/index.js b/ionic/components/nav-bar/test/lopsided-buttons/index.js
deleted file mode 100644
index d2ce3e90c1..0000000000
--- a/ionic/components/nav-bar/test/lopsided-buttons/index.js
+++ /dev/null
@@ -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);
-}
diff --git a/ionic/components/nav-bar/test/lopsided-buttons/index.ts b/ionic/components/nav-bar/test/lopsided-buttons/index.ts
new file mode 100644
index 0000000000..c062390041
--- /dev/null
+++ b/ionic/components/nav-bar/test/lopsided-buttons/index.ts
@@ -0,0 +1,14 @@
+import {Component, Directive} from 'angular2/angular2';
+
+import {IonicView} from 'ionic/ionic';
+
+
+@Component({ selector: 'ion-app' })
+@IonicView({
+  templateUrl: 'main.html'
+})
+class IonicApp {}
+
+export function main(ionicBootstrap) {
+  ionicBootstrap(IonicApp);
+}
diff --git a/ionic/components/nav/anchors.ts b/ionic/components/nav/anchors.ts
new file mode 100644
index 0000000000..00c18b237b
--- /dev/null
+++ b/ionic/components/nav/anchors.ts
@@ -0,0 +1,53 @@
+import {Component, View, Directive, Parent, ElementRef, forwardRef, Inject} from 'angular2/angular2';
+import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
+
+import {Pane} from './pane';
+import {ViewController} from '../view/view-controller';
+
+
+@Directive({selector: 'template[pane-anchor]'})
+export class PaneAnchor {
+  constructor(
+    @Parent() @Inject(forwardRef(() => Pane)) pane: Pane,
+    elementRef: ElementRef
+  ) {
+    pane.sectionAnchorElementRef = elementRef;
+  }
+}
+
+
+@Directive({selector: 'template[content-anchor]'})
+export class PaneContentAnchor {
+  constructor(
+    @Parent() @Inject(forwardRef(() => Pane)) pane: Pane,
+    viewContainerRef: ViewContainerRef
+  ) {
+    pane.contentContainerRef = viewContainerRef;
+  }
+}
+
+
+@Directive({
+  selector: 'template[navbar-anchor]'
+})
+class NavBarAnchor {
+  constructor(
+    @Inject(forwardRef(() => ViewController)) viewCtrl: ViewController,
+    viewContainerRef: ViewContainerRef
+  ) {
+    viewCtrl.navbarViewContainer(viewContainerRef);
+  }
+}
+
+
+@Component({
+  selector: 'section',
+  host: {
+    'class': 'navbar-container'
+  }
+})
+@View({
+  template: '<template navbar-anchor></template>',
+  directives: [NavBarAnchor]
+})
+export class NavBarContainer {}
diff --git a/ionic/components/nav/nav-controller.js b/ionic/components/nav/nav-controller.ts
similarity index 100%
rename from ionic/components/nav/nav-controller.js
rename to ionic/components/nav/nav-controller.ts
diff --git a/ionic/components/nav/nav-push.js b/ionic/components/nav/nav-push.ts
similarity index 63%
rename from ionic/components/nav/nav-push.js
rename to ionic/components/nav/nav-push.ts
index a8d61ce6eb..0143a0d105 100644
--- a/ionic/components/nav/nav-push.js
+++ b/ionic/components/nav/nav-push.ts
@@ -1,12 +1,7 @@
-import {Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
-import {Optional} from 'angular2/src/di/annotations_impl';
-import {Compiler} from 'angular2/angular2';
-import {ElementRef} from 'angular2/src/core/compiler/element_ref';
-import {Injector} from 'angular2/di';
-
-import {ViewController} from '../view/view-controller';
+import {Directive} from 'angular2/angular2';
 import {NavController} from './nav-controller';
 
+
 @Directive({
   selector: '[nav-push]',
   properties: [
diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts
new file mode 100644
index 0000000000..79e8a137ec
--- /dev/null
+++ b/ionic/components/nav/nav.ts
@@ -0,0 +1,42 @@
+import {Component, Directive, View, ElementRef, Parent, Optional, forwardRef, onInit, Injector} from 'angular2/angular2';
+
+import {IonicComponent} from '../../config/annotations';
+import {ViewController} from '../view/view-controller';
+
+
+@IonicComponent({
+  selector: 'ion-nav',
+  properties: [
+    'root'
+  ],
+  lifecycle: [onInit]
+})
+@View({
+  template: '<template pane-anchor></template>',
+  directives: [forwardRef(() => NavPaneAnchor)]
+})
+export class Nav extends ViewController {
+
+  constructor(
+    @Optional() parentViewCtrl: ViewController,
+    injector: Injector,
+    elementRef: ElementRef
+  ) {
+    super(parentViewCtrl, injector, elementRef);
+  }
+
+  onInit() {
+    if (this.root) {
+      this.push(this.root);
+    }
+  }
+
+}
+
+
+@Directive({selector: 'template[pane-anchor]'})
+class NavPaneAnchor {
+  constructor(@Parent() nav: Nav, elementRef: ElementRef) {
+    nav.anchorElementRef(elementRef);
+  }
+}
diff --git a/ionic/components/nav/pane.js b/ionic/components/nav/pane.ts
similarity index 67%
rename from ionic/components/nav/pane.js
rename to ionic/components/nav/pane.ts
index deedf788d4..4a8267cef8 100644
--- a/ionic/components/nav/pane.js
+++ b/ionic/components/nav/pane.ts
@@ -1,13 +1,10 @@
-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 {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
-import {ElementRef} from 'angular2/src/core/compiler/element_ref';
+import {Component, Directive, View, ElementRef, Parent, Inject, forwardRef} from 'angular2/angular2';
 import {bind} from 'angular2/di';
 
 import {ViewController} from '../view/view-controller';
 import {SwipeHandle} from './swipe-handle';
 import {IonicComponent} from '../../config/annotations';
+import {PaneAnchor, PaneContentAnchor, NavBarContainer} from './anchors';
 
 
 export class PaneController {
@@ -72,8 +69,15 @@ export class PaneController {
         // wait for all of the sections to resolve
         Promise.all(promises).then(() => {
           callback(pane);
+        }, err => {
+          console.error(err)
         });
 
+      }, loaderErr => {
+        console.error(loaderErr);
+
+      }).catch(err => {
+        console.error(err);
       });
 
     }
@@ -90,7 +94,10 @@ export class PaneController {
 
 }
 
-@IonicComponent(Pane)
+@IonicComponent({
+  selector: 'ion-pane',
+  classId: 'nav'
+})
 @View({
   template: `
     <template pane-anchor></template>
@@ -102,15 +109,10 @@ export class PaneController {
   directives: [PaneAnchor, PaneContentAnchor, SwipeHandle]
 })
 export class Pane {
-
-  static get config() {
-    return {
-      selector:'ion-pane',
-      classId: 'nav'
-    }
-  }
-
-  constructor(viewCtrl: ViewController, elementRef: ElementRef) {
+  constructor(
+    @Inject(forwardRef(() => ViewController)) viewCtrl: ViewController,
+    elementRef: ElementRef
+  ) {
     this.ele = elementRef.nativeElement;
     viewCtrl.panes.add(this);
   }
@@ -123,42 +125,3 @@ export class Pane {
     this.ele.classList[val ? 'add' : 'remove']('show-pane');
   }
 }
-
-
-@Directive({selector: 'template[pane-anchor]'})
-class PaneAnchor {
-  constructor(@Parent() pane: Pane, elementRef: ElementRef) {
-    pane.sectionAnchorElementRef = elementRef;
-  }
-}
-
-
-@Directive({selector: 'template[content-anchor]'})
-class PaneContentAnchor {
-  constructor(@Parent() pane: Pane, viewContainerRef: ViewContainerRef) {
-    pane.contentContainerRef = viewContainerRef;
-  }
-}
-
-@Component({
-  selector: 'section',
-  host: {
-    'class': 'navbar-container'
-  }
-})
-@View({
-  template: `<template navbar-anchor></template>`,
-  directives: [NavBarAnchor]
-})
-class NavBarContainer {}
-
-
-// Reference point of where individual view navbars will go next to
-@Directive({
-  selector: 'template[navbar-anchor]'
-})
-class NavBarAnchor {
-  constructor(viewCtrl: ViewController, viewContainerRef: ViewContainerRef) {
-    viewCtrl.navbarViewContainer(viewContainerRef);
-  }
-}
diff --git a/ionic/components/nav/swipe-handle.js b/ionic/components/nav/swipe-handle.ts
similarity index 86%
rename from ionic/components/nav/swipe-handle.js
rename to ionic/components/nav/swipe-handle.ts
index e74a4094ec..f92878eaa7 100644
--- a/ionic/components/nav/swipe-handle.js
+++ b/ionic/components/nav/swipe-handle.ts
@@ -1,7 +1,4 @@
-import {Parent} from 'angular2/src/core/annotations_impl/visibility';
-import {ElementRef} from 'angular2/angular2'
-import {Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {Optional} from 'angular2/src/di/annotations_impl';
+import {ElementRef, Directive, Parent, Optional, Inject, forwardRef} from 'angular2/angular2';
 
 import {ViewController} from '../view/view-controller';
 import {Pane} from './pane';
@@ -16,8 +13,8 @@ import {Gesture} from 'ionic/gestures/gesture';
 })
 export class SwipeHandle {
   constructor(
-    @Optional() viewCtrl: ViewController,
-    @Parent() pane: Pane,
+    @Optional() @Inject(forwardRef(() => ViewController)) viewCtrl: ViewController,
+    @Parent() @Inject(forwardRef(() => Pane)) pane: Pane,
     elementRef: ElementRef
   ) {
     if (!viewCtrl || !pane) return;
diff --git a/ionic/components/nav/test/basic/index.js b/ionic/components/nav/test/basic/index.ts
similarity index 90%
rename from ionic/components/nav/test/basic/index.js
rename to ionic/components/nav/test/basic/index.ts
index b4bf909ea5..f2ad0f0900 100644
--- a/ionic/components/nav/test/basic/index.js
+++ b/ionic/components/nav/test/basic/index.ts
@@ -1,4 +1,4 @@
-import {Component, onInit} from 'angular2/src/core/annotations_impl/annotations';
+import {Component, onInit} from 'angular2/angular2';
 
 import {IonicView, IonicConfig, IonicRouter} from 'ionic/ionic';
 import {FirstPage} from './pages/first-page'
diff --git a/ionic/components/nav/test/basic/pages/first-page.js b/ionic/components/nav/test/basic/pages/first-page.ts
similarity index 93%
rename from ionic/components/nav/test/basic/pages/first-page.js
rename to ionic/components/nav/test/basic/pages/first-page.ts
index 05c2129c16..0e1ad1c802 100644
--- a/ionic/components/nav/test/basic/pages/first-page.js
+++ b/ionic/components/nav/test/basic/pages/first-page.ts
@@ -1,5 +1,5 @@
-import {IonicComponent, IonicView, IonicConfig, IonicApp, Routable} from 'ionic/ionic';
-import {NavParams, NavController} from 'ionic/ionic';
+import {IonicComponent, IonicView, IonicConfig, IonicApp} from 'ionic/ionic';
+import {NavParams, Routable, NavController} from 'ionic/ionic';
 
 import {SecondPage} from './second-page';
 import {ThirdPage} from './third-page';
diff --git a/ionic/components/nav/test/basic/pages/second-page.js b/ionic/components/nav/test/basic/pages/second-page.ts
similarity index 100%
rename from ionic/components/nav/test/basic/pages/second-page.js
rename to ionic/components/nav/test/basic/pages/second-page.ts
diff --git a/ionic/components/nav/test/basic/pages/third-page.js b/ionic/components/nav/test/basic/pages/third-page.ts
similarity index 100%
rename from ionic/components/nav/test/basic/pages/third-page.js
rename to ionic/components/nav/test/basic/pages/third-page.ts
diff --git a/ionic/components/overlay/overlay.js b/ionic/components/overlay/overlay.js
deleted file mode 100644
index b84799eed0..0000000000
--- a/ionic/components/overlay/overlay.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import {IonicApp} from '../app/app';
-import {Animation} from '../../animations/animation';
-import {ClickBlock} from '../../util/click-block';
-import * as util from 'ionic/util';
-
-
-export class Overlay {
-
-  constructor(app: IonicApp) {
-    this.setApp(app);
-  }
-
-  setApp(app) {
-    this.app = app;
-  }
-
-  create(overlayType, ComponentType: Type, opts) {
-    return new Promise((resolve, reject) => {
-      let app = this.app;
-
-      app.appendComponent(ComponentType).then(ref => {
-        let overlay = ref.instance;
-        overlay._dispose = ref.dispose;
-        overlay.setApp(app);
-        overlay._type = overlayType;
-        overlay._handle = opts && opts.handle;
-        overlay._ele = ref.elementRef.nativeElement;
-        overlay.extendOptions(opts);
-
-        overlay.zIndex = ROOT_Z_INDEX;
-        for (let i = 0; i < app.overlays.length; i++) {
-          if (app.overlays[i].zIndex >= overlay.zIndex) {
-            overlay.zIndex = app.overlays[i].zIndex + 1;
-          }
-        }
-        app.overlays.push(overlay);
-
-        overlay._open(opts);
-
-        resolve(overlay);
-
-      }).catch(err => {
-        console.error('Overlay create:', err);
-        reject(err);
-      });
-
-    });
-  }
-
-  _open(opts) {
-    let animationName = (opts && opts.animation) || this.options.enterAnimation;
-    let enterAnimation = Animation.create(this._ele, animationName);
-    enterAnimation.before.addClass('ion-app');
-    enterAnimation.before.addClass('show-overlay');
-    ClickBlock(true, enterAnimation.duration() + 200);
-
-    return new Promise(resolve => {
-      enterAnimation.play().then(() => {
-        ClickBlock(false);
-        enterAnimation.dispose();
-        resolve();
-      });
-    });
-  }
-
-  close(opts) {
-    return new Promise(resolve => {
-      let animationName = (opts && opts.animation) || this.options.leaveAnimation;
-      let leavingAnimation = Animation.create(this._ele, animationName);
-      leavingAnimation.after.removeClass('show-overlay');
-      ClickBlock(true, leavingAnimation.duration() + 200);
-
-      leavingAnimation.play().then(() => {
-        this.dispose();
-        ClickBlock(false);
-        leavingAnimation.dispose();
-        resolve();
-      })
-    });
-  }
-
-  getByType(overlayType) {
-    if (this.app) {
-      for (let i = this.app.overlays.length - 1; i >= 0; i--) {
-        if (overlayType === this.app.overlays[i]._type) {
-          return this.app.overlays[i];
-        }
-      }
-    }
-    return null;
-  }
-
-  getByHandle(handle) {
-    if (this.app) {
-      for (let i = this.app.overlays.length - 1; i >= 0; i--) {
-        if (handle === this.app.overlays[i]._handle) {
-          return this.app.overlays[i];
-        }
-      }
-    }
-    return null;
-  }
-
-  extendOptions(opts) {
-    if (!this.options) this.options = {};
-    util.extend(this.options, opts);
-  }
-
-  dispose() {
-    this._dispose && this._dispose();
-    if (this.app) {
-      util.array.remove(this.app.overlays, this);
-    }
-  }
-
-}
-
-const ROOT_Z_INDEX = 1000;
diff --git a/ionic/components/overlay/overlay.ts b/ionic/components/overlay/overlay.ts
new file mode 100644
index 0000000000..f5be5b88d9
--- /dev/null
+++ b/ionic/components/overlay/overlay.ts
@@ -0,0 +1,140 @@
+import {Component} from 'angular2/angular2';
+import {DirectiveBinding} from 'angular2/src/core/compiler/element_injector';
+
+import {IonicApp} from '../app/app';
+import {Animation} from '../../animations/animation';
+import {ClickBlock} from '../../util/click-block';
+import * as util from 'ionic/util';
+
+
+export class Overlay {
+
+  constructor(app: IonicApp) {
+    this.app = app;
+  }
+
+  create(overlayType, ComponentType: Type, opts={}, context=null) {
+    return new Promise((resolve, reject) => {
+      let app = this.app;
+
+      let annotation = new Component();
+      annotation.selector = 'ion-' + overlayType;
+      annotation.host = {
+        '[style.z-index]': 'zIndex',
+        'class': overlayType + ' ion-app'
+      };
+      let overlayComponent = DirectiveBinding.createFromType(ComponentType, annotation);
+
+      app.appendComponent(overlayComponent, context).then(ref => {
+        let overlayRef = new OverlayRef(app, overlayType, opts, ref);
+        overlayRef._open(opts).then(() => {
+          resolve(overlayRef);
+        });
+
+      }).catch(err => {
+        console.error('Overlay appendComponent:', err);
+        reject(err);
+      });
+
+    }).catch(err => {
+      console.error('Overlay create:', err);
+    });
+  }
+
+  getByType(overlayType) {
+    if (this.app) {
+      for (let i = this.app.overlays.length - 1; i >= 0; i--) {
+        if (overlayType === this.app.overlays[i]._type) {
+          return this.app.overlays[i];
+        }
+      }
+    }
+    return null;
+  }
+
+  getByHandle(handle, overlayType) {
+    if (this.app) {
+      for (let i = this.app.overlays.length - 1; i >= 0; i--) {
+        if (handle === this.app.overlays[i]._handle &&
+            overlayType === this.app.overlays[i]._type) {
+          return this.app.overlays[i];
+        }
+      }
+    }
+    return null;
+  }
+
+}
+
+export class OverlayRef {
+  constructor(app, overlayType, opts, ref) {
+    let overlayInstance = (ref && ref.instance);
+    if (!overlayInstance) return;
+
+    this.zIndex = ROOT_Z_INDEX;
+    for (let i = 0; i < app.overlays.length; i++) {
+      if (app.overlays[i].zIndex >= this.zIndex) {
+        this.zIndex = app.overlays[i].zIndex + 1;
+      }
+    }
+    overlayInstance.zIndex = this.zIndex;
+    overlayInstance.overlayRef = this;
+    overlayInstance.close = (instanceOpts) => {
+      this.close(instanceOpts);
+    };
+
+    this._elementRef = ref.elementRef;
+    this._type = overlayType;
+    this._opts = opts;
+    this._handle = opts.handle || this.zIndex;
+
+    this._dispose = () => {
+      ref.dispose && ref.dispose();
+      util.array.remove(app.overlays, this);
+    };
+
+    app.overlays.push(this);
+  }
+
+  _open(opts={}) {
+    return new Promise(resolve => {
+      let animationName = (opts && opts.animation) || this._opts.enterAnimation;
+      let animation = Animation.create(this._elementRef.nativeElement, animationName);
+
+      animation.before.addClass('show-overlay');
+
+      ClickBlock(true, animation.duration() + 200);
+
+      animation.play().then(() => {
+        ClickBlock(false);
+        animation.dispose();
+        resolve();
+      });
+    }).catch(err => {
+      console.error(err);
+    });
+  }
+
+  close(opts={}) {
+    return new Promise(resolve => {
+      let animationName = (opts && opts.animation) || this._opts.leaveAnimation;
+      let animation = Animation.create(this._elementRef.nativeElement, animationName);
+
+      animation.after.removeClass('show-overlay');
+      ClickBlock(true, animation.duration() + 200);
+
+      animation.play().then(() => {
+        this._dispose();
+
+        ClickBlock(false);
+        animation.dispose();
+        resolve();
+      })
+    }).catch(err => {
+      console.error(err);
+    });
+  }
+
+}
+
+const ROOT_Z_INDEX = 1000;
diff --git a/ionic/components/radio/radio.js b/ionic/components/radio/radio.ts
similarity index 81%
rename from ionic/components/radio/radio.js
rename to ionic/components/radio/radio.ts
index 6dd2b21762..08714bc98e 100644
--- a/ionic/components/radio/radio.js
+++ b/ionic/components/radio/radio.ts
@@ -1,20 +1,12 @@
-import {ElementRef} from 'angular2/angular2'
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
-//import {ControlGroup, ControlDirective} from 'angular2/forms'
+import {ElementRef, Ancestor} from 'angular2/angular2';
 
 import {IonicDirective, IonicComponent, IonicView} from '../../config/annotations';
 
 
-@IonicDirective(RadioGroup)
+@IonicDirective({
+  selector: 'ion-radio-group'
+})
 export class RadioGroup {
-
-  static get config() {
-    return {
-      selector: 'ion-radio-group'
-    }
-  }
-
   constructor(
     elementRef: ElementRef//,
     //cd:ControlDirective
@@ -86,37 +78,29 @@ export class RadioGroup {
 }
 
 
-@IonicComponent(RadioButton)
+@IonicComponent({
+  selector: 'ion-radio',
+  properties: [
+    'value'
+  ],
+  host: {
+    '(^click)': 'buttonClicked($event)'
+  }
+})
 @IonicView({
   template: `
     <div class="item-content">
-
       <div class="item-title">
         <content></content>
       </div>
-
       <div class="item-media media-radio">
         <icon class="radio-off"></icon>
         <icon class="ion-ios-checkmark-empty radio-on"></icon>
       </div>
-
     </div>
   `
 })
 export class RadioButton {
-
-  static get config() {
-    return {
-      selector: 'ion-radio',
-      properties: [
-        'value'
-      ],
-      host: {
-        '(^click)': 'buttonClicked($event)'
-      }
-    }
-  }
-
   constructor(
     @Ancestor() group: RadioGroup,
     elementRef: ElementRef
diff --git a/ionic/components/radio/test/basic/index.js b/ionic/components/radio/test/basic/index.ts
similarity index 83%
rename from ionic/components/radio/test/basic/index.js
rename to ionic/components/radio/test/basic/index.ts
index 0a6a344588..eafd399e5f 100644
--- a/ionic/components/radio/test/basic/index.js
+++ b/ionic/components/radio/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';
 
diff --git a/ionic/components/scroll/pull-to-refresh.js b/ionic/components/scroll/pull-to-refresh.ts
similarity index 66%
rename from ionic/components/scroll/pull-to-refresh.js
rename to ionic/components/scroll/pull-to-refresh.ts
index 9e31fde806..f196fe847d 100644
--- a/ionic/components/scroll/pull-to-refresh.js
+++ b/ionic/components/scroll/pull-to-refresh.ts
@@ -1,9 +1,7 @@
-import {Renderer, ElementRef, EventEmitter} from 'angular2/angular2'
-import {Parent} 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, ElementRef, EventEmitter, Parent} from 'angular2/angular2'
+
+import {Content} from '../content/content';
 
-import {Content} from 'ionic/ionic';
 
 @Component({
   selector: 'ion-refresher',
diff --git a/ionic/components/scroll/scroll.js b/ionic/components/scroll/scroll.js
index c6896b4287..f5109e5bae 100644
--- a/ionic/components/scroll/scroll.js
+++ b/ionic/components/scroll/scroll.js
@@ -1,6 +1,4 @@
-import {ElementRef} from 'angular2/angular2'
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
+import {Component, View, ElementRef} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 
diff --git a/ionic/components/scroll/test/basic/index.ts b/ionic/components/scroll/test/basic/index.ts
new file mode 100644
index 0000000000..a7619dbcca
--- /dev/null
+++ b/ionic/components/scroll/test/basic/index.ts
@@ -0,0 +1,21 @@
+import {Component} from 'angular2/angular2';
+
+import {IonicView} from 'ionic/ionic';
+
+
+@Component({ selector: 'ion-app' })
+@IonicView({
+  templateUrl: 'main.html'
+})
+class IonicApp {
+  constructor() {
+    console.log('IonicApp Start')
+  }
+  doRefresh() {
+    console.log('DOREFRESH')
+  }
+}
+
+export function main(ionicBootstrap) {
+  ionicBootstrap(IonicApp);
+}
diff --git a/ionic/components/search-bar/search-bar.js b/ionic/components/search-bar/search-bar.ts
similarity index 82%
rename from ionic/components/search-bar/search-bar.js
rename to ionic/components/search-bar/search-bar.ts
index 69f168973c..75f3196d0b 100644
--- a/ionic/components/search-bar/search-bar.js
+++ b/ionic/components/search-bar/search-bar.ts
@@ -1,11 +1,20 @@
-import {ElementRef, Pipe} from 'angular2/angular2'
-import {onInit} from 'angular2/src/core/annotations_impl/annotations';
+import {ElementRef, onInit, Pipe} from 'angular2/angular2';
 //import {ControlGroup, ControlDirective} from 'angular2/forms'
 
 import {IonicComponent, IonicView} from '../../config/annotations';
 
 
-@IonicComponent(SearchBar)
+@IonicComponent({
+  selector: 'ion-search-bar',
+  properties: [
+    'list',
+    'query'
+  ],
+  defaultProperties: {
+    'cancelText': 'Cancel',
+    'placeholder': 'Search'
+  }
+})
 @IonicView({
   template: `
   <div class="search-bar-input-container" [class.left-align]="shouldLeftAlign">
@@ -16,21 +25,6 @@ import {IonicComponent, IonicView} from '../../config/annotations';
   <button class="search-bar-cancel">{{cancelText}}</button>`
 })
 export class SearchBar {
-
-  static get config() {
-    return {
-      selector: 'ion-search-bar',
-      properties: [
-        'list',
-        'query'
-      ],
-      defaultProperties: {
-        'cancelText': 'Cancel',
-        'placeholder': 'Search'
-      }
-    }
-  }
-
   constructor(
     elementRef: ElementRef//,
     //cd:ControlDirective
diff --git a/ionic/components/search-bar/test/basic/index.js b/ionic/components/search-bar/test/basic/index.ts
similarity index 92%
rename from ionic/components/search-bar/test/basic/index.js
rename to ionic/components/search-bar/test/basic/index.ts
index bd4145c47a..3da08c0e25 100644
--- a/ionic/components/search-bar/test/basic/index.js
+++ b/ionic/components/search-bar/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 {FormBuilder, Validators, formDirectives, Control, ControlGroup} from 'angular2/forms';
 
diff --git a/ionic/components/segment/segment.js b/ionic/components/segment/segment.ts
similarity index 76%
rename from ionic/components/segment/segment.js
rename to ionic/components/segment/segment.ts
index 6e59d0b94c..772e8bbf16 100644
--- a/ionic/components/segment/segment.js
+++ b/ionic/components/segment/segment.ts
@@ -1,8 +1,4 @@
-import {Renderer, ElementRef, EventEmitter} from 'angular2/angular2'
-
-import {onInit} 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 {Renderer, ElementRef, EventEmitter, onInit, Ancestor} from 'angular2/angular2';
 
 import {Control, NgControl,NgFormControl} from 'angular2/forms';
 import {ControlGroup, ControlDirective} from 'angular2/forms'
@@ -197,3 +193,46 @@ export class SegmentButton {
   }
 
 }
+
+
+@IonicDirective({
+  selector: 'ion-segment',
+  host: {
+    '(change)': 'onChange($event.target.value)',
+    '(input)': 'onChange($event.target.value)',
+    '(blur)': 'onTouched()',
+    '[value]': 'value',
+    '[class.ng-untouched]': 'cd.control?.untouched == true',
+    '[class.ng-touched]': 'cd.control?.touched == true',
+    '[class.ng-pristine]': 'cd.control?.pristine == true',
+    '[class.ng-dirty]': 'cd.control?.dirty == true',
+    '[class.ng-valid]': 'cd.control?.valid == true',
+    '[class.ng-invalid]': 'cd.control?.valid == false'
+  }
+})
+export class SegmentControlValueAccessor {
+  constructor(cd: NgControl, renderer: Renderer, elementRef: ElementRef, segment: Segment) {
+    this.onChange = (_) => {};
+    this.onTouched = (_) => {};
+    this.cd = cd;
+    this.renderer = renderer;
+    this.elementRef = elementRef;
+    this.segment = segment;
+
+    cd.valueAccessor = this;
+  }
+
+  writeValue(value) {
+    // both this.value and setProperty are required at the moment
+    // remove when a proper imperative API is provided
+    this.value = !value ? '' : value;
+    this.renderer.setElementProperty(this.elementRef.parentView.render, this.elementRef.boundElementIndex, 'value', this.value);
+
+    this.segment.value = this.value;
+    this.segment.selectFromValue(value);
+  }
+
+  registerOnChange(fn) { this.onChange = fn; }
+
+  registerOnTouched(fn) { this.onTouched = fn; }
+}
diff --git a/ionic/components/segment/test/basic/index.js b/ionic/components/segment/test/basic/index.ts
similarity index 89%
rename from ionic/components/segment/test/basic/index.js
rename to ionic/components/segment/test/basic/index.ts
index f2fe17e570..bd44520791 100644
--- a/ionic/components/segment/test/basic/index.js
+++ b/ionic/components/segment/test/basic/index.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
+import {Component} from 'angular2/angular2';
 import {formDirectives, FormBuilder, Validators, Control, ControlGroup} from 'angular2/forms';
 
 import {IonicView} from 'ionic/ionic';
diff --git a/ionic/components/slides/slides.js b/ionic/components/slides/slides.ts
similarity index 94%
rename from ionic/components/slides/slides.js
rename to ionic/components/slides/slides.ts
index d58c6875ad..157d8e4d99 100644
--- a/ionic/components/slides/slides.js
+++ b/ionic/components/slides/slides.ts
@@ -1,12 +1,9 @@
-import {ElementRef} from 'angular2/angular2'
-import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
+import {Component, View, ElementRef, onInit, Ancestor, NgFor} from 'angular2/angular2';
 
-import {onInit} from 'angular2/src/core/annotations_impl/annotations';
 import {DragGesture} from 'ionic/gestures/drag-gesture';
+import {IonicComponent, IonicDirective} from '../../config/annotations';
+import {dom} from 'ionic/util';
 import * as util from 'ionic/util';
-import {dom} from 'ionic/util'
-import {IonicComponent, IonicDirective, IonicView} from '../../config/annotations';
-import {Hammer} from 'ionic/gestures/hammer';
 
 
 /**
@@ -24,24 +21,18 @@ import {Hammer} from 'ionic/gestures/hammer';
  * * TODO: Test mouse support
  * * TODO: Port over mouse handling
  */
-@IonicComponent(Slides)
-@IonicView({
-  template: `<div class="slides-view"><content></content></div>`,
-  directives: [Slide, SlidePager]
+@IonicComponent({
+  selector: 'ion-slides',
+  properties: [
+    'loop',
+    'index',
+    'bounce'
+  ]
+})
+@View({
+  template: '<div class="slides-view"><content></content></div>'
 })
 export class Slides {
-
-  static get config() {
-    return {
-      selector: 'ion-slides',
-      properties: [
-        'loop',
-        'index',
-        'bounce'
-      ]
-    }
-  }
-
   constructor(elementRef: ElementRef) {
     // Grab the main container, and the slides-view wrapper
     this.ele = elementRef.nativeElement;
@@ -456,7 +447,9 @@ export class Slides {
 }
 
 
-@IonicDirective(Slide)
+@IonicDirective({
+  selector: 'ion-slide',
+})
 export class Slide {
   constructor(
     @Ancestor() slides: Slides,
@@ -467,12 +460,6 @@ export class Slide {
     slides.add(this);
   }
 
-  static get config() {
-    return {
-      selector: 'ion-slide',
-    }
-  }
-
   translate(x, duration) {
     this._translateX = x;
 
@@ -505,12 +492,13 @@ export class Slide {
 }
 
 
-@IonicComponent({
+@Component({
   selector: 'ion-pager',
 })
-@IonicView({
+@View({
   //[class.active]="$index == currentSlide}" ng-click="pagerClick($index)"><i class="icon ion-record"></i></span></div>',
-  template: `<span class="slide-pager-page" *ng-for="#page of getSlides()">{{page.width}}<i class="icon ion-record"></i>X</span>`
+  template: `<span class="slide-pager-page" *ng-for="#page of getSlides()">{{page.width}}<i class="icon ion-record"></i>X</span>`,
+  directives: [NgFor]
 })
 export class SlidePager {
   constructor(
@@ -524,12 +512,6 @@ export class SlidePager {
     this.slides.setPager(this);
   }
 
-  static get config() {
-    return {
-      selector: 'ion-pager',
-    }
-  }
-
   getSlides() {
     return this.slides.slides;
   }
diff --git a/ionic/components/slides/test/basic/index.js b/ionic/components/slides/test/basic/index.ts
similarity index 79%
rename from ionic/components/slides/test/basic/index.js
rename to ionic/components/slides/test/basic/index.ts
index b37f440474..e1cdeef11b 100644
--- a/ionic/components/slides/test/basic/index.js
+++ b/ionic/components/slides/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';
 
diff --git a/ionic/components/slides/test/continuous/index.js b/ionic/components/slides/test/continuous/index.ts
similarity index 92%
rename from ionic/components/slides/test/continuous/index.js
rename to ionic/components/slides/test/continuous/index.ts
index 57d289a7d6..4f36d13fc6 100644
--- a/ionic/components/slides/test/continuous/index.js
+++ b/ionic/components/slides/test/continuous/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';
 
diff --git a/ionic/components/split-view/split-nav-view.js b/ionic/components/split-view/split-nav-view.ts
similarity index 100%
rename from ionic/components/split-view/split-nav-view.js
rename to ionic/components/split-view/split-nav-view.ts
diff --git a/ionic/components/split-view/split-view.js b/ionic/components/split-view/split-view.ts
similarity index 98%
rename from ionic/components/split-view/split-view.js
rename to ionic/components/split-view/split-view.ts
index b07d3bdfc0..a77d2a0c98 100644
--- a/ionic/components/split-view/split-view.js
+++ b/ionic/components/split-view/split-view.ts
@@ -1,5 +1,6 @@
 import {Component, Parent, Decorator, View, ElementRef} from 'angular2/angular2'
-import {Nav} from 'ionic/components/nav/nav'
+
+import {Nav} from '../nav/nav'
 import * as util from 'ionic/util'
 
 // TODO consider more explicit API, a la tabs
diff --git a/ionic/components/switch/switch.js b/ionic/components/switch/switch.ts
similarity index 84%
rename from ionic/components/switch/switch.js
rename to ionic/components/switch/switch.ts
index cefd6d35c9..91318f1b22 100644
--- a/ionic/components/switch/switch.js
+++ b/ionic/components/switch/switch.ts
@@ -1,10 +1,18 @@
-import {ElementRef} from 'angular2/angular2'
+import {ElementRef} from 'angular2/angular2';
+import {ControlGroup, ControlDirective} from 'angular2/forms';
 
-import {ControlGroup, ControlDirective} from 'angular2/forms'
 import {IonicComponent, IonicView} from '../../config/annotations';
 
 
-@IonicComponent(Switch)
+@IonicComponent({
+  selector: 'ion-switch',
+  properties: [
+    'checked'
+  ],
+  host: {
+    '(click)': 'switchClicked($event)'
+  }
+})
 @IonicView({
   template: `
   <div class="item-content">
@@ -17,19 +25,6 @@ import {IonicComponent, IonicView} from '../../config/annotations';
   </div>`
 })
 export class Switch {
-
-  static get config() {
-    return {
-      selector: 'ion-switch',
-      properties: [
-        'checked'
-      ],
-      host: {
-        '(click)': 'switchClicked($event)'
-      }
-    }
-  }
-
   constructor(
     elementRef: ElementRef,
     cd: ControlDirective
@@ -66,15 +61,16 @@ export class Switch {
     this.checked = !!value;
   }
 
-
   set checked(checked) {
     this._checked = checked
     this.setCheckedProperty(checked)
     this.controlDirective._control().updateValue(this._checked);
   }
+
   get checked() {
     return this._checked
   }
+
   switchClicked(event) {
     this.checked = !this.checked;
   }
diff --git a/ionic/components/switch/test/basic/index.js b/ionic/components/switch/test/basic/index.ts
similarity index 89%
rename from ionic/components/switch/test/basic/index.js
rename to ionic/components/switch/test/basic/index.ts
index ea11c1369e..f7fa2ee581 100644
--- a/ionic/components/switch/test/basic/index.js
+++ b/ionic/components/switch/test/basic/index.ts
@@ -1,4 +1,4 @@
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
+import {Component} from 'angular2/angular2';
 import {FormBuilder, Validators, ControlGroup} from 'angular2/forms';
 
 import {IonicView} from 'ionic/ionic';
diff --git a/ionic/components/tabs/tab-bar.js b/ionic/components/tabs/tab-bar.js
deleted file mode 100644
index 00f4dbd616..0000000000
--- a/ionic/components/tabs/tab-bar.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import {Parent} from 'angular2/src/core/annotations_impl/visibility';
-import {Component} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-import {NgFor} from 'angular2/angular2';
-
-import {TabButton} from './tab-button';
-import {Icon} from '../icon/icon';
-
-
-@Component({
-  selector: 'ion-tab-bar'
-})
-@View({
-  template: `
-    <div class="tab-bar" role="tablist">
-      <button *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">
-        <icon [name]="t.tabIcon" class="tab-button-icon"></icon>
-        <span class="tab-button-text">{{t.tabTitle}}</span>
-      </button>
-    </div>
-  `,
-  directives: [NgFor, TabButton, Icon]
-})
-export class TabBar {
-  constructor(@Parent() tabs: Tabs) {
-    console.log('TabBar constructor', this.id);
-  }
-}
diff --git a/ionic/components/tabs/tab-button.js b/ionic/components/tabs/tab-button.js
deleted file mode 100644
index 0691d5297a..0000000000
--- a/ionic/components/tabs/tab-button.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import {Parent} from 'angular2/src/core/annotations_impl/visibility';
-import {Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
-
-import {Tabs} from './tabs';
-
-
-@Directive({
-  selector: 'button.tab-button',
-  properties: ['tab'],
-  host: {
-    '[attr.id]': 'btnId',
-    '[attr.aria-controls]': 'panelId',
-    '[attr.aria-selected]': 'tab.isSelected',
-    '(^click)': 'onClick($event)'
-  },
-  lifecycle: [onInit]
-})
-export class TabButton {
-  constructor(@Parent() tabs: Tabs) {
-    this.tabs = tabs;
-  }
-
-  onInit() {
-    let id = this.tab.item.id
-    this.btnId = 'tab-button-' + id;
-    this.panelId = 'tab-panel-' + id;
-  }
-
-  onClick(ev) {
-    ev.stopPropagation();
-    ev.preventDefault();
-    this.tabs.select(this.tab);
-  }
-}
diff --git a/ionic/components/tabs/tab.js b/ionic/components/tabs/tab.ts
similarity index 87%
rename from ionic/components/tabs/tab.js
rename to ionic/components/tabs/tab.ts
index 9bd27152df..939ac022ab 100644
--- a/ionic/components/tabs/tab.js
+++ b/ionic/components/tabs/tab.ts
@@ -1,8 +1,4 @@
-import {Parent} from 'angular2/src/core/annotations_impl/visibility';
-import {Directive, Component, onInit} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-import {ElementRef} from 'angular2/src/core/compiler/element_ref';
-import {Injector} from 'angular2/di';
+import {Directive, Component, View, onInit, Parent, ElementRef, forwardRef, Injector} from 'angular2/angular2';
 
 import {ViewController} from '../view/view-controller';
 import {ViewItem} from '../view/view-item';
@@ -26,7 +22,7 @@ import {Tabs} from './tabs';
 })
 @View({
   template: '<template pane-anchor></template><content></content>',
-  directives: [TabPaneAnchor]
+  directives: [forwardRef(() => TabPaneAnchor)]
 })
 export class Tab extends ViewController {
 
diff --git a/ionic/components/tabs/tabs.js b/ionic/components/tabs/tabs.ts
similarity index 77%
rename from ionic/components/tabs/tabs.js
rename to ionic/components/tabs/tabs.ts
index 052ee9d603..bb42004bdc 100644
--- a/ionic/components/tabs/tabs.js
+++ b/ionic/components/tabs/tabs.ts
@@ -1,17 +1,18 @@
-import {Optional} from 'angular2/src/di/annotations_impl'
-import {Component, onInit} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-import {Injector} from 'angular2/di';
-import {NgFor, ElementRef} from 'angular2/angular2';
+import {Component, Directive, View, onInit, Injector, NgFor, ElementRef, Optional, Parent, forwardRef} from 'angular2/angular2';
 
 import {ViewController} from '../view/view-controller';
 import {ViewItem} from '../view/view-item';
-import {TabButton} from './tab-button';
 import {Icon} from '../icon/icon';
 import {IonicComponent} from '../../config/annotations';
 
 
-@IonicComponent(Tabs)
+@IonicComponent({
+  selector: 'ion-tabs',
+  defaultProperties: {
+    'tabBarPlacement': 'bottom',
+    'tabBarIcons': 'top'
+  }
+})
 @View({
   template: `
     <nav class="tab-bar-container">
@@ -26,20 +27,9 @@ import {IonicComponent} from '../../config/annotations';
       <content></content>
     </section>
   `,
-  directives: [NgFor, TabButton, Icon]
+  directives: [NgFor, Icon, forwardRef(() => TabButton)]
 })
 export class Tabs extends ViewController {
-
-  static get config() {
-    return {
-      selector: 'ion-tabs',
-      defaultProperties: {
-        'tabBarPlacement': 'bottom',
-        'tabBarIcons': 'top'
-      }
-    }
-  }
-
   constructor(
     @Optional() parentViewCtrl: ViewController,
     @Optional() viewItem: ViewItem,
@@ -125,3 +115,32 @@ export class Tabs extends ViewController {
   }
 
 }
+
+@Directive({
+  selector: 'button.tab-button',
+  properties: ['tab'],
+  host: {
+    '[attr.id]': 'btnId',
+    '[attr.aria-controls]': 'panelId',
+    '[attr.aria-selected]': 'tab.isSelected',
+    '(^click)': 'onClick($event)'
+  },
+  lifecycle: [onInit]
+})
+class TabButton {
+  constructor(@Parent() tabs: Tabs) {
+    this.tabs = tabs;
+  }
+
+  onInit() {
+    let id = this.tab.item.id
+    this.btnId = 'tab-button-' + id;
+    this.panelId = 'tab-panel-' + id;
+  }
+
+  onClick(ev) {
+    ev.stopPropagation();
+    ev.preventDefault();
+    this.tabs.select(this.tab);
+  }
+}
diff --git a/ionic/components/tabs/test/advanced/e2e.js b/ionic/components/tabs/test/advanced/e2e.ts
similarity index 100%
rename from ionic/components/tabs/test/advanced/e2e.js
rename to ionic/components/tabs/test/advanced/e2e.ts
diff --git a/ionic/components/tabs/test/advanced/index.js b/ionic/components/tabs/test/advanced/index.ts
similarity index 98%
rename from ionic/components/tabs/test/advanced/index.js
rename to ionic/components/tabs/test/advanced/index.ts
index 58b0bc16fb..b956189cd0 100644
--- a/ionic/components/tabs/test/advanced/index.js
+++ b/ionic/components/tabs/test/advanced/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';
 
diff --git a/ionic/components/tabs/test/basic/e2e.js b/ionic/components/tabs/test/basic/e2e.ts
similarity index 100%
rename from ionic/components/tabs/test/basic/e2e.js
rename to ionic/components/tabs/test/basic/e2e.ts
diff --git a/ionic/components/tabs/test/basic/index.ts b/ionic/components/tabs/test/basic/index.ts
new file mode 100644
index 0000000000..8ae1df8e63
--- /dev/null
+++ b/ionic/components/tabs/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);
+}
diff --git a/ionic/components/tabs/test/tab-bar-bottom/e2e.js b/ionic/components/tabs/test/tab-bar-bottom/e2e.ts
similarity index 100%
rename from ionic/components/tabs/test/tab-bar-bottom/e2e.js
rename to ionic/components/tabs/test/tab-bar-bottom/e2e.ts
diff --git a/ionic/components/tabs/test/tab-bar-bottom/index.ts b/ionic/components/tabs/test/tab-bar-bottom/index.ts
new file mode 100644
index 0000000000..8ae1df8e63
--- /dev/null
+++ b/ionic/components/tabs/test/tab-bar-bottom/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);
+}
diff --git a/ionic/components/tabs/test/tab-bar-icons/e2e.js b/ionic/components/tabs/test/tab-bar-icons/e2e.ts
similarity index 100%
rename from ionic/components/tabs/test/tab-bar-icons/e2e.js
rename to ionic/components/tabs/test/tab-bar-icons/e2e.ts
diff --git a/ionic/components/tabs/test/tab-bar-icons/index.ts b/ionic/components/tabs/test/tab-bar-icons/index.ts
new file mode 100644
index 0000000000..8ae1df8e63
--- /dev/null
+++ b/ionic/components/tabs/test/tab-bar-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);
+}
diff --git a/ionic/components/tabs/test/tab-bar-top/e2e.js b/ionic/components/tabs/test/tab-bar-top/e2e.ts
similarity index 100%
rename from ionic/components/tabs/test/tab-bar-top/e2e.js
rename to ionic/components/tabs/test/tab-bar-top/e2e.ts
diff --git a/ionic/components/tabs/test/tab-bar-top/index.js b/ionic/components/tabs/test/tab-bar-top/index.js
deleted file mode 100644
index ca42a5e898..0000000000
--- a/ionic/components/tabs/test/tab-bar-top/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import {Component} 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);
-}
diff --git a/ionic/components/tabs/test/tab-bar-top/index.ts b/ionic/components/tabs/test/tab-bar-top/index.ts
new file mode 100644
index 0000000000..8ae1df8e63
--- /dev/null
+++ b/ionic/components/tabs/test/tab-bar-top/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);
+}
diff --git a/ionic/components/toolbar/toolbar.js b/ionic/components/toolbar/toolbar.ts
similarity index 70%
rename from ionic/components/toolbar/toolbar.js
rename to ionic/components/toolbar/toolbar.ts
index 62d66ff15a..aa06d4d480 100644
--- a/ionic/components/toolbar/toolbar.js
+++ b/ionic/components/toolbar/toolbar.ts
@@ -1,10 +1,6 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-import {ElementRef} from 'angular2/src/core/compiler/element_ref';
+import {Component, Directive, View, ElementRef} from 'angular2/angular2';
 import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
-import {NgZone} from 'angular2/src/core/zone/ng_zone';
 
-import {Platform} from 'ionic/platform/platform';
 import * as dom from '../../util/dom';
 
 
@@ -12,25 +8,11 @@ import * as dom from '../../util/dom';
   selector: 'ion-toolbar'
 })
 @View({
-  template: `<div class="toolbar-inner"><content></content></div>`,
-  /*
-  <div class="toolbar-title"><div class="toolbar-inner-title toolbar-title-hide"><content select="ion-title"></content></div></div><div class="toolbar-item toolbar-primary-item"><content select="[primary]"></content></div><div class="toolbar-item toolbar-secondary-item"><content select="[secondary]"></content></div></div>`,
-  */
-  directives: []
+  template: `<div class="toolbar-inner"><content></content></div>`
 })
 export class Toolbar {
-  constructor(elementRef:ElementRef, ngZone:NgZone) {
+  constructor(elementRef:ElementRef) {
     this.ele = elementRef.nativeElement;
-    Toolbar.config.invoke(this);
-
-    /*
-    TODO(mlynch): Revive this when the above content select don't throw errors.
-    ngZone.runOutsideAngular(() => {
-      setTimeout(() => {
-        this.alignTitle();
-      }, 32);
-    });
-    */
   }
 
   alignTitle() {
diff --git a/ionic/components/view/view-controller.js b/ionic/components/view/view-controller.ts
similarity index 98%
rename from ionic/components/view/view-controller.js
rename to ionic/components/view/view-controller.ts
index 9ca11e0e93..459821d1f4 100644
--- a/ionic/components/view/view-controller.js
+++ b/ionic/components/view/view-controller.ts
@@ -1,8 +1,6 @@
-import {Compiler} from 'angular2/angular2';
-import {ElementRef} from 'angular2/src/core/compiler/element_ref';
+import {Compiler, ElementRef, Injector, bind} from 'angular2/angular2';
 import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
 import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
-import {Injector, bind} from 'angular2/di';
 
 import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
@@ -14,6 +12,7 @@ import {Transition} from '../../transitions/transition';
 import {ClickBlock} from '../../util/click-block';
 import * as util from 'ionic/util';
 
+
 export class ViewController extends Ion {
 
   constructor(
diff --git a/ionic/components/view/view-item.js b/ionic/components/view/view-item.ts
similarity index 98%
rename from ionic/components/view/view-item.js
rename to ionic/components/view/view-item.ts
index 03f3a9c813..88c800cdd1 100644
--- a/ionic/components/view/view-item.js
+++ b/ionic/components/view/view-item.ts
@@ -101,8 +101,12 @@ export class ViewItem {
           this._promises = [];
         });
 
+      }, panesErr => {
+        console.error(panesErr);
       });
 
+    }, compileInHostErr => {
+      console.error(compileInHostErr);
     });
   }
 
diff --git a/ionic/components/view/view.ts b/ionic/components/view/view.ts
new file mode 100644
index 0000000000..037218f2f6
--- /dev/null
+++ b/ionic/components/view/view.ts
@@ -0,0 +1,15 @@
+import {Directive, ElementRef, Optional} from 'angular2/angular2';
+
+import {ViewItem} from './view-item';
+import {Ion} from '../ion';
+
+
+@Directive({
+  selector: 'ion-view',
+})
+export class IonView extends Ion {
+  constructor(@Optional() item: ViewItem, elementRef: ElementRef) {
+    super(elementRef);
+    this.ele = elementRef.nativeElement;
+  }
+}
diff --git a/ionic/config/annotations.ts b/ionic/config/annotations.ts
new file mode 100644
index 0000000000..38ad3863d6
--- /dev/null
+++ b/ionic/config/annotations.ts
@@ -0,0 +1,196 @@
+import {coreDirectives, Component, Directive, View} from 'angular2/angular2'
+
+import * as util from 'ionic/util';
+import {IonicConfig} from './config';
+import {IonicRouter} from '../routing/router';
+import {ionicBootstrap} from '../components/app/app';
+import {
+  Aside, Content, Scroll, Refresher,
+  Slides, Slide, SlidePager,
+  Tabs, Tab,
+  List, Item,
+  Icon,
+  Checkbox, Switch, Label, Input,
+  Segment, SegmentButton, SegmentControlValueAccessor,
+  RadioGroup, RadioButton, SearchBar,
+  Nav, NavbarTemplate, Navbar, NavPush, NavPop
+} from 'ionic/ionic';
+
+
+export function IonicView(config) {
+  return function(ComponentType) {
+
+    const ionicDirectives = [
+      // Angular
+      coreDirectives,
+
+      // Content
+      Aside, Content, Scroll, Refresher,
+      List, Item,
+      Slides, Slide, SlidePager,
+      Tabs, Tab,
+
+      // Media
+      Icon,
+
+      // Form elements
+      Segment, SegmentButton, SegmentControlValueAccessor,
+      //Checkbox, Switch, Label, Input
+      //RadioGroup, RadioButton, SearchBar,
+
+      // Nav
+      Nav, NavbarTemplate, Navbar, NavPush, NavPop
+    ];
+    config.directives = (config.directives || []).concat(ionicDirectives);
+
+    var annotations = Reflect.getMetadata('annotations', ComponentType) || [];
+    annotations.push(new View(config));
+    Reflect.defineMetadata('annotations', annotations, ComponentType);
+    return ComponentType;
+  }
+}
+
+export function IonicDirective(config) {
+  return function(ComponentType) {
+    var annotations = Reflect.getMetadata('annotations', ComponentType) || [];
+    annotations.push(new Directive(appendModeConfig(ComponentType, config)));
+    Reflect.defineMetadata('annotations', annotations, ComponentType);
+    return ComponentType;
+  }
+}
+
+export function IonicComponent(config) {
+  return function(ComponentType) {
+    var annotations = Reflect.getMetadata('annotations', ComponentType) || [];
+    annotations.push(new Component(appendModeConfig(ComponentType, config)));
+    Reflect.defineMetadata('annotations', annotations, ComponentType);
+    return ComponentType;
+  }
+}
+
+function appendModeConfig(ComponentType, config) {
+  config.host = config.host || {};
+
+  const defaultProperties = config.defaultProperties;
+
+  config.properties = config.properties || [];
+
+  for (let prop in defaultProperties) {
+    // add the property to the component "properties"
+    config.properties.push(prop);
+
+    // set the component "hostProperties", so the instance's
+    // property value will be used to set the element's attribute
+    config.host['[attr.' + util.pascalCaseToDashCase(prop) + ']'] = prop;
+  }
+
+  // called by the component's onInit when an instance has been created and properties bound
+  ComponentType.applyConfig = (instance) => {
+    for (let prop in defaultProperties) {
+      // Priority:
+      // ---------
+      // 1) Value set from within constructor
+      // 2) Value set from the host element's attribute
+      // 3) Value set by the users global config
+      // 4) Value set by the default mode/platform config
+      // 5) Value set from the component's default
+
+      if (instance[prop]) {
+        // this property has already been set on the instance
+        // could be from the user setting the element's attribute
+        // or from the user setting it within the constructor
+        continue;
+      }
+
+      // get the property values from a global user/platform config
+      let configVal = IonicConfig.global.setting(prop);
+      if (configVal) {
+        instance[prop] = configVal;
+        continue;
+      }
+
+      // wasn't set yet, so go with property's default value
+      instance[prop] = defaultProperties[prop];
+    }
+  };
+
+  if (config.delegates) {
+    ComponentType.getDelegate = (instance, delegateName) => {
+      let cases = config.delegates[delegateName] || [];
+      for (let i = 0; i < cases.length; i++) {
+        let delegateCase = cases[i];
+        if (util.isArray(delegateCase)) {
+          let [ check, DelegateConstructor ] = delegateCase;
+          if (check(instance)) {
+            return new DelegateConstructor(instance);
+          }
+        } else {
+          return new delegateCase(instance);
+        }
+      }
+    };
+  }
+
+  let componentId = config.classId || (config.selector && config.selector.replace('ion-', ''));
+  config.host['class'] = (componentId);
+
+  // should be able to set map of classes to add soon:
+  // https://github.com/angular/angular/issues/2364
+  config.host['[class.' + componentId + '-ios]'] = 'cssClass';
+
+  return config;
+}
+
+export function App(settings) {
+  return function(ComponentClass) {
+    // get current annotations
+    let annotations = Reflect.getMetadata('annotations', ComponentClass) || [];
+
+    // create @Component
+    let selector = settings.selector || 'ion-app';
+    annotations.push(new Component({
+      selector
+    }));
+
+    // create @View
+    let templateUrl = settings.templateUrl;
+    let template = settings.template;
+
+    // if no template was provided, default so it has a root ion-nav
+    if (!templateUrl && !template) {
+      template = '<ion-nav></ion-nav>';
+    }
+    annotations.push(new IonicView({
+      templateUrl,
+      template
+    }));
+
+    // redefine with added annotations
+    Reflect.defineMetadata('annotations', annotations, ComponentClass);
+
+
+    // create IonicConfig
+    let config = null;
+    if (typeof settings.config === IonicConfig) {
+      config = settings.config
+
+    } else if (settings.config) {
+      config = new IonicConfig(settings.config);
+    }
+
+    // create IonicRouter
+    let router = null;
+    if (typeof settings.router === IonicRouter) {
+      router = settings.router
+
+    } else if (settings.router) {
+      router = new IonicRouter(settings.router);
+    }
+
+    setTimeout(() => {
+      ionicBootstrap(ComponentClass, config, router);
+    }, 500);
+
+    return ComponentClass;
+  }
+}
diff --git a/ionic/config/config.js b/ionic/config/config.ts
similarity index 100%
rename from ionic/config/config.js
rename to ionic/config/config.ts
diff --git a/ionic/gestures/drag-gesture.js b/ionic/gestures/drag-gesture.ts
similarity index 100%
rename from ionic/gestures/drag-gesture.js
rename to ionic/gestures/drag-gesture.ts
diff --git a/ionic/gestures/gesture.js b/ionic/gestures/gesture.ts
similarity index 100%
rename from ionic/gestures/gesture.js
rename to ionic/gestures/gesture.ts
diff --git a/ionic/gestures/hammer.js b/ionic/gestures/hammer.ts
similarity index 100%
rename from ionic/gestures/hammer.js
rename to ionic/gestures/hammer.ts
diff --git a/ionic/gestures/slide-edge-gesture.js b/ionic/gestures/slide-edge-gesture.ts
similarity index 100%
rename from ionic/gestures/slide-edge-gesture.js
rename to ionic/gestures/slide-edge-gesture.ts
diff --git a/ionic/gestures/slide-gesture.js b/ionic/gestures/slide-gesture.ts
similarity index 100%
rename from ionic/gestures/slide-gesture.js
rename to ionic/gestures/slide-gesture.ts
diff --git a/ionic/index.js b/ionic/index.ts
similarity index 100%
rename from ionic/index.js
rename to ionic/index.ts
diff --git a/ionic/ionic.scss b/ionic/ionic.scss
old mode 100644
new mode 100755
index 62be7c5db9..f01064f81c
--- a/ionic/ionic.scss
+++ b/ionic/ionic.scss
@@ -43,6 +43,7 @@
   "components/radio/radio",
   "components/scroll/scroll",
   "components/scroll/pull-to-refresh",
+  "components/scroll/scroll",
   "components/search-bar/search-bar",
   "components/segment/segment",
   "components/switch/switch",
diff --git a/ionic/ionic.js b/ionic/ionic.ts
similarity index 100%
rename from ionic/ionic.js
rename to ionic/ionic.ts
diff --git a/ionic/net/http.js b/ionic/net/http.ts
similarity index 100%
rename from ionic/net/http.js
rename to ionic/net/http.ts
diff --git a/ionic/platform/platform.js b/ionic/platform/platform.ts
similarity index 100%
rename from ionic/platform/platform.js
rename to ionic/platform/platform.ts
diff --git a/ionic/platform/registry.js b/ionic/platform/registry.ts
similarity index 100%
rename from ionic/platform/registry.js
rename to ionic/platform/registry.ts
diff --git a/ionic/registry.js b/ionic/registry.ts
similarity index 69%
rename from ionic/registry.js
rename to ionic/registry.ts
index ec985bb1c0..6006facd9a 100644
--- a/ionic/registry.js
+++ b/ionic/registry.ts
@@ -1,8 +1,5 @@
 import {ElementRef, For, Parent, onInit} from 'angular2/angular2'
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-import {Ancestor, Self} from 'angular2/src/core/annotations_impl/visibility';
-import {Type} from 'angular2/src/facade/lang';
+import {Component, Directive} from 'angular2/angular2';
 
 import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
 import {Log} from 'ionic/util'
diff --git a/ionic/routing/path-recognizer.ts b/ionic/routing/path-recognizer.ts
new file mode 100644
index 0000000000..1749a76810
--- /dev/null
+++ b/ionic/routing/path-recognizer.ts
@@ -0,0 +1,181 @@
+import {
+  RegExp,
+  RegExpWrapper,
+  RegExpMatcherWrapper,
+  StringWrapper,
+  isPresent,
+  isBlank,
+  BaseException,
+  normalizeBlank
+} from 'angular2/src/facade/lang';
+import {
+  Map,
+  MapWrapper,
+  StringMap,
+  StringMapWrapper,
+  List,
+  ListWrapper
+} from 'angular2/src/facade/collection';
+
+
+class ContinuationSegment {
+  generate(params) {
+    return '';
+  }
+}
+
+class StaticSegment {
+  constructor(string) {
+    this.name = '';
+    this.regex = escapeRegex(string);
+  }
+
+  generate(params) {
+    return this.string;
+  }
+}
+
+class DynamicSegment {
+  constructor(name) {
+    this.regex = "([^/]+)";
+  }
+
+  generate(params) {
+    if (!StringMapWrapper.contains(params, this.name)) {
+      throw new BaseException(
+          `Route generator for '${this.name}' was not included in parameters passed.`)
+    }
+    return normalizeBlank(StringMapWrapper.get(params, this.name));
+  }
+}
+
+
+class StarSegment {
+  constructor(name) {
+    this.regex = "(.+)";
+  }
+
+  generate(params) {
+    return normalizeBlank(StringMapWrapper.get(params, this.name));
+  }
+}
+
+
+var paramMatcher = RegExpWrapper.create("^:([^\/]+)$");
+var wildcardMatcher = RegExpWrapper.create("^\\*([^\/]+)$");
+
+function parsePathString(route: string) {
+  // normalize route as not starting with a "/". Recognition will
+  // also normalize.
+  if (StringWrapper.startsWith(route, "/")) {
+    route = StringWrapper.substring(route, 1);
+  }
+
+  var segments = splitBySlash(route);
+  var results = [];
+  var specificity = 0;
+
+  // The "specificity" of a path is used to determine which route is used when multiple routes match
+  // a URL.
+  // Static segments (like "/foo") are the most specific, followed by dynamic segments (like
+  // "/:id"). Star segments
+  // add no specificity. Segments at the start of the path are more specific than proceeding ones.
+  // The code below uses place values to combine the different types of segments into a single
+  // integer that we can
+  // sort later. Each static segment is worth hundreds of points of specificity (10000, 9900, ...,
+  // 200), and each
+  // dynamic segment is worth single points of specificity (100, 99, ... 2).
+  if (segments.length > 98) {
+    throw new BaseException(`'${route}' has more than the maximum supported number of segments.`);
+  }
+
+  var limit = segments.length - 1;
+  for (var i = 0; i <= limit; i++) {
+    var segment = segments[i], match;
+
+    if (isPresent(match = RegExpWrapper.firstMatch(paramMatcher, segment))) {
+      results.push(new DynamicSegment(match[1]));
+      specificity += (100 - i);
+    } else if (isPresent(match = RegExpWrapper.firstMatch(wildcardMatcher, segment))) {
+      results.push(new StarSegment(match[1]));
+    } else if (segment == '...') {
+      if (i < limit) {
+        // TODO (matsko): setup a proper error here `
+        throw new BaseException(`Unexpected "..." before the end of the path for "${route}".`);
+      }
+      results.push(new ContinuationSegment());
+    } else if (segment.length > 0) {
+      results.push(new StaticSegment(segment));
+      specificity += 100 * (100 - i);
+    }
+  }
+
+  return {segments: results, specificity};
+}
+
+function splitBySlash(url: string): List<string> {
+  return url.split('/');
+}
+
+
+// represents something like '/foo/:bar'
+export class PathRecognizer {
+
+  constructor(path) {
+    this.segments = [];
+
+    // TODO: use destructuring assignment
+    // see https://github.com/angular/ts2dart/issues/158
+    var parsed = parsePathString(path);
+    var specificity = parsed['specificity'];
+    var segments = parsed['segments'];
+    var regexString = '^';
+
+    ListWrapper.forEach(segments, (segment) => {
+      if (segment instanceof ContinuationSegment) {
+        this.terminal = false;
+      } else {
+        regexString += '/' + segment.regex;
+      }
+    });
+
+    if (this.terminal) {
+      regexString += '$';
+    }
+
+    this.regex = RegExpWrapper.create(regexString);
+    this.segments = segments;
+    this.specificity = specificity;
+  }
+
+  parseParams(url) {
+    var params = StringMapWrapper.create();
+    var urlPart = url;
+    for (var i = 0; i < this.segments.length; i++) {
+      var segment = this.segments[i];
+      if (segment instanceof ContinuationSegment) {
+        continue;
+      }
+
+      var match = RegExpWrapper.firstMatch(RegExpWrapper.create('/' + segment.regex), urlPart);
+      urlPart = StringWrapper.substring(urlPart, match[0].length);
+      if (segment.name.length > 0) {
+        StringMapWrapper.set(params, segment.name, match[1]);
+      }
+    }
+
+    return params;
+  }
+
+  generate(params) {
+    return ListWrapper.join(
+        ListWrapper.map(this.segments, (segment) => '/' + segment.generate(params)), '');
+  }
+}
+
+var specialCharacters = ['/', '.', '*', '+', '?', '|', '(', ')', '[', ']', '{', '}', '\\'];
+var escapeRe = RegExpWrapper.create('(\\' + specialCharacters.join('|\\') + ')', 'g');
+
+function escapeRegex(string): string {
+  return StringWrapper.replaceAllMapped(string, escapeRe, (match) => { return "\\" + match; });
+}
diff --git a/ionic/routing/router.ts b/ionic/routing/router.ts
new file mode 100644
index 0000000000..2cf624b362
--- /dev/null
+++ b/ionic/routing/router.ts
@@ -0,0 +1,169 @@
+import {
+  RegExp,
+  RegExpWrapper,
+  RegExpMatcherWrapper,
+  StringWrapper,
+  isPresent,
+  isBlank,
+  BaseException,
+  normalizeBlank
+} from 'angular2/src/facade/lang';
+
+import * as util from '../util/util';
+import {PathRecognizer} from './path-recognizer';
+
+
+export class IonicRouter {
+  constructor(config) {
+    this._routes = {};
+    this._viewCtrls = [];
+    this.config(config);
+  }
+
+  app(app) {
+    this._app = app;
+  }
+
+  config(config) {
+    for (let routeName in config) {
+      this.addRoute(routeName, config[routeName]);
+    }
+  }
+
+  addRoute(routeName, routeConfig) {
+    if (routeName && routeConfig && routeConfig.path) {
+      this._routes[routeName] = new Route(routeName, routeConfig)
+    }
+  }
+
+  init() {
+    let rootViewCtrl = this.activeViewController();
+    if (rootViewCtrl) {
+      let matchedRoute = this.match( this.getCurrentPath() ) || this.otherwise();
+      this.push(rootViewCtrl, matchedRoute);
+    }
+  }
+
+  match(path) {
+    let matchedRoute = null;
+    let routeMatch = null;
+    let highestSpecifity = 0;
+
+    for (let routeName in this._routes) {
+      routeMatch = this._routes[routeName].match(path);
+
+      if (routeMatch.match && (!matchedRoute || routeMatch.specificity > highestSpecifity)) {
+        matchedRoute = this._routes[routeName];
+        highestSpecifity = routeMatch.specificity;
+      }
+    }
+    return matchedRoute;
+  }
+
+  otherwise(val) {
+    if (arguments.length) {
+      this._otherwise = val;
+
+    } else if (this._otherwise) {
+      return this._routes[this._otherwise];
+    }
+  }
+
+  push(viewCtrl, route) {
+    let self = this;
+
+    function run() {
+      self._app.zone().run(() => {
+        viewCtrl.push(route.cls);
+      });
+    }
+
+    if (viewCtrl && route) {
+      if (route.cls) {
+        run();
+
+      } else if (route.module) {
+        System.import(route.module).then(m => {
+          if (m) {
+            route.cls = m[route.name];
+            run();
+          }
+        });
+      }
+    }
+  }
+
+  stateChange(activeView) {
+    if (activeView && activeView.ComponentType) {
+
+      let routeConfig = activeView.ComponentType.route;
+      if (routeConfig) {
+        let matchedRoute = this.match(routeConfig.path);
+
+        if (matchedRoute) {
+          this.updateState(matchedRoute);
+        }
+      }
+    }
+  }
+
+  updateState(route) {
+    let newPath = route.path;
+    if (window.location.hash !== '#' + newPath) {
+      console.log('updateState', newPath);
+      window.location.hash = newPath;
+    }
+  }
+
+  addViewController(viewCtrl) {
+    this._viewCtrls.push(viewCtrl);
+  }
+
+  activeViewController() {
+    if (this._viewCtrls.length) {
+      return this._viewCtrls[ this._viewCtrls.length - 1 ];
+    }
+    return null;
+  }
+
+  getCurrentPath() {
+    let hash = window.location.hash;
+    // Grab the path without the leading hash
+    return hash.slice(1);
+  }
+
+}
+
+
+export class Routable {
+  constructor(cls, routeConfig) {
+    cls.route = routeConfig;
+  }
+}
+
+
+class Route {
+  constructor(name, routeConfig) {
+    this.name = name;
+    this.cls = null;
+    util.extend(this, routeConfig);
+    this.recognizer = new PathRecognizer(this.path);
+  }
+
+  match(matchPath) {
+    let routeMatch = new RouteMatch(this, matchPath);
+    if (routeMatch) {
+      return routeMatch;
+    }
+    return false;
+  }
+
+}
+
+class RouteMatch {
+  constructor(route, matchPath) {
+    this.route = route;
+    this.specificity = route.recognizer.specificity;
+    this.match = RegExpWrapper.firstMatch(route.recognizer.regex, matchPath);
+  }
+}
diff --git a/ionic/transitions/ios-transition.js b/ionic/transitions/ios-transition.ts
similarity index 100%
rename from ionic/transitions/ios-transition.js
rename to ionic/transitions/ios-transition.ts
diff --git a/ionic/transitions/transition.js b/ionic/transitions/transition.ts
similarity index 99%
rename from ionic/transitions/transition.js
rename to ionic/transitions/transition.ts
index d8629f8677..6bb27750b7 100644
--- a/ionic/transitions/transition.js
+++ b/ionic/transitions/transition.ts
@@ -85,7 +85,7 @@ export class Transition extends Animation {
    STATIC CLASSES
    */
   static create(nav, opts = {}) {
-    const name = opts.animation || IonicConfig.global.setting('viewTransition');
+    const name = opts.animation || IonicConfig.global.setting('viewTransition') || 'ios';
 
     let TransitionClass = TransitionRegistry[name];
     if (!TransitionClass) {
diff --git a/ionic/util.js b/ionic/util.ts
similarity index 100%
rename from ionic/util.js
rename to ionic/util.ts
diff --git a/ionic/util/click-block.js b/ionic/util/click-block.ts
similarity index 100%
rename from ionic/util/click-block.js
rename to ionic/util/click-block.ts
diff --git a/ionic/util/dom.js b/ionic/util/dom.ts
similarity index 100%
rename from ionic/util/dom.js
rename to ionic/util/dom.ts
diff --git a/ionic/util/focus.js b/ionic/util/focus.ts
similarity index 100%
rename from ionic/util/focus.js
rename to ionic/util/focus.ts
diff --git a/ionic/util/tap.js b/ionic/util/tap.ts
similarity index 100%
rename from ionic/util/tap.js
rename to ionic/util/tap.ts
diff --git a/ionic/util/test/util.spec.js b/ionic/util/test/util.spec.ts
similarity index 100%
rename from ionic/util/test/util.spec.js
rename to ionic/util/test/util.spec.ts
diff --git a/ionic/util/util.js b/ionic/util/util.ts
similarity index 98%
rename from ionic/util/util.js
rename to ionic/util/util.ts
index 7034dc9b95..9e0b89e885 100644
--- a/ionic/util/util.js
+++ b/ionic/util/util.ts
@@ -144,7 +144,7 @@ export function getQuerystring(url, key) {
       if (queries.length) {
         queries.forEach((param) => {
           var split = param.split('=');
-          queryParams[split[0]] = split[1];
+          queryParams[split[0]] = split[1].split('#')[0];
         });
       }
     }
diff --git a/package.json b/package.json
index 5fd9a80c5e..f5e1245045 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "gulp-sass": "^1.3.3",
     "gulp-shell": "^0.4.0",
     "gulp-traceur": "^0.17.1",
+    "gulp-typescript": "^2.7.7",
     "gulp-watch": "^4.2.4",
     "gulp-webpack": "^1.4.0",
     "gulp-wrap": "^0.11.0",
@@ -34,6 +35,7 @@
     "systemjs-builder": "^0.10.3",
     "through2": "^0.6.3",
     "traceur-runtime": "0.0.59",
+    "typescript": "tlancina/TypeScript",
     "vinyl": "^0.4.6",
     "webpack": "^1.9.10",
     "yargs": "^3.6.0"
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000000..0f72feab04
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,13 @@
+{
+    "version": "1.5.0-beta",
+    "compilerOptions": {
+        "target": "es6",
+        "module": "system",
+        "declaration": true,
+    },
+    "filesGlob": [
+        "./**/*.ts",
+        "!node_modules/**/*.ts",
+        "!node_modules/**/*.tsx"
+    ]
+}