diff --git a/src/components/datetime/datetime.ts b/src/components/datetime/datetime.ts
index 379d2b4872..44674b22a2 100644
--- a/src/components/datetime/datetime.ts
+++ b/src/components/datetime/datetime.ts
@@ -193,14 +193,14 @@ const DATETIME_VALUE_ACCESSOR = new Provider(
* ### App Config Level
*
* ```ts
- * @App({
- * config: {
- * monthNames: ['janeiro', 'fevereiro', 'mar\u00e7o', ... ],
- * monthShortNames: ['jan', 'fev', 'mar', ... ],
- * dayNames: ['domingo', 'segunda-feira', 'ter\u00e7a-feira', ... ],
- * dayShortNames: ['dom', 'seg', 'ter', ... ],
- * }
- * })
+ * import {ionicBootstrap} from 'ionic-angular';
+ *
+ * ionicBootstrap(MyApp, customProviders, {
+ * monthNames: ['janeiro', 'fevereiro', 'mar\u00e7o', ... ],
+ * monthShortNames: ['jan', 'fev', 'mar', ... ],
+ * dayNames: ['domingo', 'segunda-feira', 'ter\u00e7a-feira', ... ],
+ * dayShortNames: ['dom', 'seg', 'ter', ... ],
+ * });
* ```
*
* ### Component Input Level
diff --git a/src/components/item/item-sliding.ts b/src/components/item/item-sliding.ts
index 08f9472239..647f2b7528 100644
--- a/src/components/item/item-sliding.ts
+++ b/src/components/item/item-sliding.ts
@@ -83,9 +83,10 @@ export class ItemSliding {
* ```
*
* ```ts
- * import {Page, ItemSliding} from 'ionic-angular';
+ * import {Component} from '@angular/core';
+ * import {ItemSliding} from 'ionic-angular';
*
- * @Page({})
+ * @Component({...})
* export class MyClass {
* constructor() { }
*
diff --git a/src/components/list/list.ts b/src/components/list/list.ts
index ef13a18823..dbd44a3fb7 100644
--- a/src/components/list/list.ts
+++ b/src/components/list/list.ts
@@ -52,10 +52,10 @@ export class List extends Ion {
* Enable the sliding items.
*
* ```ts
- * import {Page, List} from 'ionic-angular';
- * import {ViewChild} from '@angular/core';
+ * import {Component, ViewChild} from '@angular/core';
+ * import {List} from 'ionic-angular';
*
- * @Page({})
+ * @Component({...})
* export class MyClass {
* @ViewChild(List) list: List;
*
@@ -90,10 +90,10 @@ export class List extends Ion {
* Close the open sliding item.
*
* ```ts
- * import {Page, List} from 'ionic-angular';
- * import {ViewChild} from '@angular/core';
+ * import {Component, ViewChild} from '@angular/core';
+ * import {List} from 'ionic-angular';
*
- * @Page({})
+ * @Component({...})
* export class MyClass {
* @ViewChild(List) list: List;
*
diff --git a/src/components/menu/menu-controller.ts b/src/components/menu/menu-controller.ts
index d6b7114709..376efddf2b 100644
--- a/src/components/menu/menu-controller.ts
+++ b/src/components/menu/menu-controller.ts
@@ -33,9 +33,10 @@ import {MenuType} from './menu-types';
* toggling the menu.
*
* ```ts
- * import{Page, MenuController} from 'ionic-angular';
+ * import {Component} from '@angular/core';
+ * import {MenuController} from 'ionic-angular';
*
- * @Page({...})
+ * @Component({...})
* export class MyPage {
*
* constructor(private menu: MenuController) {
diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index e72833cb69..8ea3bfcc6e 100644
--- a/src/components/menu/menu.ts
+++ b/src/components/menu/menu.ts
@@ -104,17 +104,16 @@ import {isTrueProperty} from '../../util/util';
* `push` for all modes, and then set the type to `overlay` for the `ios` mode.
*
* ```ts
- * @App({
- * templateUrl: 'build/app.html',
- * config: {
- * menuType: 'push',
- * platforms: {
- * ios: {
- * menuType: 'overlay',
- * }
+ * import {ionicBootstrap} from 'ionic-angular';
+ *
+ * ionicBootstrap(MyApp, customProviders, {
+ * menuType: 'push',
+ * platforms: {
+ * ios: {
+ * menuType: 'overlay',
* }
* }
- * })
+ * });
* ```
*
*
@@ -150,13 +149,12 @@ import {isTrueProperty} from '../../util/util';
* when it is called.
*
* ```ts
- * import{Page, MenuController} from 'ionic-angular';
+ * import {Component} from '@angular/core';
+ * import {MenuController} from 'ionic-angular';
*
- * @Page({...})
+ * @Component({...})
* export class MyPage {
- * constructor(private menu: MenuController) {
- *
- * }
+ * constructor(private menu: MenuController) {}
*
* openMenu() {
* this.menu.open();
diff --git a/src/components/nav/nav-push.ts b/src/components/nav/nav-push.ts
index 01c8507ad3..6f8a7c8c46 100644
--- a/src/components/nav/nav-push.ts
+++ b/src/components/nav/nav-push.ts
@@ -21,7 +21,7 @@ import {NavRegistry} from './nav-registry';
*
* ```ts
* import {LoginPage} from 'login';
- * @Page({
+ * @Component({
* template: ``
* })
* class MyPage {
@@ -52,7 +52,7 @@ import {NavRegistry} from './nav-registry';
export class NavPush {
/**
- * @input {page} the page you want to push
+ * @input {Page} the page you want to push
*/
@Input() navPush;
diff --git a/src/components/nav/view-controller.ts b/src/components/nav/view-controller.ts
index 5365970817..b984dbaaa2 100644
--- a/src/components/nav/view-controller.ts
+++ b/src/components/nav/view-controller.ts
@@ -12,14 +12,16 @@ import {isPresent} from '../../util/util';
* Access various features and information about the current view.
* @usage
* ```ts
- * import {Page, ViewController} from 'ionic-angular';
- * @Page....
- * export class MyPage{
- * constructor(viewCtrl: ViewController){
- * this.viewCtrl = viewCtrl;
- * }
- * }
- * ```
+ * import {Component} from '@angular/core';
+ * import {ViewController} from 'ionic-angular';
+ *
+ * @Component({...})
+ * export class MyPage{
+ *
+ * constructor(public viewCtrl: ViewController) {}
+ *
+ * }
+ * ```
*/
export class ViewController {
private _cntDir: any;
diff --git a/src/components/popover/popover.ts b/src/components/popover/popover.ts
index b784db91e1..83f8fbeab3 100644
--- a/src/components/popover/popover.ts
+++ b/src/components/popover/popover.ts
@@ -60,8 +60,8 @@ const POPOVER_BODY_PADDING = 2;
*
* ```
*
- * ```js
- * @Page({})
+ * ```ts
+ * @Component({})
* class MyPage {
* constructor(private nav: NavController) {}
*
@@ -78,8 +78,8 @@ const POPOVER_BODY_PADDING = 2;
* can be anything. Below is an example of a page with items
* that close the popover on click.
*
- * ```js
- * @Page({
+ * ```ts
+ * @Component({
* template: `
*
* Ionic
diff --git a/src/components/refresher/refresher.ts b/src/components/refresher/refresher.ts
index ef05e3daf3..7fad65ffa2 100644
--- a/src/components/refresher/refresher.ts
+++ b/src/components/refresher/refresher.ts
@@ -33,7 +33,7 @@ import {CSS, pointerCoord, transitionEnd} from '../../util/dom';
* ```
*
* ```ts
- * @Page({...})
+ * @Component({...})
* export class NewsFeedPage {
*
* doRefresh(refresher) {
diff --git a/src/components/slides/slides.ts b/src/components/slides/slides.ts
index 6d70118161..513253b639 100644
--- a/src/components/slides/slides.ts
+++ b/src/components/slides/slides.ts
@@ -68,7 +68,7 @@ import {Scroll} from '../scroll/scroll';
*
* @usage
*
- * You can add slides to a `@Page` using the following template:
+ * You can add slides to a `@Component` using the following template:
*
* ```html
*
@@ -87,9 +87,10 @@ import {Scroll} from '../scroll/scroll';
* To add [options](#configuring), we will define them in `mySlideOptions` in our class `MyPage`:
*
* ```ts
- * import {Page, Slides} from 'ionic-angular';
+ * import {Component} from '@angular/core';
+ * import {Slides} from 'ionic-angular';
*
- * @Page({
+ * @Component({
* templateUrl: 'my-page.html'
* })
* class MyPage {
diff --git a/src/config/config.ts b/src/config/config.ts
index 123cbf1b57..52613e7497 100644
--- a/src/config/config.ts
+++ b/src/config/config.ts
@@ -17,66 +17,57 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
* You can set the tab placement, icon mode, animations, and more here.
*
* ```ts
- * @App({
- * template: ``
- * config: {
- * backButtonText: 'Go Back',
- * iconMode: 'ios',
- * modalEnter: 'modal-slide-in',
- * modalLeave: 'modal-slide-out',
- * tabbarPlacement: 'bottom',
- * pageTransition: 'ios',
- * }
- * })
+ * import {ionicBootstrap} from 'ionic-angular';
+ *
+ * ionicBootstrap(AppRoot, customProviders, {
+ * backButtonText: 'Go Back',
+ * iconMode: 'ios',
+ * modalEnter: 'modal-slide-in',
+ * modalLeave: 'modal-slide-out',
+ * tabbarPlacement: 'bottom',
+ * pageTransition: 'ios',
+ * });
* ```
*
- * To change the mode to always use Material Design (md).
+ *
+ * Config can be overwritten at multiple levels allowing for more granular configuration.
+ * Below is an example where an app can override any setting we want based on a platform.
*
* ```ts
- * @App({
- * template: ``
- * config: {
- * mode: 'md'
+ * import {ionicBootstrap} from 'ionic-angular';
+ *
+ * ionicBootstrap(AppRoot, customProviders, {
+ * tabbarPlacement: 'bottom',
+ * platforms: {
+ * ios: {
+ * tabbarPlacement: 'top',
* }
- * })
+ * });
* ```
*
- * Config can be overwritten at multiple levels allowing for more configuration. Taking the example from earlier, we can override any setting we want based on a platform.
- * ```ts
- * @App({
- * template: ``
- * config: {
- * tabbarPlacement: 'bottom',
- * platforms: {
- * ios: {
- * tabbarPlacement: 'top',
- * }
- * }
- * }
- * })
- * ```
- *
- * We could also configure these values at a component level. Take `tabbarPlacement`, we can configure this as a property on our `ion-tabs`.
+ * We could also configure these values at a component level. Take `tabbarPlacement`,
+ * we can configure this as a property on our `ion-tabs`.
*
* ```html
*
- *
- *
+ *
+ *
* ```
*
- * The last way we could configure is through URL query strings. This is useful for testing while in the browser.
- * Simply add `?ionic=` to the url.
+ * The last way we could configure is through URL query strings. This is useful for testing
+ * while in the browser. Simply add `?ionic=` to the url.
*
* ```bash
* http://localhost:8100/?ionicTabbarPlacement=bottom
* ```
*
- * Custom values can be added to config, and looked up at a later point in time.
+ * Any value can be added to config, and looked up at a later in any component.
*
- * ``` javascript
+ * ```js
* config.set('ios', 'favoriteColor', 'green');
+ *
* // from any page in your app:
- * config.get('favoriteColor'); // 'green'
+ * config.get('favoriteColor'); // 'green' when iOS
* ```
*
*
@@ -105,8 +96,9 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
* | `pageTransitionDelay` | `number` | The delay in milliseconds before the transition starts while changing pages. |
* | `pickerEnter` | `string` | The name of the transition to use while a picker is presented. |
* | `pickerLeave` | `string` | The name of the transition to use while a picker is dismissed. |
- * | `popoverEnter` | `string` | The name of the transition to use while a popover is presented. |
- * | `popoverLeave` | `string` | The name of the transition to use while a popover is dismissed. |
+ * | `popoverEnter` | `string` | The name of the transition to use while a popover is presented. |
+ * | `popoverLeave` | `string` | The name of the transition to use while a popover is dismissed. |
+ * | `prodMode` | `boolean` | Disable development mode, which turns off assertions and other checks within the framework. One important assertion this disables verifies that a change detection pass does not result in additional changes to any bindings (also known as unidirectional data flow).
* | `spinner` | `string` | The default spinner to use when a name is not defined. |
* | `tabbarHighlight` | `boolean` | Whether to show a highlight line under the tab when it is selected. |
* | `tabbarLayout` | `string` | The layout to use for all tabs. Available options: `"icon-top"`, `"icon-left"`, `"icon-right"`, `"icon-bottom"`, `"icon-hide"`, `"title-hide"`. |
@@ -125,7 +117,7 @@ export class Config {
*/
platform: Platform;
- constructor(config?) {
+ constructor(config?: any) {
this._s = config && isObject(config) && !isArray(config) ? config : {};
}
diff --git a/src/config/directives.ts b/src/config/directives.ts
index b499145ff3..6a040f0746 100644
--- a/src/config/directives.ts
+++ b/src/config/directives.ts
@@ -45,41 +45,9 @@ import {ShowWhen, HideWhen} from '../components/show-hide-when/show-hide-when';
* @name IONIC_DIRECTIVES
* @description
* The core Ionic directives as well as Angular's `CORE_DIRECTIVES` and `FORM_DIRECTIVES` are
- * available automatically when you bootstrap your app with the `@App` decorator. This means
- * if you are using custom components you no longer need to import `IONIC_DIRECTIVES` as they
- * are part of the `@App`s default directives.
- *
- * If you would like to **not** have them included by default, you would need to bootstrap
- * the app differently.
- *
- * Instead of starting your app like so:
- *
- * ```typescript
- * @App({
- * template: ""
- * })
- *
- * export class MyApp{
- *
- * }
- * ```
- *
- * We would use Angulars default way of bootstrap an app, import `IONIC_DIRECTIVES` and `ionicProviders`, then
- * declare `ionicProviders` as a dependencey.
- *
- * ```typescript
- * import {IONIC_DIRECTIVES, ionicProviders} from 'ionic-angular';
- * import {bootstrap} from '@angular/platform/browser';
- *
- * @Component({
- * //default selector, and theme.
- * directives: [IONIC_DIRECTIVES]
- * })
- * class App {}
- *
- * bootstrap(App,ionicProviders())
- * ```
- *
+ * available automatically when you bootstrap your app with the `ionicBootstrap`. This means
+ * if you are using custom components you do not need to import `IONIC_DIRECTIVES` as they
+ * are part of the app's default directives.
*
*
* #### Angular
diff --git a/src/platform/platform.ts b/src/platform/platform.ts
index 931f5b940c..6d57b4f819 100644
--- a/src/platform/platform.ts
+++ b/src/platform/platform.ts
@@ -19,7 +19,7 @@ import {ready, windowDimensions, flushDimensionCache} from '../util/dom';
* ```ts
* import {Platform} from 'ionic-angular';
*
- * @Page({...})
+ * @Component({...})
* export MyPage {
* constructor(platform: Platform) {
* this.platform = platform;
@@ -73,7 +73,7 @@ export class Platform {
* ```
* import {Platform} from 'ionic-angular';
*
- * @Page({...})
+ * @Component({...})
* export MyPage {
* constructor(platform: Platform) {
* this.platform = platform;
@@ -116,7 +116,7 @@ export class Platform {
* ```
* import {Platform} from 'ionic-angular';
*
- * @Page({...})
+ * @Component({...})
* export MyPage {
* constructor(platform: Platform) {
* this.platform = platform;
@@ -140,7 +140,7 @@ export class Platform {
* ```
* import {Platform} from 'ionic-angular';
*
- * @Page({...})
+ * @Component({...})
* export MyPage {
* constructor(platform: Platform) {
* this.platform = platform;
@@ -186,9 +186,10 @@ export class Platform {
* the status bar plugin, so the web should not run status bar plugin logic.
*
* ```
- * import {App, Platform} from 'ionic-angular';
+ * import {Component} from '@angular/core';
+ * import {Platform} from 'ionic-angular';
*
- * @App({...})
+ * @Component({...})
* export MyApp {
* constructor(platform: Platform) {
* platform.ready().then((readySource) => {
diff --git a/src/platform/storage/local-storage.ts b/src/platform/storage/local-storage.ts
index 1c65a63c87..78aaf853a1 100644
--- a/src/platform/storage/local-storage.ts
+++ b/src/platform/storage/local-storage.ts
@@ -15,8 +15,9 @@ import {StorageEngine} from './storage';
*
* @usage
* ```ts
- * import {Page, Storage, LocalStorage} from 'ionic-angular';
- * @Page({
+ * import {Component} from '@angular/core';
+ * import {Storage, LocalStorage} from 'ionic-angular';
+ * @Component({
* template: ``
* });
* export class MyClass{