fix(ion-button): ion-button on a tag should be excluded (#8250 )

fixes #8249
chore(changelog): add note about ionic-angular module changes
2026-03-13 10:22:08 +08:00 · 2016-09-28 19:13:31 +02:00 · 2016-09-28 11:51:51 -05:00 · 2016-09-28 11:43:12 -05:00 · 2016-09-27 22:18:32 -05:00 · 2016-09-27 16:48:27 -05:00
1038 changed files with 33264 additions and 24080 deletions
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -5,7 +5,7 @@ Thanks for your interest in contributing to the Ionic Framework! :tada:

 ## Contributing Etiquette

-Please see our [Contributor Code of Conduct](./CODE_OF_CONDUCT.md) for information on our rules of conduct.
+Please see our [Contributor Code of Conduct](https://github.com/driftyco/ionic/blob/master/CODE_OF_CONDUCT.md) for information on our rules of conduct.


 ## Creating an Issue
@@ -97,7 +97,7 @@ Looking for an issue to fix? Make sure to look through our issues with the [help
    *
    * ...
    *
-    * @demo /docs/v2/demos/badge/
+    * @demo /docs/v2/demos/src/badge/
  **/
  ```
 3. Run `gulp watch.demos` to watch for changes to the demo
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ log.txt
 *.sublime-workspace

 .idea/
+.vscode/
 .sass-cache/
 .versions/
 coverage/
@@ -21,12 +22,19 @@ $RECYCLE.BIN/
 Thumbs.db
 UserInterfaceState.xcuserstate

-scripts/resources/web-animations-js/test/
-scripts/resources/web-animations-js/inter-*
-scripts/resources/web-animations-js/**/*.map
-scripts/resources/web-animations-js/**/*.md
-scripts/resources/web-animations-js/**/*.sh
-scripts/resources/web-animations-js/**/*.yml
-scripts/resources/web-animations-js/**/*.gz
-
 .package.tmp.json
+
+src/themes/version.scss
+scripts/e2e/webpackEntryPoints.json
+scripts/build/e2e-generated-tsconfig.json
+*.css.ts
+
+# demo stuff
+demos/node_modules
+demos/polyfills
+demos/css
+demos/fonts
+demos/src/**/*.js*
+demos/src/**/*.ngfactory.ts
+demos/src/**/*.d.ts
+demos/src/**/*.metadata.json
--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@@ -3,10 +3,15 @@
 # See config at https://github.com/brigade/scss-lint/blob/master/config/default.yml

 exclude:
-  - 'src/components/slides/**'
+  - 'src/components/item/item.ios.scss'
+  - 'src/components/item/item.md.scss'
+  - 'src/components/list/list.ios.scss'
  - 'src/components/show-hide-when/**'
-  - 'src/components.*.scss'
-  - 'src/util/*.scss'
+  - 'src/components/slides/**'
+  - 'src/themes/ionic.mixins.scss'
+  - 'src/themes/license.scss'
+  - 'src/themes/util.scss'
+  - 'src/themes/version.scss'
  - 'src/platform/cordova.*.scss'


--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,765 @@
+<a name="2.0.0-rc.0"></a>
+# [2.0.0-rc.0](https://github.com/driftyco/ionic/compare/v2.0.0-beta.11...v2.0.0-rc.0) (2016-09-28)
+
+RC0 requires changes to the structure of your app. To get started updating your app see the [upgrade steps](#steps-to-upgrade-to-rc0) section below.
+
+### New Features
+* Ionic 2 API finalized for `2.0.0` release
+* Angular 2.0.0 (final!)
+* ionViewCanEnter / CanLeave lifecycle events
+* FAB Button lists
+* Ahead of Time (AoT) compiler ready
+* Components can now individually set a mode, which means an app can mix and match iOS / Material Design / Windows Platform modes if that’s desired.
+* Typescript 2.0
+* @types support for third-party libraries
+* Move away from `gulp` to `@ionic/app-scripts`
+* Use Rollup for bundling instead of `browserify` or `webpack`
+
+### BREAKING CHANGES
+
+* Angular upgrade to [2.0.0](https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html)
+
+* [Renamed Lifecycle events](#lifecycle-events-renamed).
+
+* Storage has been removed from ionic-angular and into a separate module, @ionic/storage.
+Starters have been updated to add this, make sure to add it to your package.json if you’re using the storage system. See more [details here](#storage).
+
+* Nav transitions are queued. For more info on what this means for you see [this section](#nav-transitions).
+
+* Removed Tabs `preloadTabs` ability. This is no longer needed with the Ahead of Time (AoT) compiler.
+
+* Icons in buttons require an attribute on the parent button in order to style them.
+
+* Platform and mode CSS classes have been moved from the <body> element to the <ion-app> element.
+
+* select: Select’s `alertOptions` input has been renamed to `selectOptions`. See more [details here](#select-changes).
+
+* colors: Colors should be passed in the `color` input on components, not added
+individually as an attribute on the component. See more [details here](#component-colors).
+
+* buttons: `<button>` becomes `<button ion-button>`. See more [details here](#new-behavior-of-button) and [here](#new-behavior-of-icons-in-buttons).
+
+* Head link tags for CSS files are no longer dynamically updated, but one CSS file is imported.
+(Future build processes will narrow down the CSS file further to only include what’s used). See more [details here](#update-css-link-tags).
+
+* The `<scroll-content>` element, which is internal to `<ion-content>`, has been renamed to
+  `<div class=”scroll-content”>` since it was neither a directive nor a web component.
+
+* `<ion-fixed>` has been removed, use `<div ion-fixed>` instead.
+
+* scss: Changes to how sass/scss is imported. See more [details here](#sass-import).
+
+* typings: We have stopped using the `typings` tool and have migrated to `npm @types`. See more [details here](#typings).
+
+#### Lifecycle Events Renamed
+
+Renamed `ionViewLoaded` to `ionViewDidLoad`
+Removed `ionViewDidUnload`
+Removed `fireOtherLifecycles` from ViewController
+
+#### Nav Transitions
+
+Nav transitions are now queued. Meaning if you run:
+
+```
+navCtrl.push(Page1);
+navCtrl.push(Page2);
+```
+
+Page1 will transition in, then immediately Page2 will transition in. There can never be two transitions happening at the same time.
+
+Page transition promises can now possibly reject the returned promises. Used mainly for `ionViewCanEnter` and `ionViewCanLeave`.
+
+#### Component Colors
+
+Colors are no longer added directly to a component, they should instead be passed in the `color` attribute.
+
+For example:
+
+```
+<ion-tabs primary>
+```
+
+Becomes
+
+```
+<ion-tabs color=”primary”>
+```
+
+Or to bind an expression to color:
+
+```
+<ion-navbar [color]="barColor">
+   ...
+</ion-navbar>
+```
+
+```ts
+@Component({
+  templateUrl: 'build/pages/about/about.html'
+})
+export class AboutPage {
+  barColor: string;
+
+  constructor(private nav: NavController, platform: Platform) {
+    this.barColor = platform.is('android') ? 'primary' : 'light';
+  }
+}
+```
+
+Components with this property:
+ Badge
+ Button
+ Checkbox
+ Chip
+ FAB
+ Icon
+ Item (Item, Item Divider, List Header)
+ Label
+ Navbar
+ Radio
+ Searchbar
+ Segment
+ Spinner
+ Tabs
+ Toggle
+ Toolbar
+ Typography (headers, paragraphs, spans, etc.)
+
+**Reason for this change:**
+It was difficult to dynamically add colors to components, especially if the name of the color attribute was unknown in the template.
+This change keeps the css flat since we aren’t chaining color attributes on components and instead we assign a class to the component which includes the color’s name.
+This allows you to easily toggle a component between multiple colors.
+Speeds up performance because we are no longer reading through all of the attributes to grab the color ones.
+
+#### Select Changes
+
+Select’s `alertOptions` input has been renamed to `selectOptions`. It now allows you to pass options for either the alert or action-sheet
+interface. Refer to their documentation for the options each of them
+accept.
+
+[ActionSheet](http://ionicframework.com/docs/v2/api/components/action-sheet/ActionSheetController/#create)
+[Alert](http://ionicframework.com/docs/v2/api/components/alert/AlertController/#create)
+
+#### New Behavior of Button
+`<button>` becomes `<button ion-button>`
+`<a button>` becomes `<a ion-button>`
+`<button ion-item>` does not get the `ion-button` attribute
+Buttons inside of `<ion-item-options>` do get the `ion-button` attribute
+
+**Reason for this change:**
+It was difficult to have custom buttons since buttons automatically received the Ionic styles - the user can now take advantage of adding their own styling to a button if they want it to behave differently than the Ionic button.
+Keeping the `<a>` and `<button>` element and adding `ion-button` as an attribute gives us the ability to take advantage of the native functionality and built-in accessibility of native elements. If Ionic provided an <ion-button> we’d have to copy over all the possible attributes and events to the real nested button/link (type=submit, formnovalidate, value, autofocus, href, target, focus/blur, download, nofollow, ping, tel:86705309, etc). Additionally, ng2 does not have the “replace” directive where <ion-button> could be turned into <a ion-button>.
+Since `button` was already being used as an attribute to the `<a>` element, this is more consistent between the two.
+If a navPush or navPop directive is on an `<a ion-button>`, Ionic can automatically add the `href` attribute.
+[A few reasons why we didn’t create `<ion-button>`](https://www.youtube.com/watch?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g&v=CZGqnp06DnI)
+
+
+references #7467
+* button: - `<button>` becomes `<button ion-button>`
+- `<a button>` becomes `<a ion-button>`
+- `<button ion-item>` does not get the `ion-button` attribute
+- Buttons inside of `<ion-item-options>` do get the `ion-button`
+attribute
+- Removed the `category` attribute, this should be passed in
+`ion-button` instead.
+- Button attributes added for icons in buttons: `icon-only`,
+`icon-left`, and `icon-right`
+
+
+#### New Behavior of Icons in Buttons
+
+Icon only buttons
+```
+<button>
+  <ion-icon name=”rainy”></ion-icon>
+</button>
+```
+
+becomes
+
+```
+<button ion-button icon-only>
+  <ion-icon name=”rainy”></ion-icon>
+</button>
+```
+Icon left of text in a button
+```
+<button>
+  <ion-icon name=”rainy”></ion-icon>
+  Rainy
+</button>
+```
+
+becomes
+
+```
+<button ion-button icon-left>
+  <ion-icon name=”rainy”></ion-icon>
+  Rainy
+</button>
+```
+Icon right of text in a button
+```
+<button>
+  Rainy
+  <ion-icon name=”rainy”></ion-icon>
+</button>
+```
+
+becomes
+
+```
+<button ion-button icon-right>
+  Rainy
+  <ion-icon name=”rainy”></ion-icon>
+</button>
+```
+Item option buttons - the `icon-left` attribute should still be added to the `<ion-item-options>` container and not the button itself.
+`menuToggle` buttons should not get the `icon-only` attribute
+
+**Reason for this change:**
+There was a noticeable performance decrease from us reading in each button to determine where icons were placed and how to style them. This change improves performance.
+This adds styling so that the buttons and icons will be padded a certain amount, but the user is free to leave these attributes off and style the components themselves.
+
+#### Update CSS Link Tags
+
+Ionic stylesheets are no longer dynamically loaded per platform. Instead there will be one CSS file to import. Note that future build processes will slim down the CSS file even further to only include component CSS actually used.
+
+In the head of your `index.html` file, replace:
+
+```
+<!-- ionic dynamically decides which stylesheet to load -->
+<link ios-href="build/css/app.ios.css" rel="stylesheet">
+<link md-href="build/css/app.md.css" rel="stylesheet">
+<link wp-href="build/css/app.wp.css" rel="stylesheet">
+```
+
+With:
+
+```
+<link href="build/main.css" rel="stylesheet">
+```
+#### Sass Import
+
+The default configuration will be updated, but if your existing app is using Sass and importing Ionic Sass files directly you’ll need to update the `includePaths` of Node Sass.
+
+```
+node_modules/ionic-angular/themes
+```
+
+Next, to include Ionic into your custom Sass file you’ll need to update the Ionic import to this:
+
+```
+@import "ionic.theme.default";
+```
+
+#### Typings
+
+Any type definitions for third party libraries that are included via the `typings` tool and are included in the the typings.json file should
+be updated to use `npm @types`. An example of how this looks is:
+
+```
+npm install @types/lodash --save-dev --save-exact
+```
+
+Delete the `typings.json` file, and the `typings` directory.
+
+#### Storage
+
+The storage utilities have been moved outside of the framework to a separate library called `@ionic/storage`.
+
+This library can be installed by executing the following command:
+
+```
+npm install @ionic/storage --save --save-exact
+```
+
+It must be included in the app's `NgModule` list of `providers`:
+
+```
+import { Storage } from '@ionic/storage';
+
+...
+
+@NgModule({
+  ...
+  providers: [Storage]
+})
+
+```
+
+It can then be injected into any class that needs access to it:
+
+```
+import { Storage } from '@ionic/storage';
+
+...
+
+export class MyAwesomePage {
+  constructor(public storage: Storage) {
+  }
+
+  ionViewDidEnter() {
+
+    this.storage.get('myKey').then( (value:any) => {
+      console.log('My value is:', value);
+    });
+  }
+}
+```
+
+#### Deployment Changes
+
+`ionic-angular` package includes es5 code with es2015 module import/exports, `umd` modules, and pure `es2015` code. The `package.json` is set up using the `main` and `module` options to make this work seamlessly.
+
+### Steps to Upgrade to RC0
+
+We are providing 2 ways to update your app with this release. The first way will guide you through creating a new Ionic 2 project and copying your project files to it. This is the easiest way to update your app in our opinion. The second way will step through how to update your existing project. There are a lot of steps involved with this way, and we recommend viewing our conference app for any clarification if you choose this way. This is it! We don’t plan on making any more major API changes after this version.
+
+Note: For details on NgModules you can read the Angular docs on them [here](https://angular.io/docs/ts/latest/guide/ngmodule.html)
+
+#### Copying Your Project to a New Project
+
+1. Install the latest Ionic CLI:
+
+```
+npm install -g ionic
+```
+Note: if you have installed the beta cli you should run `npm uninstall -g ionic` first.
+
+
+2. Create a new Ionic 2 RC0 app:
+
+```
+ionic start --v2 myApp
+```
+
+3. Copy/paste all of your pages from `app/pages/` of your beta.11 app to `src/pages/`, providers from `app/providers` to `src/providers` pipes from `app/pipes` to `src/pipes` and any custom components to `src/components` in the new RC0 app.
+
+4. Modify all `templateUrl`'s to be relative to the `.ts` file. For example in `app.component.ts` the url should change from `build/app.html` to `app.html` and in a page referencing `about.html` from `build/pages/about/about.html` to `about.html`.
+
+5. Import and add each of your pages to the `declarations` array and the `entryComponents` array in `src/app/app.module.ts.
+
+6. Import and add each of your custom components to the `declarations` array in `src/app/app.module.ts`.
+
+7. Import and add each of your providers to the `providers` array in `src/app/app.module.ts`.
+
+8. Remove any use of the `providers` entry in `@Component` from your pages.
+
+9. Change any uses of the `private` TypeScript keyword to `public`.
+
+10. Change `<button />` to `<button ion-button />` according to [these instructions](#new-behavior-of-button).
+
+11. Pass colors to the `color` attribute : `<button primary />` changes to `<button color=”primary” />`.
+
+12. Move any Ionic config to the `IonicModule.forRoot(MyApp, {configObject})` in `app.module.ts` where its says `configObject`.
+
+13. Move any variables from the mode specific sass files in you're beta.11 app into the `app.variables` file under the mode heading in the new RC0 app.
+
+
+#### Modifying your Existing Project
+
+1. Install the latest Ionic CLI:
+```
+npm install -g ionic
+```
+Note: if you have installed the beta cli you should run `npm uninstall -g ionic` first.
+
+2. Update package.json dependencies and devDependencies to match the [ionic2-app-base package.json](https://github.com/driftyco/ionic2-app-base/blob/master/package.json), then run `npm install` in your project folder.
+
+3. Copy the npm scripts from the [ionic2-app-base package.json](https://github.com/driftyco/ionic2-app-base/blob/master/package.json) to your package.json.
+
+4. Delete the `gulpfile.js`.
+
+5. Rename folder `app` to `src`.
+
+6. Create directory `app` inside of `src`.
+
+7. Move `app.html` and `app.ts` inside of `src/app`.
+
+8. Rename `app.ts` to `app.component.ts`.
+
+9. Add `app.module.ts` file and copy content from [ionic2-starter-blank](https://github.com/driftyco/ionic2-starter-blank/blob/master/src/app/app.module.ts).
+
+10. Move any providers from `ionicBootstrap` in `app.component.ts` to the providers in `app.module.ts`. Make sure to copy imports too.
+
+11. Import and add any of your custom components to the `declarations` array in `src/app/app.module.ts`.
+
+12. Move any Ionic config to the `IonicModule.forRoot(MyApp, {configObject})` in `app.module.ts` where it says `configObject`.
+
+13. Remove `ionicBootstrap` code from `app.component.ts`.
+
+14. Export the main app class in `app.component.ts` and then rename all uses of `MyApp` in `app.module.ts` to your main app class (or rename the export to `MyApp` in `app.component.ts`).
+
+15. Fix any imports in `app.component.ts` to use the correct path. For example, `./pages` becomes `../pages`.
+
+16. Modify `app.module.ts` to import your page specific classes. See `HomePage` for example. All pages should be included here.
+
+17. Fix any import paths in `app.module.ts`. For example, `./providers` becomes `../providers`.
+
+18. Add `main.dev.ts` and `main.prod.ts` files from [ionic2-app-base](https://github.com/driftyco/ionic2-app-base/tree/master/src/app) to `app/`.
+
+19. Move `www/index.html` to `src/index.html` and modify it to look like [ionic2-app-base](https://github.com/driftyco/ionic2-app-base/blob/master/src/index.html), make sure to keep any external scripts you have added.
+
+20. Move `www/assets` to `src/assets`.
+
+21. Move `www/img` to `src/assets/img`.
+
+22. Move any other resources you have in `www/` to `src/assets/`.
+
+23. Modify all `templateUrl`'s to be relative to the `.ts` file. For example in `app.component.ts` the url should change from `build/app.html` to `app.html` and in a page referencing `about.html` from `build/pages/about/about.html` to `about.html`.
+
+24. Update .gitignore to match [ionic2-app-base](https://github.com/driftyco/ionic2-app-base/blob/master/.gitignore).
+
+25. Delete the `typings/` folder and `typings.json` file.
+
+26. Update `tsconfig.json` to match [ionic2-app-base](https://github.com/driftyco/ionic2-app-base/blob/master/tsconfig.json).
+
+27. Modify `theme/` folder to delete the `app.core.scss` file and copy `app.variables.scss` from the [ionic2-app-base](https://github.com/driftyco/ionic2-app-base/blob/master/src/theme/variables.scss), then rename it to `variables.scss`.
+
+28. Move any variables from the mode specific files into the `app.variables` file under the mode heading.
+
+29. Fix any paths to images in your app. For example, before the path may look like `<img src="img/myImg.png">` and now it should be `<img src="assets/img/myImg.png">`.
+
+30. Change any uses of the `private` TypeScript keyword to `public`.
+
+31. Change any Ionic buttons from `<button />` to `<button ion-button />`, see [docs]() above.
+
+32. Pass colors to the `color` attribute : `<button primary />` changes to `<button color=”primary” />`.
+
+33. Add appropriate icon attributes, if the icon is on the left of the text in a button it should get `icon-left`, if the icon is on the right add `icon-right`, and if the button only has an icon in it, add the `icon-only` attribute to the button. [See New Behavior of Icons in Buttons]()
+
+
+### Bug Fixes
+
+* **action-sheet:** add icon-left to the button if an icon exists ([a731528](https://github.com/driftyco/ionic/commit/a731528))
+* **animation:** prevent possible raf null errors ([0e8ebe5](https://github.com/driftyco/ionic/commit/0e8ebe5))
+* **app:** corrected paths to theme from app.scss ([001c1c9](https://github.com/driftyco/ionic/commit/001c1c9))
+* **changelog:** specify version of forms ([82852fb](https://github.com/driftyco/ionic/commit/82852fb))
+* **checkbox:** disabled toggle should not fire events or animate ([3324e32](https://github.com/driftyco/ionic/commit/3324e32))
+* **di:** update dependency injection and default configs ([7c05d0c](https://github.com/driftyco/ionic/commit/7c05d0c))
+* **docs:** get rid of reference to [@Page](https://github.com/Page) ([6fb848c](https://github.com/driftyco/ionic/commit/6fb848c))
+* **exports:** update module exports ([6784f5e](https://github.com/driftyco/ionic/commit/6784f5e))
+* **fab:** colors in speed dial buttons ([b70614b](https://github.com/driftyco/ionic/commit/b70614b))
+* **gestures:** fixes scroll issue with hammer config ([174efc1](https://github.com/driftyco/ionic/commit/174efc1)), closes [#6897](https://github.com/driftyco/ionic/issues/6897)
+* **ion-fixed:** ion-fixed directive is not longer needed ([75d5526](https://github.com/driftyco/ionic/commit/75d5526))
+* **item:** regression in sliding item introduced by 52ada1c ([e0c2129](https://github.com/driftyco/ionic/commit/e0c2129))
+* **item:** sliding item events are zone wrapped ([47491fb](https://github.com/driftyco/ionic/commit/47491fb)), closes [#7630](https://github.com/driftyco/ionic/issues/7630)
+* **item:** sliding item with icon-only buttons ([1d3d5a1](https://github.com/driftyco/ionic/commit/1d3d5a1))
+* **menu:** open/close race condition ([8585427](https://github.com/driftyco/ionic/commit/8585427)), closes [#7629](https://github.com/driftyco/ionic/issues/7629) [#8001](https://github.com/driftyco/ionic/issues/8001)
+* gulp validate passes successfully ([b750e46](https://github.com/driftyco/ionic/commit/b750e46))
+* **nav:** move null assignment of _onWillDismiss ([35193c4](https://github.com/driftyco/ionic/commit/35193c4))
+* **nav:** setRoot() and setPages() should not animate ([7012734](https://github.com/driftyco/ionic/commit/7012734))
+* **navigation:** move onWillDismiss and onDidDismiss, add unit tests ([e26c425](https://github.com/driftyco/ionic/commit/e26c425))
+* **platform:** fire platform ready on app init ([963e835](https://github.com/driftyco/ionic/commit/963e835))
+* **reorder:** adjust reorder icon style for iOS and MD ([f3bb2dc](https://github.com/driftyco/ionic/commit/f3bb2dc))
+* **templates:** add template tabs [#8207](https://github.com/driftyco/ionic/issues/8207) ([#8208](https://github.com/driftyco/ionic/issues/8208)) ([0f6ce28](https://github.com/driftyco/ionic/commit/0f6ce28))
+* **urlSerializer:** improve findLinkByComponentData ([9d563f5](https://github.com/driftyco/ionic/commit/9d563f5))
+
+
+### Code Refactoring
+
+* **button:** add ion-button attribute and icon attributes to style buttons ([938864e](https://github.com/driftyco/ionic/commit/938864e)), closes [#7466](https://github.com/driftyco/ionic/issues/7466)
+* **colors:** color should be added as an input instead of directly adding the color to the component ([55a0257](https://github.com/driftyco/ionic/commit/55a0257)), closes [#7087](https://github.com/driftyco/ionic/issues/7087) [#7401](https://github.com/driftyco/ionic/issues/7401) [#7523](https://github.com/driftyco/ionic/issues/7523)
+* **select:** rename alertOptions to selectOptions, add ability to pass them for action-sheet ([b8285b7](https://github.com/driftyco/ionic/commit/b8285b7)), closes [#7764](https://github.com/driftyco/ionic/issues/7764)
+
+
+### Features
+
+* **action-sheet:** add ability to pass multiple classes to cssClass ([68ab261](https://github.com/driftyco/ionic/commit/68ab261))
+* **chips:** added Chip component ([421f637](https://github.com/driftyco/ionic/commit/421f637))
+* **chips:** finished Component ([0dece72](https://github.com/driftyco/ionic/commit/0dece72))
+* **fab:** update floating action buttons ([490a06d](https://github.com/driftyco/ionic/commit/490a06d))
+* **itemReorder:** animate reorder button ([1f78487](https://github.com/driftyco/ionic/commit/1f78487))
+* **loading:** add ability to pass multiple classes to cssClass ([466dea3](https://github.com/driftyco/ionic/commit/466dea3))
+* **loading:** add setContent function ([c750847](https://github.com/driftyco/ionic/commit/c750847))
+* add polyfill task ([ce78194](https://github.com/driftyco/ionic/commit/ce78194))
+* **nav:** component url navigation ([f477aa2](https://github.com/driftyco/ionic/commit/f477aa2))
+* **nav:** set default stack history on app init ([ca8cc0a](https://github.com/driftyco/ionic/commit/ca8cc0a))
+* **polyfills:** split up code and source polyfill task ([#8130](https://github.com/driftyco/ionic/issues/8130)) ([bcec66c](https://github.com/driftyco/ionic/commit/bcec66c))
+* **popover:** add ability to pass multiple classes to cssClass ([a685cdc](https://github.com/driftyco/ionic/commit/a685cdc))
+* **toast:** add ability to pass multiple classes to cssClass ([79e25a3](https://github.com/driftyco/ionic/commit/79e25a3))
+
+
+### Performance Improvements
+
+* **item:** apply will-change only when list is active ([4bcd815](https://github.com/driftyco/ionic/commit/4bcd815))
+* **reorder:** reorder icon is display: none by default ([26441ec](https://github.com/driftyco/ionic/commit/26441ec))
+* **ripple:** md ripple effect update to not affect layout ([14a3ea2](https://github.com/driftyco/ionic/commit/14a3ea2))
+
+<a name="2.0.0-beta.11"></a>
+# [2.0.0-beta.11](https://github.com/driftyco/ionic/compare/v2.0.0-beta.10...v2.0.0-beta.11) (2016-08-05)
+
+### BREAKING CHANGES
+
+- Angular2 has been updated to [RC4](https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc4-2016-06-30).
+- ViewController’s `onDismiss` has been renamed to `onDidDismiss`
+- Forms have been upgraded to `@angular/forms` - [Angular2 Forms Changes](https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub).
+- [Overlay components](#overlays) should now be created with their injected provider.
+- The [Select Options](#select--option-7334) `checked` attribute has been renamed to `selected`.
+- [Tab’s input and config variables](#tab-inputconfig-7143) have been renamed.
+- [Material Design tabs](#material-design-tabs-7455) have been updated to resemble Material Design’s bottom navigation spec: https://material.google.com/components/bottom-navigation.html
+- [Input highlight](#input-highlight-6449) was added as an option for `ios` and `wp` mode, but defaults to false.
+- Please review the [Steps to Upgrade](#steps-to-upgrade-to-beta-11) below.
+
+#### Overlays
+
+- Overlay components, such as Alert or Modals, should now be created using its injected provider.
+- Overlays now have the `present()` method on the overlay’s instance, rather than using `nav.present(overlayInstance)`.
+- All overlays now present on top of all app content, to include menus.
+- Below is an example of the change to `Alert`, but the pattern is the same for all overlays: ActionSheet, Loading, Modal, Picker, Popover, Toast
+
+  WAS:
+
+  ```
+  import { NavController, Alert } from ‘ionic-angular’;
+
+  constructor(public nav: NavController) {
+  }
+
+  doAlert() {
+    let alert = Alert.create({
+       title: 'Alert',
+    });
+    this.nav.present(alert);
+  }
+  ```
+
+  NOW:
+
+  ```
+  import { AlertController } from ‘ionic-angular’;
+
+  constructor(public alertCtrl: AlertController) {
+  }
+
+  doAlert() {
+    let alert = this.alertCtrl.create({
+      title: 'Alert'
+    });
+    alert.present();
+  }
+  ```
+
+
+#### Select / Option [#7334](https://github.com/driftyco/ionic/issues/7334)
+
+The Option component’s `checked` attribute has been renamed to `selected` in order to make an option selected. This follows the MDN spec for a select option: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
+
+If a `ngModel` is added to the Select component the value of the `ngModel` will take precedence over the `selected` attribute.
+
+See the [Select](http://ionicframework.com/docs/v2/api/components/select/Select/) and [Option](http://ionicframework.com/docs/v2/api/components/option/Option/) documentation for usage examples.
+
+#### Tab Input/Config [#7143](https://github.com/driftyco/ionic/issues/7143)
+
+Tab input/config options have been renamed. The following options were
+renamed:
+
+- `tabbarHighlight` -> `tabsHighlight`
+- `tabbarLayout` -> `tabsLayout`
+- `tabSubPages` -> `tabsHideOnSubPages`
+- `tabbarPlacement` -> `tabsPlacement`
+
+The previous names have been deprecated. They will still work in the
+current release but will be removed in the future so please update to
+the new names.
+
+#### Material Design Tabs [#7455](https://github.com/driftyco/ionic/issues/7455)
+
+Material Design mode defaults have changed to the following:
+
+```
+tabsHighlight: false,
+tabsPlacement: 'bottom',
+tabsHideOnSubPages: false
+```
+
+`tabsHighlight` can now be passed as an attribute on the `ion-tabs` element, this allows for tabs to be added in multiple places inside of an app and enable the highlight on some of them.
+
+Styling of the Material Design tabs reflects the spec for bottom navigation: https://material.google.com/components/bottom-navigation.html
+
+To get the old style of tabs, override the config in your bootstrap, for example:
+
+```
+ionicBootstrap(ConferenceApp, [ConferenceData, UserData], {
+  platforms: {
+    android: {
+      tabsPlacement: 'top',
+      tabsHideOnSubPages: true,
+      tabsHighlight: true
+    }
+  }
+});
+```
+
+And optionally override any of the Sass variables for `md` mode in `theme/app.md.scss`:
+
+```
+$tabs-md-tab-text-capitalization: uppercase;
+$tabs-md-tab-font-weight: 500;
+$tabs-md-tab-text-transform: scale(1);
+```
+
+For a searchable list of all of the Sass variables, see the theming documentation: http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/
+
+
+#### Input Highlight [#6449](https://github.com/driftyco/ionic/issues/6449)
+
+Fixed typos in the input highlight variables:
+- `$text-input-md-hightlight-color-valid` -> `$text-input-md-highlight-color-valid`
+- `$text-input-wp-hightlight-color-valid` -> `$text-input-wp-highlight-color-valid`
+
+Modified variables to turn on/off the highlight:
+
+ios (defaults to false for all):
+
+```
+$text-input-ios-show-focus-highlight: false !default;
+$text-input-ios-show-valid-highlight: $text-input-ios-show-focus-highlight !default;
+$text-input-ios-show-invalid-highlight: $text-input-ios-show-focus-highlight !default;
+```
+
+md (defaults to true for all):
+
+```
+$text-input-md-show-focus-highlight: true !default;
+$text-input-md-show-valid-highlight: $text-input-md-show-focus-highlight !default;
+$text-input-md-show-invalid-highlight: $text-input-md-show-focus-highlight !default;
+```
+
+wp (defaults to true for all):
+
+```
+$text-input-wp-show-focus-highlight: true !default;
+$text-input-wp-show-valid-highlight: $text-input-wp-show-focus-highlight !default;
+$text-input-wp-show-invalid-highlight: $text-input-wp-show-focus-highlight !default;
+```
+
+#### Steps to Upgrade to Beta 11
+
+1. Run the following command in a terminal to update the npm dependencies:
+
+  ```
+  npm install --save --save-exact ionic-angular@2.0.0-beta.11 @angular/common@2.0.0-rc.4 @angular/compiler@2.0.0-rc.4 @angular/core@2.0.0-rc.4 @angular/http@2.0.0-rc.4 @angular/platform-browser@2.0.0-rc.4 @angular/platform-browser-dynamic@2.0.0-rc.4 @angular/forms@0.2.0 rxjs@5.0.0-beta.6 zone.js@0.6.12
+  ```
+
+2. Update all Overlay components to be presented by their controller instead of `NavController`. For example, to update the popover component, the following code:
+
+  ```
+  constructor(private nav: NavController) {}
+
+  presentPopover(event) {
+    let popover = Popover.create(PopoverPage);
+    this.nav.present(popover, { ev: event });
+  }
+  ```
+
+  becomes:
+
+  ```
+  constructor(private popoverCtrl: PopoverController) {}
+
+  presentPopover(event) {
+    let popover = this.popoverCtrl.create(PopoverPage);
+    popover.present({ ev: event });
+  }
+  ```
+
+3. Update any uses of `ViewController.onDismiss` to `ViewController.onDidDismiss`. The following code on dismiss of a modal:
+
+  ```
+  modal.onDismiss(() => {
+
+  });
+  ```
+
+  becomes:
+
+  ```
+  modal.onDidDismiss(() => {
+
+  });
+  ```
+
+4. Update any uses of `checked` on an `<ion-option>` to use `selected`.
+
+5. If you are using any of the tab config variables, update them to reflect the new names [above](#tab-inputconfig-7143).
+
+6. If you are using any of the Sass Variables to override [tabs](#material-design-tabs-7455) or [input highlights](#input-highlight-6449), update them to reflect the new names above.
+
+7. Please see the [Ionic Conference App](https://github.com/driftyco/ionic-conference-app) for an example of upgrading to Beta 11.
+
+
+### Bug Fixes
+
+* **activator:** do not activate elements while scrolling ([845a516](https://github.com/driftyco/ionic/commit/845a516)), closes [#7141](https://github.com/driftyco/ionic/issues/7141)
+* **animation:** ele as string selector ([9fa31a1](https://github.com/driftyco/ionic/commit/9fa31a1))
+* **animation:** fix easing timing function ([0cb093e](https://github.com/driftyco/ionic/commit/0cb093e)), closes [#7130](https://github.com/driftyco/ionic/issues/7130)
+* **app:** add status bar padding when tab subpages are hidden ([d01ee4b](https://github.com/driftyco/ionic/commit/d01ee4b)), closes [#7203](https://github.com/driftyco/ionic/issues/7203)
+* **backdrop:** flicker in UIWebView ([44ab527](https://github.com/driftyco/ionic/commit/44ab527))
+* **backdrop:** use raf when adding/removing disable-scroll css ([941cb1d](https://github.com/driftyco/ionic/commit/941cb1d))
+* **bootstrap:** return promise and resolve ionicBootstrap ([aebdf2f](https://github.com/driftyco/ionic/commit/aebdf2f)), closes [#7145](https://github.com/driftyco/ionic/issues/7145)
+* **bootstrap:** tapclick is injected, probably ([7358072](https://github.com/driftyco/ionic/commit/7358072))
+* **button:** apply css for buttons w/ ngIf ([816a648](https://github.com/driftyco/ionic/commit/816a648)), closes [#5927](https://github.com/driftyco/ionic/issues/5927)
+* **button:** outline buttons do not have hairline borders in iOS ([4e88f89](https://github.com/driftyco/ionic/commit/4e88f89))
+* **datetime:** format seconds token ([4fff262](https://github.com/driftyco/ionic/commit/4fff262)), closes [#6951](https://github.com/driftyco/ionic/issues/6951)
+* **datetime-util:** fix convertDataToISO to handle negative timezone offsets ([ba53a23](https://github.com/driftyco/ionic/commit/ba53a23))
+* **generator:** change nav to navCtrl ([b19547c](https://github.com/driftyco/ionic/commit/b19547c))
+* **gestures:** detecting swipe angle correctly + sliding item logic fix ([d230cb4](https://github.com/driftyco/ionic/commit/d230cb4))
+* **input:** add input highlight for ios, fix the highlight size ([11a24b9](https://github.com/driftyco/ionic/commit/11a24b9)), closes [#6449](https://github.com/driftyco/ionic/issues/6449)
+* **item:** sliding item is closed when tapped ([7aa559a](https://github.com/driftyco/ionic/commit/7aa559a)), closes [#7094](https://github.com/driftyco/ionic/issues/7094)
+* **loading:** clear timeout if dismissed before timeout fires ([5bbe31a](https://github.com/driftyco/ionic/commit/5bbe31a))
+* **loading:** fix loading overlay during app init ([b615c60](https://github.com/driftyco/ionic/commit/b615c60)), closes [#6209](https://github.com/driftyco/ionic/issues/6209)
+* **menu:** add statusbarPadding to the header and content in a menu ([a468fde](https://github.com/driftyco/ionic/commit/a468fde)), closes [#7385](https://github.com/driftyco/ionic/issues/7385)
+* **menu:** fix content going under header ([3cd31c3](https://github.com/driftyco/ionic/commit/3cd31c3)), closes [#7084](https://github.com/driftyco/ionic/issues/7084)
+* **menu:** getBackdropElement ([cac1d4f](https://github.com/driftyco/ionic/commit/cac1d4f))
+* **menu:** only one menu can be opened at a time ([cac378f](https://github.com/driftyco/ionic/commit/cac378f)), closes [#6826](https://github.com/driftyco/ionic/issues/6826)
+* **menu:** swipe menu is triggered when the swipe |angle| < 40º ([32a70a6](https://github.com/driftyco/ionic/commit/32a70a6))
+* **nav:** fire lifecycle events from app root portal ([a4e393b](https://github.com/driftyco/ionic/commit/a4e393b))
+* **nav:** fix menuCtrl reference in swipe back ([55a5e83](https://github.com/driftyco/ionic/commit/55a5e83))
+* **nav:** register child nav when created from modal ([61a8625](https://github.com/driftyco/ionic/commit/61a8625))
+* **picker:** fix iOS 8 picker display ([86fd8a4](https://github.com/driftyco/ionic/commit/86fd8a4)), closes [#7319](https://github.com/driftyco/ionic/issues/7319)
+* **popover:** remove min-height from ios, add sass variables ([55bc32d](https://github.com/driftyco/ionic/commit/55bc32d)), closes [#7215](https://github.com/driftyco/ionic/issues/7215)
+* **range:** add mouse listeners to document ([267ced6](https://github.com/driftyco/ionic/commit/267ced6))
+* **range:** align the label in an item range to the center ([d675d39](https://github.com/driftyco/ionic/commit/d675d39)), closes [#7046](https://github.com/driftyco/ionic/issues/7046)
+* **range:** ion-label stacked with ion-range ([5a8fe82](https://github.com/driftyco/ionic/commit/5a8fe82)), closes [#7046](https://github.com/driftyco/ionic/issues/7046)
+* **range:** set ticks to an empty array to prevent errors ([7a2ad99](https://github.com/driftyco/ionic/commit/7a2ad99))
+* **reorder:** better style ([f289ac6](https://github.com/driftyco/ionic/commit/f289ac6))
+* **reorder:** canceled reorder is animated smoothly back ([8483a43](https://github.com/driftyco/ionic/commit/8483a43))
+* **reorder:** non ion-item elements can be reordered ([ea9dd02](https://github.com/driftyco/ionic/commit/ea9dd02)), closes [#7339](https://github.com/driftyco/ionic/issues/7339)
+* **reorder:** reorder can be used with any element ([d993a1b](https://github.com/driftyco/ionic/commit/d993a1b))
+* **scroll:** fix scrolling after switching tabs ([e4bbcc6](https://github.com/driftyco/ionic/commit/e4bbcc6)), closes [#7154](https://github.com/driftyco/ionic/issues/7154)
+* **select:** add the cssClass passed by the user to the alert for a select ([81ddd7f](https://github.com/driftyco/ionic/commit/81ddd7f)), closes [#6835](https://github.com/driftyco/ionic/issues/6835)
+* **slides:** delay loading slides until view ready ([580b8d5](https://github.com/driftyco/ionic/commit/580b8d5)), closes [#7089](https://github.com/driftyco/ionic/issues/7089)
+* **sliding:** much better UX + performance ([d6f62bc](https://github.com/driftyco/ionic/commit/d6f62bc)), closes [#6913](https://github.com/driftyco/ionic/issues/6913) [#6958](https://github.com/driftyco/ionic/issues/6958)
+* **tabs:** add sass variable for inactive opacity and pass it to the colors loop ([99efa36](https://github.com/driftyco/ionic/commit/99efa36))
+* **tabs:** center tabbar content ([997d54e](https://github.com/driftyco/ionic/commit/997d54e))
+* **tabs:** fix preloadTabs null element reference ([2d19308](https://github.com/driftyco/ionic/commit/2d19308)), closes [#7109](https://github.com/driftyco/ionic/issues/7109)
+* **tabs:** make the text color opaque instead of the entire button ([dd969a2](https://github.com/driftyco/ionic/commit/dd969a2)), closes [#6638](https://github.com/driftyco/ionic/issues/6638)
+* **util:** UIEventManager should handle touchcancel event ([b805602](https://github.com/driftyco/ionic/commit/b805602))
+
+### Features
+
+* **alert:** allow smooth overflow scrolling ([5542a93](https://github.com/driftyco/ionic/commit/5542a93))
+* **content:** add a resize function to recalculate the content size ([1fe1c1e](https://github.com/driftyco/ionic/commit/1fe1c1e))
+* **footer:** apply shadow on MD footer and tabbar bottom ([686c262](https://github.com/driftyco/ionic/commit/686c262))
+* **gesture:** Introducing new gesture controller ([9f19023](https://github.com/driftyco/ionic/commit/9f19023))
+* **gesture-controller:** disable/enable scrolling ([72c24bc](https://github.com/driftyco/ionic/commit/72c24bc))
+* **header:** apply shadow on MD headers ([6fa2faf](https://github.com/driftyco/ionic/commit/6fa2faf))
+* **ion-content:** iOS only scroll bounce ([5c80445](https://github.com/driftyco/ionic/commit/5c80445))
+* **select:** add disabled status in select options ([76619cf](https://github.com/driftyco/ionic/commit/76619cf))
+* **tabs:** apply shadow on MD tabbar top ([1f4b3e2](https://github.com/driftyco/ionic/commit/1f4b3e2))
+* **tabs:** add the transition for material design tabs ([eea7e6b](https://github.com/driftyco/ionic/commit/eea7e6b))
+* **toolbar:** add attributes to hide all borders and box shadows ([88b637b](https://github.com/driftyco/ionic/commit/88b637b)), closes [#7237](https://github.com/driftyco/ionic/issues/7237)
+* **viewcontroller:** add onWillDismiss callback ([ec99bfd](https://github.com/driftyco/ionic/commit/ec99bfd)), closes [#6702](https://github.com/driftyco/ionic/issues/6702)
+
+### Performance Improvements
+
+* **animation:** using will-change when using progressStep() ([267aa32](https://github.com/driftyco/ionic/commit/267aa32))
+* **menu:** several improvements ([86c5aaf](https://github.com/driftyco/ionic/commit/86c5aaf))
+
+
 <a name="2.0.0-beta.10"></a>
 # [2.0.0-beta.10](https://github.com/driftyco/ionic/compare/v2.0.0-beta.9...v2.0.0-beta.10) (2016-06-27)

--- a/GUIDE.md
+++ b/GUIDE.md
@@ -1,104 +0,0 @@
-# Ionic
-
-Ionic makes it easy for web developers to best-in-class build mobile apps across major platforms, like iOS
-and Android.
-
-Since the initial release of Ionic in November 2013, 700,000 apps have been created with the Ionic SDK,
-and many have been featured as top apps in the Apple App Store, Google Play Store, and Amazon App Store.
-
-Ionic is a collection of CSS and Javascript components based on Angular 2. The core philosophy behind
-Ionic is that a web developer can use the standard HTML5/CSS/Javascript stack they already know and love,
-but get real mobile components underneath that adapt automatically to the device and platform they
-run on.
-
-## New to Ionic?
-
-If Ionic 2 is your first exposure to Ionic, jump right in with the [Getting Started]() guide. Otherwise,
-read below for some design philosophy changes from v1.
-
-## New Concepts in Ionic 2
-
-Ionic 2 brings even more parity to native SDKs like iOS and Android for the web stack.
-
-With that in mind, some core components (like routing) work differently in v2 than v1.
-
-### Navigation
-
-In Ionic 1, we used UI Router with URL routing heavily to define navigation in your app.
-
-The overwhelming feedback from Ionic 1 developers is that the routing and navigation
-system was too difficult to use in practice. It was challenging to correctly map
-URLs to views, and the navigation system didn't give the developer enough fine-grained control.
-
-With v2, we've taken a more native-friendly navigation approach with a simpler `push/pop` system.
-
-For example, in v1 we'd create a `ContactDetail` page like this:
-
-```javascript
-$stateProvider
-  .state('contact', {
-    url: "/contact/:contactId",
-    templateUrl: "templates/contact.html",
-    controller: 'ContactCtrl'
-  });
-```
-
-Then, to navigate to this, you'd do `<a ui-sref="contact({contact: contact})">{{contact.name}}</a>`
-
-We'd also need to make sure we wired up the current `<ion-nav-view name>` which was considerably more
-challenging when using nested navigation.
-
-In v2, this works a bit differently. Instead of navigating through URLs and routing (which is still
-  possible as we will see a bit later), we push and pop views onto the stack:
-
-`<ion-item (^click)="showContact(contact)">{{contact.name}}</ion-item>``
-
-```javascript
-class ContactsPage {
-  showContact(contact) {
-    this.nav.push(ContactDetail, {
-      contact: contact
-    });
-  }
-}
-```
-
-There are also shortcut directives we can use for links much like `ui-sref`, such as
-`nav-push` and `nav-pop` which can be used like this:
-
-```html
-<button [nav-push]="myContactComponent" [push-data]="contact">See contact</button>
-```
-
-```html
-<button nav-pop>Go back</button>
-```
-
-The really nice thing about this is you can infinitely navigate now (for example,
-  you can keep pushing new `ContactDetail` pages onto the stack), and
-control things like animation and the history stack the user has to navigate through.
-
-You can also navigate inside of practically any container. For example, a modal window that slides up
-can have its own navigation, and two split views can navigate independently, something
-that was not possible before.
-
-It also makes it incredibly easy to navigate to the same page in completely different
-contexts. For example, if you were building something similar to Apple's App Store
-app where there are multiple tabs at the bottom and each tab navigates independently,
-you could navigate to an `AppDetail` page from any tab, which is exactly how the App Store app works.
-
-For example, here's how the Minecraft `AppDetail` page looks in different tabs:
-
-<img src="http://ionic-io-assets.s3.amazonaws.com/images/mc1.PNG" width="300" style="width: 300px">
-<img src="http://ionic-io-assets.s3.amazonaws.com/images/mc2.PNG" width="300" style="width: 300px">
-
-Notice the page is exactly the same, but the way the user navigated to it is different.
-
-This hits on a core change in Ionic 2: the history state of the app is now your
-responsibility as a developer. It's up to you to make sure navigation provides
-a good UX, but you have the freedom to navigate as you see fit.
-
-### Routing
-
-In Ionic, routing is used more for breadcrumbs and loading state than it is for active
-navigation.
--- a/README.md
+++ b/README.md
@@ -2,9 +2,9 @@

 # Ionic 2: Beta

-Ionic 2 is the next generation of [Ionic](http://ionicframework.com/), the open-source mobile app development SDK that makes it easy to build top quality mobile apps with web technologies.
+Ionic 2 is the next generation of [Ionic](http://ionicframework.com/), the open-source mobile app development SDK that makes it easy to build top quality native and progressive web apps with web technologies.

-Ionic 2 is based on the new [2.x version of AngularJS](https://angular.io/), and comes with many significant performance, usability, and feature improvements.
+Ionic 2 is based on the new [2.x version of Angular](https://angular.io/), and comes with many significant performance, usability, and feature improvements.

 See the [Building apps with Ionic 2](http://adamdbradley.github.io/building-with-ionic2) slides for a quick overview of Ionic 2.

--- a/circle.yml
+++ b/circle.yml
@@ -2,17 +2,19 @@ general:
  branches:
    ignore:
      - ins_n_outs
-dependencies:
-  pre:
-   - ./scripts/docs/prepare.sh
-  cache_directories:
-    - "~/ionic-site" # cache ionic-site
 machine:
  node:
    version: 4.1.0
+  post:
+    - npm install -g npm@3.x.x
+dependencies:
+  pre:
+    - ./scripts/docs/prepare.sh
+  cache_directories:
+    - "~/ionic-site" # cache ionic-site
 test:
  override:
-    - echo "Automatically marking tests as passing for now"
+    - gulp lint.ts
 deployment:
 tasks:
   branch: "master"
--- a/demos/alert/main.html
+++ b/demos/alert/main.html
@@ -1,18 +0,0 @@
-<ion-header>
-
-  <ion-navbar>
-    <ion-title>Alert</ion-title>
-  </ion-navbar>
-
-</ion-header>
-
-
-<ion-content padding>
-
-  <button block (click)="doAlert()">Basic Alert</button>
-  <button light block (click)="doConfirm()">Confirm Alert</button>
-  <button secondary block (click)="doPrompt()">Prompt Alert</button>
-  <button danger block (click)="doRadio()">Radio Alert</button>
-  <button dark block (click)="doCheckbox()">Checkbox Alert</button>
-
-</ion-content>
--- a/demos/app.ios.scss
+++ b/demos/app.ios.scss
@@ -1 +0,0 @@
-@import "../src/ionic.ios";
--- a/demos/app.md.scss
+++ b/demos/app.md.scss
@@ -1 +0,0 @@
-@import "../src/ionic.md";
--- a/demos/app.variables.local.scss
+++ b/demos/app.variables.local.scss
@@ -1,2 +0,0 @@
-$font-path: "../fonts";
-$roboto-font-path: "../fonts";
--- a/demos/app.variables.production.scss
+++ b/demos/app.variables.production.scss
@@ -1,2 +0,0 @@
-$font-path: "/fonts";
-$roboto-font-path: "/fonts";
--- a/demos/app.variables.scss
+++ b/demos/app.variables.scss
@@ -1,31 +0,0 @@
-// http://ionicframework.com/docs/v2/theming/
-
-
-// App Shared Variables
-// --------------------------------------------------
-// To customize the look and feel of this app, you can override
-// the Sass variables found in Ionic's source scss files. Setting
-// variables before Ionic's Sass will use these variables rather than
-// Ionic's default Sass variable values. App Shared Sass imports belong
-// in the app.core.scss file and not this file. Sass variables specific
-// to the mode belong in either the app.ios.scss or app.md.scss files.
-
-
-// App Shared Color Variables
-// --------------------------------------------------
-// It's highly recommended to change the default colors
-// to match your app's branding. Ionic uses a Sass map of
-// colors so you can add, rename and remove colors as needed.
-// The "primary" color is the only required color in the map.
-// Both iOS and MD colors can be further customized if colors
-// are different per mode.
-
-$colors: (
-  primary:    #387ef5,
-  secondary:  #32db64,
-  danger:     #f53d3d,
-  light:      #f4f4f4,
-  dark:       #222,
-  vibrant:    rebeccapurple,
-  bright:     #FFC125
-);
--- a/demos/app.wp.scss
+++ b/demos/app.wp.scss
@@ -1 +0,0 @@
-@import "../src/ionic.wp";
--- a/demos/button/main.html
+++ b/demos/button/main.html
@@ -1,68 +0,0 @@
-<ion-header>
-
-  <ion-navbar>
-    <ion-title>Button</ion-title>
-  </ion-navbar>
-
-</ion-header>
-
-
-<ion-content text-center>
-
-  <h4>Colors</h4>
-
-  <button>Default</button>
-
-  <button secondary>Secondary</button>
-
-  <button danger>Danger</button>
-
-  <button light>Light</button>
-
-  <button dark>Dark</button>
-
-  <h4>Shapes</h4>
-
-  <button full>Full Button</button>
-
-  <button block>Block Button</button>
-
-  <button round>Round Button</button>
-
-  <button fab style="position: relative;">FAB</button>
-
-  <h4>Outlines</h4>
-
-  <button secondary full outline>Outline + Full</button>
-
-  <button secondary block outline>Outline + Block</button>
-
-  <button secondary round outline>Outline + Round</button>
-
-  <button secondary fab outline style="position: relative;">FAB</button>
-
-  <h4>Icons</h4>
-
-  <button dark>
-    <ion-icon name="star"></ion-icon>
-    Left Icon
-  </button>
-
-  <button dark>
-    Right Icon
-    <ion-icon name="star"></ion-icon>
-  </button>
-
-  <button dark>
-    <ion-icon name="star"></ion-icon>
-  </button>
-
-  <h4>Sizes</h4>
-
-  <button light large>Large</button>
-
-  <button light>Default</button>
-
-  <button light small>Small</button>
-
-</ion-content>
--- a/demos/item/index.ts
+++ b/demos/item/index.ts
@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);
--- a/demos/label/index.ts
+++ b/demos/label/index.ts
@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);
--- a/demos/local-storage/index.ts
+++ b/demos/local-storage/index.ts
@@ -1,91 +0,0 @@
-import { Component, Injectable, Pipe, PipeTransform } from '@angular/core';
-
-import { Config, IonicApp, ionicBootstrap, LocalStorage, Platform, Storage } from 'ionic-angular';
-
-
-@Pipe({
-  name: 'cleanLocalData'
-})
-@Injectable()
-class CleanLocalDataPipe implements PipeTransform {
-  validKeys: string[];
-  output: any;
-  data: any;
-
-  transform(obj:any) : any {
-    this.validKeys = ['username', 'name', 'email', 'address'];
-    this.output = {};
-    this.data = JSON.parse(obj);
-    for (var i = 0; i < Object.keys(this.data).length; i++) {
-      if (this.validKeys.indexOf( Object.keys(this.data)[i] ) > -1) {
-        this.output[Object.keys(this.data)[i]] = this.data[Object.keys(this.data)[i]];
-      }
-    }
-    return JSON.stringify(this.output, null, 2);
-  }
-}
-
-
-@Component({
-  templateUrl: 'main.html',
-  pipes: [CleanLocalDataPipe]
-})
-class ApiDemoPage {
-  local: Storage;
-  localStorageDemo: string;
-  myItem: any;
-  keys = ['username', 'name', 'email', 'address'];
-  values = ['admin', 'Administrator', 'admin@administrator.com', '123 Admin St'];
-  addedKeys = [];
-  delKey: any;
-
-  constructor() {
-    this.local = new Storage(LocalStorage);
-    this.localStorageDemo = '{}';
-    window.localStorage.clear();
-
-    this.myItem = {
-      key: 'username',
-      value: 'admin'
-    };
-  }
-
-  set() {
-    if (this.myItem.key) {
-      let added = false;
-
-      for (let i = 0; i < this.addedKeys.length; i++) {
-        if (this.addedKeys[i] == this.myItem.key) added = true;
-      }
-
-      if (added == false) {
-        console.log("Adding key", this.myItem.key);
-        this.addedKeys.push(this.myItem.key);
-        this.delKey = this.myItem.key;
-        this.local.set(this.myItem.key, this.myItem.value );
-        this.localStorageDemo = JSON.stringify(window.localStorage, null, 2);
-      }
-    }
-  }
-
-  remove() {
-    this.local.remove(this.delKey);
-    this.localStorageDemo = JSON.stringify(window.localStorage, null, 2);
-
-    let index = this.addedKeys.indexOf(this.delKey);
-    if (index > -1) {
-      this.addedKeys.splice(index, 1);
-    }
-  }
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>',
-  pipes: [CleanLocalDataPipe]
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);
--- a/demos/local-storage/main.html
+++ b/demos/local-storage/main.html
@@ -1,68 +0,0 @@
-<ion-header>
-
-  <ion-navbar>
-    <ion-title>Local Storage</ion-title>
-  </ion-navbar>
-
-</ion-header>
-
-
-<ion-content class="local-storage-demo outer-content">
-
-  <ion-list no-margin>
-    <ion-list-header>Add to Local Storage</ion-list-header>
-
-    <ion-item>
-      <ion-label>Key</ion-label>
-      <ion-select [(ngModel)]="myItem.key">
-        <ion-option *ngFor="let key of keys" [value]="key">
-          {{ key }}
-        </ion-option>
-      </ion-select>
-    </ion-item>
-
-    <ion-item>
-      <ion-label>Value</ion-label>
-      <ion-select [(ngModel)]="myItem.value">
-        <ion-option *ngFor="let value of values" [value]="value">
-          {{ value }}
-        </ion-option>
-      </ion-select>
-    </ion-item>
-
-  </ion-list>
-
-  <div padding>
-    <button block secondary (click)="set()">
-      <ion-icon name="add"></ion-icon>
-      Add
-    </button>
-  </div>
-
-  <ion-list no-margin>
-    <ion-list-header>Delete from Local Storage</ion-list-header>
-
-    <ion-item>
-      <ion-label>Key</ion-label>
-      <ion-select [(ngModel)]="delKey">
-        <ion-option selected>Select a Key</ion-option>
-        <ion-option *ngFor="let key of addedKeys" [value]="key">
-          {{ key }}
-        </ion-option>
-      </ion-select>
-    </ion-item>
-  </ion-list>
-
-  <div padding>
-    <button block danger (click)="remove()">
-      <ion-icon name="remove"></ion-icon>
-      Delete
-    </button>
-  </div>
-
-  <div padding>
-    <h5>Local Storage:</h5>
-    <pre>local: {{ localStorageDemo | cleanLocalData }}</pre>
-  </div>
-
-</ion-content>
--- a/demos/menu/main.html
+++ b/demos/menu/main.html
@@ -1,27 +0,0 @@
-<ion-header>
-
-  <ion-navbar>
-    <button [menuToggle]="activeMenu">
-      <ion-icon name="menu"></ion-icon>
-    </button>
-    <ion-title>
-      Menu
-    </ion-title>
-  </ion-navbar>
-
-</ion-header>
-
-
-<ion-content padding>
-
-  <h4>Active Menu: <b primary>{{ (activeMenu == 'menu1') ? 'Menu 1' : 'Menu 2' }}</b></h4>
-
-  <p>This page has two menus with different id's, but only one is active at a time.</p>
-
-  <button block secondary (click)="menu1Active()">Make Menu 1 Active</button>
-
-  <button block danger (click)="menu2Active()">Make Menu 2 Active</button>
-
-  <button block [menuToggle]="activeMenu">Toggle Menu</button>
-
-</ion-content>
--- a/demos/modal/index.ts
+++ b/demos/modal/index.ts
@@ -1,83 +0,0 @@
-import { Component } from '@angular/core';
-
-import { Animation, ionicBootstrap, ModalController, NavController, NavParams, ViewController } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-export class ModalFirstPage {
-  myParam = '';
-
-  constructor(public modalCtrl: ModalController) {}
-
-  openBasicModal() {
-    let myModal = this.modalCtrl.create(ModalContentPage);
-    myModal.present();
-  }
-  openModalWithParams() {
-    let myModal = this.modalCtrl.create(ModalContentPage, { 'myParam': this.myParam });
-    myModal.present();
-  }
-  openCustomAnimationModal() {
-    let myModal = this.modalCtrl.create(ModalContentPage, {
-      animation: 'my-fade-in',
-    });
-    myModal.present();
-  }
-}
-
-
-@Component({
-  templateUrl: "modal-content.html"
-})
-export class ModalContentPage {
-  myParam: string;
-
-  constructor(
-    public viewCtrl: ViewController,
-    params: NavParams
-  ) {
-    this.myParam = params.get('myParam');
-  }
-
-  dismiss() {
-    this.viewCtrl.dismiss();
-  }
-}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ModalFirstPage;
-}
-
-ionicBootstrap(ApiDemoApp);
-
-
-class FadeIn extends Animation {
-  constructor(enteringView: ViewController, leavingView: ViewController) {
-    super(enteringView.pageRef());
-    this
-      .easing('ease')
-      .duration(1000)
-      .fromTo('translateY', '0%', '0%')
-      .fromTo('opacity', 0, 1)
-      .before.addClass('show-page');
-  }
-}
-Animation.register('my-fade-in', FadeIn);
-
-class FadeOut extends Animation {
-  constructor(enteringView: ViewController, leavingView: ViewController) {
-    super(leavingView.pageRef());
-    this
-      .easing('ease')
-      .duration(500)
-      .fromTo('opacity', 1, 0)
-      .before.addClass('show-page');
-  }
-}
-Animation.register('my-fade-out', FadeOut);
--- a/demos/navigation/page.html
+++ b/demos/navigation/page.html
@@ -1,15 +0,0 @@
-<ion-header>
-
-  <ion-navbar>
-    <ion-title>Page {{pageNum}}</ion-title>
-  </ion-navbar>
-
-</ion-header>
-
-
-<ion-content padding>
-
-  <button block (click)="push()">Push Another Page</button>
-  <button secondary block (click)="pop()">Pop This Page</button>
-
-</ion-content>
--- a/demos/output.ios.scss
+++ b/demos/output.ios.scss
@@ -1,36 +0,0 @@
-$font-path: "../fonts";
-$roboto-font-path: "../fonts";
-
-// http://ionicframework.com/docs/v2/theming/
-
-
-// App Shared Variables
-// --------------------------------------------------
-// To customize the look and feel of this app, you can override
-// the Sass variables found in Ionic's source scss files. Setting
-// variables before Ionic's Sass will use these variables rather than
-// Ionic's default Sass variable values. App Shared Sass imports belong
-// in the app.core.scss file and not this file. Sass variables specific
-// to the mode belong in either the app.ios.scss or app.md.scss files.
-
-
-// App Shared Color Variables
-// --------------------------------------------------
-// It's highly recommended to change the default colors
-// to match your app's branding. Ionic uses a Sass map of
-// colors so you can add, rename and remove colors as needed.
-// The "primary" color is the only required color in the map.
-// Both iOS and MD colors can be further customized if colors
-// are different per mode.
-
-$colors: (
-  primary:    #387ef5,
-  secondary:  #32db64,
-  danger:     #f53d3d,
-  light:      #f4f4f4,
-  dark:       #222,
-  vibrant:    rebeccapurple,
-  bright:     #FFC125
-);
-
-@import "../src/ionic.ios";
--- a/demos/output.md.scss
+++ b/demos/output.md.scss
@@ -1,36 +0,0 @@
-$font-path: "../fonts";
-$roboto-font-path: "../fonts";
-
-// http://ionicframework.com/docs/v2/theming/
-
-
-// App Shared Variables
-// --------------------------------------------------
-// To customize the look and feel of this app, you can override
-// the Sass variables found in Ionic's source scss files. Setting
-// variables before Ionic's Sass will use these variables rather than
-// Ionic's default Sass variable values. App Shared Sass imports belong
-// in the app.core.scss file and not this file. Sass variables specific
-// to the mode belong in either the app.ios.scss or app.md.scss files.
-
-
-// App Shared Color Variables
-// --------------------------------------------------
-// It's highly recommended to change the default colors
-// to match your app's branding. Ionic uses a Sass map of
-// colors so you can add, rename and remove colors as needed.
-// The "primary" color is the only required color in the map.
-// Both iOS and MD colors can be further customized if colors
-// are different per mode.
-
-$colors: (
-  primary:    #387ef5,
-  secondary:  #32db64,
-  danger:     #f53d3d,
-  light:      #f4f4f4,
-  dark:       #222,
-  vibrant:    rebeccapurple,
-  bright:     #FFC125
-);
-
-@import "../src/ionic.md";
--- a/demos/output.wp.scss
+++ b/demos/output.wp.scss
@@ -1,36 +0,0 @@
-$font-path: "../fonts";
-$roboto-font-path: "../fonts";
-
-// http://ionicframework.com/docs/v2/theming/
-
-
-// App Shared Variables
-// --------------------------------------------------
-// To customize the look and feel of this app, you can override
-// the Sass variables found in Ionic's source scss files. Setting
-// variables before Ionic's Sass will use these variables rather than
-// Ionic's default Sass variable values. App Shared Sass imports belong
-// in the app.core.scss file and not this file. Sass variables specific
-// to the mode belong in either the app.ios.scss or app.md.scss files.
-
-
-// App Shared Color Variables
-// --------------------------------------------------
-// It's highly recommended to change the default colors
-// to match your app's branding. Ionic uses a Sass map of
-// colors so you can add, rename and remove colors as needed.
-// The "primary" color is the only required color in the map.
-// Both iOS and MD colors can be further customized if colors
-// are different per mode.
-
-$colors: (
-  primary:    #387ef5,
-  secondary:  #32db64,
-  danger:     #f53d3d,
-  light:      #f4f4f4,
-  dark:       #222,
-  vibrant:    rebeccapurple,
-  bright:     #FFC125
-);
-
-@import "../src/ionic.wp";
--- a/demos/package.json
+++ b/demos/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "ionic-demos",
+  "private": true,
+  "version": "1.0.0",
+  "description": "ionic demos",
+  "author": "Ionic Team <hi@ionic.io> (http://ionic.io)",
+  "license": "MIT",
+  "dependencies": {
+    "@ionic/storage": "^1.0.3",
+    "ionic-angular": "nightly",
+    "ionicons": "^3.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^2.0.3"
+  }
+}
--- a/demos/scroll/index.ts
+++ b/demos/scroll/index.ts
@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);
--- a/demos/scrollbar-fix.css
+++ b/demos/scrollbar-fix.css
@@ -1,6 +0,0 @@
-body.has-scrollbar scroll-content {
-  margin-right: -15px;
-}
-body.has-scrollbar ion-menu scroll-content {
-  margin-right: 0;
-}
--- a/demos/scrollbar-fix.js
+++ b/demos/scrollbar-fix.js
@@ -1,45 +0,0 @@
-(function(){
-
-  function hasScrollbar() {
-
-    if (typeof window.top.innerWidth === 'number') {
-        return window.top.innerWidth > window.top.document.documentElement.clientWidth;  
-    }
-
-    // rootElem for quirksmode
-    var rootElem = window.top.document.documentElement || window.top.document.body;
-
-    // Check overflow style property on body for fauxscrollbars
-    var overflowStyle;
-
-    if (typeof rootElem.currentStyle !== 'undefined') {
-        overflowStyle = rootElem.currentStyle.overflow;
-    }
-
-    overflowStyle = overflowStyle || window.top.getComputedStyle(rootElem, '').overflow;
-
-    // Also need to check the Y axis overflow
-    var overflowYStyle;
-
-    if (typeof rootElem.currentStyle !== 'undefined') {
-        overflowYStyle = rootElem.currentStyle.overflowY;
-    }
-
-    overflowYStyle = overflowYStyle || window.top.getComputedStyle(rootElem, '').overflowY;
-
-    var contentOverflows = rootElem.scrollHeight > rootElem.clientHeight;
-    var overflowShown = /^(visible|auto)$/.test(overflowStyle) || /^(visible|auto)$/.test(overflowYStyle);
-    var alwaysShowScroll = overflowStyle === 'scroll' || overflowYStyle === 'scroll';
-
-    return (contentOverflows && overflowShown) || (alwaysShowScroll)
-  }
-
-
-  if (hasScrollbar() === true) {
-    setTimeout(function() {
-      var body = document.getElementsByTagName('body')[0];
-      body.className = body.className + ' has-scrollbar';
-    }, 500);
-  }
-
-})();
--- a/demos/show-when/index.ts
+++ b/demos/show-when/index.ts
@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);
--- a/demos/slides/index.ts
+++ b/demos/slides/index.ts
@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ionicBootstrap } from 'ionic-angular';
-
-
-@Component({
-  templateUrl: 'main.html'
-})
-class ApiDemoPage {}
-
-
-@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
-})
-class ApiDemoApp {
-  root = ApiDemoPage;
-}
-
-ionicBootstrap(ApiDemoApp);
--- a/demos/src/action-sheet/app.component.ts
+++ b/demos/src/action-sheet/app.component.ts
@@ -1,10 +1,8 @@
 import { Component } from '@angular/core';
-
-import { ActionSheetController, ionicBootstrap, Platform } from 'ionic-angular';
-
+import { ActionSheetController, Platform } from 'ionic-angular';

@Component({
-  templateUrl: 'main.html'
+  templateUrl: 'page.html'
 })
 export class ApiDemoPage {
  constructor(public alertCtrl: ActionSheetController, public platform: Platform) { }
@@ -61,8 +59,6 @@ export class ApiDemoPage {
@Component({
  template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
  root = ApiDemoPage;
 }
-
-ionicBootstrap(ApiDemoApp);
--- a/demos/src/action-sheet/app.module.ts
+++ b/demos/src/action-sheet/app.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
+import { ApiDemoApp, ApiDemoPage } from './app.component';
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}
--- a/demos/src/action-sheet/index.html
+++ b/demos/src/action-sheet/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <title>Demo</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <link href="../../css/ionic.min.css" rel="stylesheet">
+  <link href="../scrollbar-fix.css" rel="stylesheet">
+</head>
+<body>
+  <ion-app></ion-app>
+  <script src="../../polyfills/polyfills.js"></script>
+  <script src="../scrollbar-fix.js""></script>
+  <script src="./main.bundle.js"></script>
+</body>
+</html>
--- a/demos/src/action-sheet/main.ts
+++ b/demos/src/action-sheet/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
--- a/demos/src/action-sheet/page.html
+++ b/demos/src/action-sheet/page.html
@@ -9,6 +9,6 @@

 <ion-content padding>

-  <button block (click)="present()">Basic Action Sheet</button>
+  <button ion-button block (click)="present()">Basic Action Sheet</button>

 </ion-content>
--- a/demos/src/alert/app.component.ts
+++ b/demos/src/alert/app.component.ts
@@ -1,10 +1,9 @@
 import { Component } from '@angular/core';
-
-import { AlertController, ionicBootstrap } from 'ionic-angular';
+import { AlertController } from 'ionic-angular';


@Component({
-  templateUrl: 'main.html'
+  templateUrl: 'page.html'
 })
 export class ApiDemoPage {
  testRadioOpen = false;
@@ -27,7 +26,7 @@ export class ApiDemoPage {
  doConfirm() {
    let alert = this.alertCtrl.create({
      title: 'Use this lightsaber?',
-      body: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
+      message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
      buttons: [
        {
          text: 'Disagree',
@@ -50,7 +49,7 @@ export class ApiDemoPage {
  doPrompt() {
    let alert = this.alertCtrl.create({
      title: 'Login',
-      body: "Enter a name for this new album you're so keen on adding",
+      message: 'Enter a name for this new album you\'re so keen on adding',
      inputs: [
        {
          name: 'title',
@@ -212,10 +211,8 @@ export class ApiDemoPage {


@Component({
-  template: '<ion-nav [root]="root"></ion-nav>'
+  template: `<ion-nav [root]="root"></ion-nav>`
 })
-class ApiDemoApp {
+export class ApiDemoApp {
  root = ApiDemoPage;
 }
-
-ionicBootstrap(ApiDemoApp);
--- a/demos/src/alert/app.module.ts
+++ b/demos/src/alert/app.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
+import { ApiDemoApp, ApiDemoPage } from './app.component';
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}
--- a/demos/src/alert/index.html
+++ b/demos/src/alert/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <title>Demo</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <link href="../../css/ionic.min.css" rel="stylesheet">
+  <link href="../scrollbar-fix.css" rel="stylesheet">
+</head>
+<body>
+  <ion-app></ion-app>
+  <script src="../../polyfills/polyfills.js"></script>
+  <script src="../scrollbar-fix.js""></script>
+  <script src="./main.bundle.js"></script>
+</body>
+</html>
--- a/demos/src/alert/main.ts
+++ b/demos/src/alert/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
--- a/demos/src/alert/page.html
+++ b/demos/src/alert/page.html
@@ -0,0 +1,18 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Alert</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content padding>
+
+  <button ion-button block (click)="doAlert()">Basic Alert</button>
+  <button ion-button color="light" block (click)="doConfirm()">Confirm Alert</button>
+  <button ion-button color="secondary" block (click)="doPrompt()">Prompt Alert</button>
+  <button ion-button color="danger" block (click)="doRadio()">Radio Alert</button>
+  <button ion-button color="dark" block (click)="doCheckbox()">Checkbox Alert</button>
+
+</ion-content>
--- a/demos/src/button/app.component.ts
+++ b/demos/src/button/app.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page.html'
+})
+export class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
--- a/demos/src/button/app.module.ts
+++ b/demos/src/button/app.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
+import { ApiDemoApp, ApiDemoPage } from './app.component';
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}
--- a/demos/src/button/index.html
+++ b/demos/src/button/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <title>Demo</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <link href="../../css/ionic.min.css" rel="stylesheet">
+  <link href="../scrollbar-fix.css" rel="stylesheet">
+</head>
+<body>
+  <ion-app></ion-app>
+  <script src="../../polyfills/polyfills.js"></script>
+  <script src="../scrollbar-fix.js""></script>
+  <script src="./main.bundle.js"></script>
+</body>
+</html>
--- a/demos/src/button/main.ts
+++ b/demos/src/button/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
--- a/demos/src/button/page.html
+++ b/demos/src/button/page.html
@@ -0,0 +1,68 @@
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>Button</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content text-center>
+
+  <h4>Colors</h4>
+
+  <button ion-button>Default</button>
+
+  <button ion-button color="secondary">Secondary</button>
+
+  <button ion-button color="danger">Danger</button>
+
+  <button ion-button color="light">Light</button>
+
+  <button ion-button color="dark">Dark</button>
+
+  <h4>Shapes</h4>
+
+  <button ion-button full>Full Button</button>
+
+  <button ion-button block>Block Button</button>
+
+  <button ion-button round>Round Button</button>
+
+  <button ion-button fab style="position: relative;">FAB</button>
+
+  <h4>Outlines</h4>
+
+  <button ion-button color="secondary" full outline>Outline + Full</button>
+
+  <button ion-button color="secondary" block outline>Outline + Block</button>
+
+  <button ion-button color="secondary" round outline>Outline + Round</button>
+
+  <button ion-button color="secondary" fab outline style="position: relative;">FAB</button>
+
+  <h4>Icons</h4>
+
+  <button ion-button icon-left color="dark">
+    <ion-icon name="star"></ion-icon>
+    Left Icon
+  </button>
+
+  <button ion-button icon-right color="dark">
+    Right Icon
+    <ion-icon name="star"></ion-icon>
+  </button>
+
+  <button ion-button icon-only color="dark">
+    <ion-icon name="star"></ion-icon>
+  </button>
+
+  <h4>Sizes</h4>
+
+  <button ion-button color="light" large>Large</button>
+
+  <button ion-button color="light">Default</button>
+
+  <button ion-button color="light" small>Small</button>
+
+</ion-content>
--- a/demos/src/checkbox/app.component.ts
+++ b/demos/src/checkbox/app.component.ts
@@ -1,12 +1,10 @@
 import { Component } from '@angular/core';

-import { ionicBootstrap } from 'ionic-angular';
-

@Component({
-  templateUrl: 'main.html'
+  templateUrl: 'page.html'
 })
-class ApiDemoPage {
+export class ApiDemoPage {

  data = {
    jon: true,
@@ -19,7 +17,8 @@ class ApiDemoPage {
    stannis: true,
    petyr: false,
    hodor: true,
-    catelyn: true
+    catelyn: true,
+    bronn: false
  };

 }
@@ -28,8 +27,6 @@ class ApiDemoPage {
@Component({
  template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
  root = ApiDemoPage;
 }
-
-ionicBootstrap(ApiDemoApp);
--- a/demos/src/checkbox/app.module.ts
+++ b/demos/src/checkbox/app.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
+import { ApiDemoApp, ApiDemoPage } from './app.component';
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}
--- a/demos/src/checkbox/index.html
+++ b/demos/src/checkbox/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <title>Demo</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <link href="../../css/ionic.min.css" rel="stylesheet">
+  <link href="../scrollbar-fix.css" rel="stylesheet">
+</head>
+<body>
+  <ion-app></ion-app>
+  <script src="../../polyfills/polyfills.js"></script>
+  <script src="../scrollbar-fix.js""></script>
+  <script src="./main.bundle.js"></script>
+</body>
+</html>
--- a/demos/src/checkbox/main.ts
+++ b/demos/src/checkbox/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
--- a/demos/src/checkbox/page.html
+++ b/demos/src/checkbox/page.html
@@ -17,7 +17,7 @@
    </ion-item>

    <ion-item>
-      <ion-checkbox dark [(ngModel)]="data.daenerys"></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.daenerys" color="vibrant"></ion-checkbox>
      <ion-label>Daenerys Targaryen</ion-label>
    </ion-item>

@@ -27,12 +27,12 @@
    </ion-item>

    <ion-item>
-      <ion-checkbox [(ngModel)]="data.tyroin" secondary></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.tyroin" color="secondary"></ion-checkbox>
      <ion-label>Tyrion Lannister</ion-label>
    </ion-item>

    <ion-item>
-      <ion-checkbox [(ngModel)]="data.sansa" danger></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.sansa" color="danger"></ion-checkbox>
      <ion-label>Sansa Stark</ion-label>
    </ion-item>

@@ -42,7 +42,7 @@
    </ion-item>

    <ion-item>
-      <ion-checkbox [(ngModel)]="data.cersei" dark></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.cersei" color="dark"></ion-checkbox>
      <ion-label>Cersei Lannister</ion-label>
    </ion-item>

@@ -57,17 +57,17 @@
    </ion-item>

    <ion-item>
-      <ion-checkbox [(ngModel)]="data.hodor" dark></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.hodor" color="dark"></ion-checkbox>
      <ion-label>Hodor</ion-label>
    </ion-item>

    <ion-item>
-      <ion-checkbox [(ngModel)]="data.catelyn" secondary></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.catelyn" color="secondary"></ion-checkbox>
      <ion-label>Catelyn Stark</ion-label>
    </ion-item>

    <ion-item>
-      <ion-checkbox [(ngModel)]="data.bronn" royal></ion-checkbox>
+      <ion-checkbox [(ngModel)]="data.bronn" color="vibrant"></ion-checkbox>
      <ion-label>Bronn</ion-label>
    </ion-item>

--- a/demos/src/chip/app.component.ts
+++ b/demos/src/chip/app.component.ts
@@ -1,19 +1,18 @@
 import { Component } from '@angular/core';

-import { ionicBootstrap } from 'ionic-angular';
-
-
@Component({
-  templateUrl: 'main.html'
+  templateUrl: 'page.html'
 })
-class ApiDemoPage {}
-
+export class ApiDemoPage {
+  delete(chip: Element) {
+    chip.remove();
+  }
+}

@Component({
  template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
  root = ApiDemoPage;
 }

-ionicBootstrap(ApiDemoApp);
--- a/demos/src/chip/app.module.ts
+++ b/demos/src/chip/app.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
+import { ApiDemoApp, ApiDemoPage } from './app.component';
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}
--- a/demos/src/chip/index.html
+++ b/demos/src/chip/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <title>Demo</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <link href="../../css/ionic.min.css" rel="stylesheet">
+  <link href="../scrollbar-fix.css" rel="stylesheet">
+</head>
+<body>
+  <ion-app></ion-app>
+  <script src="../../polyfills/polyfills.js"></script>
+  <script src="../scrollbar-fix.js""></script>
+  <script src="./main.bundle.js"></script>
+</body>
+</html>
--- a/demos/src/chip/main.ts
+++ b/demos/src/chip/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
--- a/demos/src/chip/page.html
+++ b/demos/src/chip/page.html
@@ -0,0 +1,96 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Chips</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding style="text-align:center">
+
+  <h2>Text Chips</h2>
+
+  <ion-chip>
+    <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label color="secondary">Secondary Label</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label>Another With Longer Text</ion-label>
+  </ion-chip>
+
+  <h2>Color Chips</h2>
+
+  <ion-chip color="primary">
+    <ion-icon name="heart" color="dark"></ion-icon>
+    <ion-label>Primary</ion-label>
+  </ion-chip>
+
+  <ion-chip color="secondary">
+    <ion-label color="dark">Secondary w/ Dark label</ion-label>
+  </ion-chip>
+
+  <ion-chip color="danger">
+    <ion-label>Danger</ion-label>
+  </ion-chip>
+
+  <h2>Icon Chips</h2>
+
+  <ion-chip>
+    <ion-icon name="pin"></ion-icon>
+   <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label>Secondary</ion-label>
+    <ion-icon name="pin" color="secondary"></ion-icon>
+  </ion-chip>
+
+  <h2>Avatar Chips</h2>
+
+  <ion-chip>
+    <ion-avatar>
+      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+    </ion-avatar>
+    <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label>Right Avatar</ion-label>
+    <ion-avatar>
+      <img src="https://gravatar.com/avatar/d249a09fecac4da036d26c5002af2c94?d=identicon&f=y">
+    </ion-avatar>
+  </ion-chip>
+
+  <h2>Delete Chips</h2>
+
+  <ion-chip #chip1>
+    <ion-label>Default</ion-label>
+    <button ion-button clear (click)="delete(chip1)">
+      <ion-icon name="close-circle"></ion-icon>
+    </button>
+  </ion-chip>
+
+  <ion-chip #chip2>
+    <ion-icon name="pin" color="primary"></ion-icon>
+    <ion-label>With Icon</ion-label>
+    <button ion-button clear (click)="delete(chip2)">
+      <ion-icon name="close-circle"></ion-icon>
+    </button>
+  </ion-chip>
+
+  <ion-chip #chip3>
+    <ion-avatar>
+      <img src="https://gravatar.com/avatar/83b4748bf7e821165ecccd4c090d96e1?d=identicon&f=y">
+    </ion-avatar>
+    <ion-label>With Avatar</ion-label>
+    <button ion-button clear color="dark" (click)="delete(chip3)">
+      <ion-icon name="close-circle"></ion-icon>
+    </button>
+  </ion-chip>
+
+</ion-content>
--- a/demos/src/config/app.component.ts
+++ b/demos/src/config/app.component.ts
@@ -1,41 +1,39 @@
 import { Component } from '@angular/core';
-
-import { ionicBootstrap, IonicApp, Platform, NavController } from 'ionic-angular';
-
+import { Platform, NavController } from 'ionic-angular';

 if (!window.localStorage) {
-  Object.defineProperty(window, "localStorage", new (function () {
+  Object.defineProperty(window, 'localStorage', new (function () {
    var aKeys = [], oStorage = {};
-    Object.defineProperty(oStorage, "getItem", {
+    Object.defineProperty(oStorage, 'getItem', {
      value: function (sKey) { return sKey ? this[sKey] : null; },
      writable: false,
      configurable: false,
      enumerable: false
    });
-    Object.defineProperty(oStorage, "key", {
+    Object.defineProperty(oStorage, 'key', {
      value: function (nKeyId) { return aKeys[nKeyId]; },
      writable: false,
      configurable: false,
      enumerable: false
    });
-    Object.defineProperty(oStorage, "setItem", {
+    Object.defineProperty(oStorage, 'setItem', {
      value: function (sKey, sValue) {
-        if(!sKey) { return; }
-        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
+        if (!sKey) { return; }
+        document.cookie = encodeURI(sKey) + '=' + encodeURI(sValue) + '; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/';
      },
      writable: false,
      configurable: false,
      enumerable: false
    });
-    Object.defineProperty(oStorage, "length", {
+    Object.defineProperty(oStorage, 'length', {
      get: function () { return aKeys.length; },
      configurable: false,
      enumerable: false
    });
-    Object.defineProperty(oStorage, "removeItem", {
+    Object.defineProperty(oStorage, 'removeItem', {
      value: function (sKey) {
-        if(!sKey) { return; }
-        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
+        if (!sKey) { return; }
+        document.cookie = encodeURI(sKey) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
      },
      writable: false,
      configurable: false,
@@ -45,15 +43,18 @@ if (!window.localStorage) {
      var iThisIndx;
      for (var sKey in oStorage) {
        iThisIndx = aKeys.indexOf(sKey);
-        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
-        else { aKeys.splice(iThisIndx, 1); }
+        if (iThisIndx === -1) {
+          (oStorage as any).setItem(sKey, oStorage[sKey]);
+        } else {
+          aKeys.splice(iThisIndx, 1);
+        }
        delete oStorage[sKey];
      }
-      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
+      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { (oStorage as any).removeItem(aKeys[0]); }
      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
        aCouple = aCouples[nIdx].split(/\s*=\s*/);
        if (aCouple.length > 1) {
-          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
+          oStorage[iKey = decodeURI(aCouple[0])] = decodeURI(aCouple[1]);
          aKeys.push(iKey);
        }
      }
@@ -79,7 +80,7 @@ export class TabPage {


@Component({
-  templateUrl: 'main.html'
+  templateUrl: 'page.html'
 })
 export class ApiDemoPage {
  config: any;
@@ -89,18 +90,23 @@ export class ApiDemoPage {

    if (window.localStorage.getItem('configDemo') !== null) {
      this.config = JSON.parse(window.localStorage.getItem('configDemo'));
-    }
-    else if (platform.is('ios')) {
+    } else if (platform.is('ios')) {
      this.config = {
        'backButtonIcon': 'ios-arrow-back',
        'iconMode': 'ios',
        'tabsPlacement': 'bottom'
      };
+    } else if (platform.is('windows')) {
+      this.config = {
+        'backButtonIcon': 'ios-arrow-back',
+        'iconMode': 'ios',
+        'tabsPlacement': 'top'
+      };
    } else {
      this.config = {
        'backButtonIcon': 'md-arrow-back',
        'iconMode': 'md',
-        'tabsPlacement': 'top'
+        'tabsPlacement': 'bottom'
      };
    }

@@ -118,7 +124,7 @@ export class ApiDemoPage {
 }

@Component({
-  templateUrl: 'page.html'
+  templateUrl: 'push-page.html'
 })
 export class PushPage {
  constructor(public navCtrl: NavController) {}
@@ -132,8 +138,6 @@ export class PushPage {
@Component({
  template: '<ion-nav [root]="root" #content></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
  root = TabPage;
 }
-
-ionicBootstrap(ApiDemoApp, null, CONFIG_DEMO);
--- a/demos/src/config/app.module.ts
+++ b/demos/src/config/app.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
+import { ApiDemoApp, ApiDemoPage, PushPage, TabPage } from './app.component';
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage,
+    PushPage,
+    TabPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage,
+    PushPage,
+    TabPage
+  ]
+})
+export class AppModule {}
--- a/demos/src/config/index.html
+++ b/demos/src/config/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <title>Demo</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <link href="../../css/ionic.min.css" rel="stylesheet">
+  <link href="../scrollbar-fix.css" rel="stylesheet">
+</head>
+<body>
+  <ion-app></ion-app>
+  <script src="../../polyfills/polyfills.js"></script>
+  <script src="../scrollbar-fix.js""></script>
+  <script src="./main.bundle.js"></script>
+</body>
+</html>
--- a/demos/src/config/main.ts
+++ b/demos/src/config/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
--- a/demos/src/config/page.html
+++ b/demos/src/config/page.html
@@ -41,7 +41,7 @@
  <p class="note">Note: the config will not be updated until you click the button below.</p>

  <div padding>
-    <button block (click)="load()">
+    <button ion-button block (click)="load()">
      Update Config
    </button>
  </div>
@@ -50,14 +50,14 @@

  <!-- this has to be formatted weird for pre -->
  <pre margin>
-ionicBootstrap(MyApp, [], {
+<!--ionicBootstrap(MyApp, [], {
  backButtonIcon: "{{initialConfig.backButtonIcon}}"
  iconMode: "{{initialConfig.iconMode}}"
  tabsPlacement: "{{initialConfig.tabsPlacement}}"
-});</pre>
+});--></pre>

  <div padding>
-    <button block secondary (click)="push()">
+    <button ion-button block color="secondary" (click)="push()">
      Go to Another Page
    </button>
  </div>
--- a/demos/src/config/push-page.html
+++ b/demos/src/config/push-page.html
@@ -6,6 +6,6 @@

 <ion-content>
  <div padding>
-    <button block (click)="pop()">Go Back to Config</button>
+    <button ion-button block (click)="pop()">Go Back to Config</button>
  </div>
 </ion-content>
--- a/demos/src/config/tabs.html
+++ b/demos/src/config/tabs.html
--- a/demos/src/datetime/app.component.ts
+++ b/demos/src/datetime/app.component.ts
@@ -1,12 +1,9 @@
 import { Component } from '@angular/core';

-import { ionicBootstrap } from 'ionic-angular';
-
-
@Component({
-  templateUrl: 'main.html'
+  templateUrl: 'page.html'
 })
-class ApiDemoPage {
+export class ApiDemoPage {
  wwwReleased = '1991';
  netscapeReleased = '1994-12-15T13:47:20.789';
  operaReleased = '1995-04-15';
@@ -68,8 +65,6 @@ class ApiDemoPage {
@Component({
  template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
  root = ApiDemoPage;
 }
-
-ionicBootstrap(ApiDemoApp);
--- a/demos/src/datetime/app.module.ts
+++ b/demos/src/datetime/app.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
+import { ApiDemoApp, ApiDemoPage } from './app.component';
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}
--- a/demos/src/datetime/index.html
+++ b/demos/src/datetime/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <title>Demo</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <link href="../../css/ionic.min.css" rel="stylesheet">
+  <link href="../scrollbar-fix.css" rel="stylesheet">
+</head>
+<body>
+  <ion-app></ion-app>
+  <script src="../../polyfills/polyfills.js"></script>
+  <script src="../scrollbar-fix.js""></script>
+  <script src="./main.bundle.js"></script>
+</body>
+</html>
--- a/demos/src/datetime/main.ts
+++ b/demos/src/datetime/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
--- a/demos/src/datetime/page.html
+++ b/demos/src/datetime/page.html
--- a/demos/src/events/app.component.ts
+++ b/demos/src/events/app.component.ts
@@ -1,15 +1,13 @@
 import { Component, ViewChild } from '@angular/core';
-
-import { Events, ionicBootstrap, Nav } from 'ionic-angular';
-
+import { Events, Nav } from 'ionic-angular';

@Component({
  templateUrl: 'login.html'
 })
-class Login {
+export class Login {
  user = {
-    name: "Administrator",
-    username: "admin"
+    name: 'Administrator',
+    username: 'admin'
  };

  constructor(private events: Events) {}
@@ -20,11 +18,10 @@ class Login {

 }

-
@Component({
  templateUrl: 'logout.html'
 })
-class Logout {
+export class Logout {
  constructor(private events: Events) {}

  logout() {
@@ -36,7 +33,7 @@ class Logout {
@Component({
  templateUrl: 'app.html'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
  @ViewChild(Nav) nav: Nav;

  root = Login;
@@ -71,5 +68,3 @@ class ApiDemoApp {
    });
  }
 }
-
-ionicBootstrap(ApiDemoApp);
--- a/demos/src/events/app.html
+++ b/demos/src/events/app.html
@@ -1,7 +1,7 @@
 <ion-menu #menu [content]="content">

  <ion-header>
-    <ion-toolbar secondary>
+    <ion-toolbar color="secondary">
      <ion-title>Left Menu</ion-title>
    </ion-toolbar>
  </ion-header>
@@ -13,7 +13,7 @@
        Logged in as <b>Administrator</b>
      </ion-list-header>
      <button ion-item menuClose *ngFor="let p of loggedInPages" (click)="openPage(menu, p)">
-        <ion-label primary>{{p.title}}</ion-label>
+        <ion-label color="primary">{{p.title}}</ion-label>
      </button>

      <button ion-item menuToggle>
@@ -27,7 +27,7 @@
        Please Log In
      </ion-list-header>
      <button ion-item menuClose *ngFor="let p of loggedOutPages" (click)="openPage(menu, p)">
-        <ion-label primary>{{p.title}}</ion-label>
+        <ion-label color="primary">{{p.title}}</ion-label>
      </button>

      <button ion-item menuToggle>
--- a/demos/src/events/app.module.ts
+++ b/demos/src/events/app.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
+import { ApiDemoApp, Login, Logout } from './app.component';
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    Login,
+    Logout
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    Login,
+    Logout
+  ]
+})
+export class AppModule {}
--- a/demos/src/events/index.html
+++ b/demos/src/events/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <title>Demo</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <link href="../../css/ionic.min.css" rel="stylesheet">
+  <link href="../scrollbar-fix.css" rel="stylesheet">
+</head>
+<body>
+  <ion-app></ion-app>
+  <script src="../../polyfills/polyfills.js"></script>
+  <script src="../scrollbar-fix.js""></script>
+  <script src="./main.bundle.js"></script>
+</body>
+</html>
--- a/demos/src/events/login.html
+++ b/demos/src/events/login.html
@@ -1,7 +1,7 @@
 <ion-header>

  <ion-navbar>
-    <button menuToggle>
+    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>

@@ -20,18 +20,18 @@

  <ion-list no-margin>
    <ion-item>
-      <ion-label stacked primary>Name</ion-label>
+      <ion-label stacked color="primary">Name</ion-label>
      <ion-input [(ngModel)]="user.name" disabled></ion-input>
    </ion-item>
    <ion-item>
-      <ion-label stacked primary>Username</ion-label>
+      <ion-label stacked color="primary">Username</ion-label>
      <ion-input [(ngModel)]="user.username" disabled></ion-input>
    </ion-item>
  </ion-list>

  <div padding>
-    <button block (click)="login()">Login</button>
-    <button block secondary menuToggle>Toggle Menu</button>
+    <button ion-button block (click)="login()">Login</button>
+    <button ion-button block color="secondary" menuToggle>Toggle Menu</button>
  </div>

 </ion-content>
--- a/demos/src/events/logout.html
+++ b/demos/src/events/logout.html
@@ -1,7 +1,7 @@
 <ion-header>

  <ion-navbar>
-    <button menuToggle>
+    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>

@@ -17,7 +17,7 @@
  <p margin>Click the logout button to logout. Then, toggle the menu to see the menu items change.</p>

  <div padding>
-    <button block (click)="logout()">Logout</button>
-    <button block secondary menuToggle>Toggle Menu</button>
+    <button ion-button block (click)="logout()">Logout</button>
+    <button ion-button block color="secondary" menuToggle>Toggle Menu</button>
  </div>
 </ion-content>
--- a/demos/src/events/main.ts
+++ b/demos/src/events/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
--- a/demos/src/fab/app.component.ts
+++ b/demos/src/fab/app.component.ts
@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { FabContainer } from 'ionic-angular';
+
+@Component({
+  templateUrl: 'page.html'
+})
+export class ApiDemoPage {
+  array: number[] = [];
+
+  add() {
+    this.array.push(1);
+  }
+
+  clickMainFAB() {
+    console.log('Clicked open social menu');
+  }
+
+  openSocial(network: string, fab: FabContainer) {
+    console.log('Share in ' + network);
+    fab.close();
+  }
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
--- a/demos/src/fab/app.module.ts
+++ b/demos/src/fab/app.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
+import { ApiDemoApp, ApiDemoPage } from './app.component';
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}
+
--- a/demos/src/fab/index.html
+++ b/demos/src/fab/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <title>Demo</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <link href="../../css/ionic.min.css" rel="stylesheet">
+  <link href="../scrollbar-fix.css" rel="stylesheet">
+</head>
+<body>
+  <ion-app></ion-app>
+  <script src="../../polyfills/polyfills.js"></script>
+  <script src="../scrollbar-fix.js""></script>
+  <script src="./main.bundle.js"></script>
+</body>
+</html>
--- a/demos/src/fab/main.ts
+++ b/demos/src/fab/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
--- a/demos/src/fab/page.html
+++ b/demos/src/fab/page.html
@@ -0,0 +1,72 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Floating Action Buttons</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content fullscreen>
+  <div f></div>
+  <div f></div>
+  <div f *ngFor="let a of array"></div>
+
+  <ion-fab top right edge #fab1>
+    <button ion-fab mini (click)="clickMainFAB()"><ion-icon name="add"></ion-icon></button>
+    <ion-fab-list>
+      <button ion-fab (click)="openSocial('facebook', fab1)"><ion-icon name="logo-facebook"></ion-icon></button>
+      <button ion-fab (click)="openSocial('twitter', fab1)"><ion-icon name="logo-twitter"></ion-icon></button>
+      <button ion-fab (click)="openSocial('vimeo', fab1)"><ion-icon name="logo-vimeo"></ion-icon></button>
+      <button ion-fab (click)="openSocial('googleplus', fab1)"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab right bottom #fab2>
+    <button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
+    <ion-fab-list side="left">
+      <button ion-fab (click)="openSocial('facebook', fab2)"><ion-icon name="logo-facebook"></ion-icon></button>
+      <button ion-fab (click)="openSocial('twitter', fab2)"><ion-icon name="logo-twitter"></ion-icon></button>
+      <button ion-fab (click)="openSocial('vimeo', fab2)"><ion-icon name="logo-vimeo"></ion-icon></button>
+      <button ion-fab (click)="openSocial('googleplus', fab2)"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab left top #fab3>
+    <button ion-fab color="secondary"><ion-icon name="arrow-dropright"></ion-icon></button>
+    <ion-fab-list side="right">
+      <button ion-fab (click)="openSocial('facebook', fab3)"><ion-icon name="logo-facebook"></ion-icon></button>
+      <button ion-fab (click)="openSocial('twitter', fab3)"><ion-icon name="logo-twitter"></ion-icon></button>
+      <button ion-fab (click)="openSocial('vimeo', fab3)"><ion-icon name="logo-vimeo"></ion-icon></button>
+      <button ion-fab (click)="openSocial('googleplus', fab3)"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab left bottom #fab4>
+    <button ion-fab color="dark"><ion-icon name="arrow-dropup"></ion-icon></button>
+    <ion-fab-list side="top">
+      <button ion-fab (click)="openSocial('facebook', fab4)"><ion-icon name="logo-facebook"></ion-icon></button>
+      <button ion-fab (click)="openSocial('twitter', fab4)"><ion-icon name="logo-twitter"></ion-icon></button>
+      <button ion-fab (click)="openSocial('vimeo', fab4)"><ion-icon name="logo-vimeo"></ion-icon></button>
+      <button ion-fab (click)="openSocial('googleplus', fab4)"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab center middle #fab5>
+    <button ion-fab color="danger" (click)="clickMainFAB()"><ion-icon name="md-share"></ion-icon></button>
+    <ion-fab-list side="top">
+      <button ion-fab (click)="openSocial('vimeo', fab5)" color="primary"><ion-icon name="logo-vimeo"></ion-icon></button>
+    </ion-fab-list>
+    <ion-fab-list side="bottom">
+      <button ion-fab (click)="openSocial('facebook', fab5)" color="secondary"><ion-icon name="logo-facebook"></ion-icon></button>
+    </ion-fab-list>
+    <ion-fab-list side="left">
+      <button ion-fab (click)="openSocial('googleplus', fab5)" color="light"><ion-icon name="logo-googleplus"></ion-icon></button>
+    </ion-fab-list>
+    <ion-fab-list side="right">
+      <button ion-fab (click)="openSocial('twitter', fab5)" color="dark"><ion-icon name="logo-twitter"></ion-icon></button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <ion-fab right middle>
+    <button ion-fab color="danger" (click)="add()"><ion-icon name="add"></ion-icon></button>
+  </ion-fab>
+
+</ion-content>
--- a/demos/src/hide-when/app.component.ts
+++ b/demos/src/hide-when/app.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page.html'
+})
+export class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
--- a/demos/src/hide-when/app.module.ts
+++ b/demos/src/hide-when/app.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
+import { ApiDemoApp, ApiDemoPage } from './app.component';
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}
--- a/demos/src/hide-when/index.html
+++ b/demos/src/hide-when/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <title>Demo</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <link href="../../css/ionic.min.css" rel="stylesheet">
+  <link href="../scrollbar-fix.css" rel="stylesheet">
+</head>
+<body>
+  <ion-app></ion-app>
+  <script src="../../polyfills/polyfills.js"></script>
+  <script src="../scrollbar-fix.js""></script>
+  <script src="./main.bundle.js"></script>
+</body>
+</html>
--- a/demos/src/hide-when/main.ts
+++ b/demos/src/hide-when/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
--- a/demos/src/hide-when/page.html
+++ b/demos/src/hide-when/page.html
--- a/demos/src/icon/app.component.ts
+++ b/demos/src/icon/app.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page.html'
+})
+export class ApiDemoPage {}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class ApiDemoApp {
+  root = ApiDemoPage;
+}
--- a/demos/src/icon/app.module.ts
+++ b/demos/src/icon/app.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
+import { ApiDemoApp, ApiDemoPage } from './app.component';
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}
--- a/demos/src/icon/index.html
+++ b/demos/src/icon/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <title>Demo</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <link href="../../css/ionic.min.css" rel="stylesheet">
+  <link href="../scrollbar-fix.css" rel="stylesheet">
+</head>
+<body>
+  <ion-app></ion-app>
+  <script src="../../polyfills/polyfills.js"></script>
+  <script src="../scrollbar-fix.js""></script>
+  <script src="./main.bundle.js"></script>
+</body>
+</html>
--- a/demos/src/icon/main.ts
+++ b/demos/src/icon/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
--- a/demos/src/icon/page.html
+++ b/demos/src/icon/page.html
@@ -10,50 +10,50 @@
 <ion-content text-center class="icon-demo">

  <ion-row>
-    <ion-col><ion-icon name="ionic" primary></ion-icon></ion-col>
+    <ion-col><ion-icon name="ionic" color="primary"></ion-icon></ion-col>
    <ion-col><ion-icon name="logo-angular"></ion-icon></ion-col>
-    <ion-col><ion-icon name="heart" danger></ion-icon></ion-col>
-    <ion-col><ion-icon name="ionitron" primary></ion-icon></ion-col>
+    <ion-col><ion-icon name="heart" color="danger"></ion-icon></ion-col>
+    <ion-col><ion-icon name="ionitron" color="primary"></ion-icon></ion-col>

-    <ion-col><ion-icon name="happy" vibrant></ion-icon></ion-col>
+    <ion-col><ion-icon name="happy" color="vibrant"></ion-icon></ion-col>
    <ion-col><ion-icon name="people"></ion-icon></ion-col>
    <ion-col><ion-icon name="person"></ion-icon></ion-col>
    <ion-col><ion-icon name="contact"></ion-icon></ion-col>

    <ion-col><ion-icon name="apps"></ion-icon></ion-col>
    <ion-col><ion-icon name="lock"></ion-icon></ion-col>
-    <ion-col><ion-icon name="key" bright></ion-icon></ion-col>
+    <ion-col><ion-icon name="key" color="bright"></ion-icon></ion-col>
    <ion-col><ion-icon name="unlock"></ion-icon></ion-col>

-    <ion-col><ion-icon name="map" secondary></ion-icon></ion-col>
+    <ion-col><ion-icon name="map" color="secondary"></ion-icon></ion-col>
    <ion-col><ion-icon name="navigate"></ion-icon></ion-col>
    <ion-col><ion-icon name="pin"></ion-icon></ion-col>
    <ion-col><ion-icon name="locate"></ion-icon></ion-col>

    <ion-col><ion-icon name="mic"></ion-icon></ion-col>
-    <ion-col><ion-icon name="musical-notes" vibrant></ion-icon></ion-col>
+    <ion-col><ion-icon name="musical-notes" color="vibrant"></ion-icon></ion-col>
    <ion-col><ion-icon name="volume-up"></ion-icon></ion-col>
    <ion-col><ion-icon name="microphone"></ion-icon></ion-col>

-    <ion-col><ion-icon name="cafe" bright></ion-icon></ion-col>
+    <ion-col><ion-icon name="cafe" color="bright"></ion-icon></ion-col>
    <ion-col><ion-icon name="calculator"></ion-icon></ion-col>
    <ion-col><ion-icon name="bus"></ion-icon></ion-col>
-    <ion-col><ion-icon name="wine" danger></ion-icon></ion-col>
+    <ion-col><ion-icon name="wine" color="danger"></ion-icon></ion-col>

    <ion-col><ion-icon name="camera"></ion-icon></ion-col>
-    <ion-col><ion-icon name="image" secondary></ion-icon></ion-col>
-    <ion-col><ion-icon name="star" bright></ion-icon></ion-col>
+    <ion-col><ion-icon name="image" color="secondary"></ion-icon></ion-col>
+    <ion-col><ion-icon name="star" color="bright"></ion-icon></ion-col>
    <ion-col><ion-icon name="pin"></ion-icon></ion-col>

-    <ion-col><ion-icon name="arrow-dropup-circle" vibrant></ion-icon></ion-col>
+    <ion-col><ion-icon name="arrow-dropup-circle" color="vibrant"></ion-icon></ion-col>
    <ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
    <ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col>
    <ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>

    <ion-col><ion-icon name="cloud"></ion-icon></ion-col>
-    <ion-col><ion-icon name="sunny" bright></ion-icon></ion-col>
+    <ion-col><ion-icon name="sunny" color="bright"></ion-icon></ion-col>
    <ion-col><ion-icon name="umbrella"></ion-icon></ion-col>
-    <ion-col><ion-icon name="rainy" primary></ion-icon></ion-col>
+    <ion-col><ion-icon name="rainy" color="primary"></ion-icon></ion-col>
  </ion-row>

 </ion-content>
--- a/demos/src/infinite-scroll/app.component.ts
+++ b/demos/src/infinite-scroll/app.component.ts
@@ -1,6 +1,5 @@
 import { Component, Injectable } from '@angular/core';
-import { ionicBootstrap, InfiniteScroll } from 'ionic-angular';
-
+import { InfiniteScroll } from 'ionic-angular';

 /**
 * Mock Data Access Object
@@ -8,7 +7,7 @@ import { ionicBootstrap, InfiniteScroll } from 'ionic-angular';
@Injectable()
 export class MockProvider {

-  getData() {
+  getData(): any[] {
    // return mock data synchronously
    let data = [];
    for (var i = 0; i < 20; i++) {
@@ -17,7 +16,7 @@ export class MockProvider {
    return data;
  }

-  getAsyncData() {
+  getAsyncData(): Promise<any[]> {
    // async receive mock data
    return new Promise(resolve => {

@@ -64,10 +63,10 @@ export class MockProvider {


@Component({
-  templateUrl: 'main.html',
+  templateUrl: 'page.html',
  providers: [MockProvider]
 })
-class ApiDemoApp {
+export class ApiDemoApp {
  items: string[];

  constructor(private mockProvider: MockProvider) {
@@ -89,5 +88,3 @@ class ApiDemoApp {
  }

 }
-
-ionicBootstrap(ApiDemoApp);
--- a/demos/src/infinite-scroll/app.module.ts
+++ b/demos/src/infinite-scroll/app.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
+import { ApiDemoApp } from './app.component';
+
+@NgModule({
+  declarations: [
+    ApiDemoApp
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoApp
+  ]
+})
+export class AppModule {}
--- a/demos/src/infinite-scroll/index.html
+++ b/demos/src/infinite-scroll/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <title>Demo</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <link href="../../css/ionic.min.css" rel="stylesheet">
+  <link href="../scrollbar-fix.css" rel="stylesheet">
+</head>
+<body>
+  <ion-app></ion-app>
+  <script src="../../polyfills/polyfills.js"></script>
+  <script src="../scrollbar-fix.js""></script>
+  <script src="./main.bundle.js"></script>
+</body>
+</html>
--- a/demos/src/infinite-scroll/main.ts
+++ b/demos/src/infinite-scroll/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
--- a/demos/src/infinite-scroll/page.html
+++ b/demos/src/infinite-scroll/page.html
--- a/demos/src/input/app.component.ts
+++ b/demos/src/input/app.component.ts
@@ -1,18 +1,15 @@
 import { Component } from '@angular/core';

-import { ionicBootstrap } from 'ionic-angular';

@Component({
-  templateUrl: 'main.html'
+  templateUrl: 'page.html'
 })
-class ApiDemoPage {}
+export class ApiDemoPage {}


@Component({
  template: '<ion-nav [root]="root"></ion-nav>'
 })
-class ApiDemoApp {
+export class ApiDemoApp {
  root = ApiDemoPage;
 }
-
-ionicBootstrap(ApiDemoApp);
--- a/demos/src/input/app.module.ts
+++ b/demos/src/input/app.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { IonicApp, IonicModule } from 'ionic-angular';
+import { ApiDemoApp, ApiDemoPage } from './app.component';
+
+@NgModule({
+  declarations: [
+    ApiDemoApp,
+    ApiDemoPage
+  ],
+  imports: [
+    IonicModule.forRoot(ApiDemoApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    ApiDemoPage
+  ]
+})
+export class AppModule {}
--- a/demos/src/input/index.html
+++ b/demos/src/input/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+  <title>Demo</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <link href="../../css/ionic.min.css" rel="stylesheet">
+  <link href="../scrollbar-fix.css" rel="stylesheet">
+</head>
+<body>
+  <ion-app></ion-app>
+  <script src="../../polyfills/polyfills.js"></script>
+  <script src="../scrollbar-fix.js""></script>
+  <script src="./main.bundle.js"></script>
+</body>
+</html>
--- a/demos/src/input/main.ts
+++ b/demos/src/input/main.ts
@@ -0,0 +1,6 @@
+import { platformBrowser } from '@angular/platform-browser';
+import { enableProdMode } from '@angular/core';
+import { AppModuleNgFactory } from './app.module.ngfactory';
+
+enableProdMode();
+platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
--- a/demos/src/input/page.html
+++ b/demos/src/input/page.html
@@ -11,12 +11,12 @@

  <ion-list>
    <ion-item>
-      <ion-label primary>Inline Label</ion-label>
+      <ion-label color="primary">Inline Label</ion-label>
      <ion-input placeholder="Text Input"></ion-input>
    </ion-item>

    <ion-item>
-      <ion-label primary fixed>Fixed Label</ion-label>
+      <ion-label color="primary" fixed>Fixed Label</ion-label>
      <ion-input type="tel" placeholder="Tel Input"></ion-input>
    </ion-item>

@@ -25,17 +25,17 @@
    </ion-item>

    <ion-item>
-      <ion-label primary stacked>Stacked Label</ion-label>
+      <ion-label color="primary" stacked>Stacked Label</ion-label>
      <ion-input type="email" placeholder="Email Input"></ion-input>
    </ion-item>

    <ion-item>
-      <ion-label primary stacked>Stacked Label</ion-label>
+      <ion-label color="primary" stacked>Stacked Label</ion-label>
      <ion-input type="password" placeholder="Password Input"></ion-input>
    </ion-item>

    <ion-item>
-      <ion-label primary floating>Floating Label</ion-label>
+      <ion-label color="primary" floating>Floating Label</ion-label>
      <ion-input></ion-input>
    </ion-item>

--- a/Show More
+++ b/Show More