javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(bootstrap): update to use ionicBootstrap

Browse Source
This commit is contained in:
Adam Bradley
2016-05-31 15:47:16 -05:00
parent e5522d2de8
commit 94e938d6b3
14 changed files with 101 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/datetime/datetime.ts
View File

@ -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

5
src/components/item/item-sliding.ts
View File

@ -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() { }
*

12
src/components/list/list.ts
View File

@ -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;
*

5
src/components/menu/menu-controller.ts
View File

@ -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) {

26
src/components/menu/menu.ts
View File

@ -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();

4
src/components/nav/nav-push.ts
View File

@ -21,7 +21,7 @@ import {NavRegistry} from './nav-registry';
*
* ```ts
* import {LoginPage} from 'login';
* @Page({
* @Component({
* template: `<button [navPush]="pushPage" [navParams]="params"></button>`
* })
* 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;

18
src/components/nav/view-controller.ts
View File

@ -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;

8
src/components/popover/popover.ts
View File

@ -60,8 +60,8 @@ const POPOVER_BODY_PADDING = 2;
* </button>
* ```
*
* ```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: `
* <ion-list>
* <ion-list-header>Ionic</ion-list-header>

2
src/components/refresher/refresher.ts
View File

@ -33,7 +33,7 @@ import {CSS, pointerCoord, transitionEnd} from '../../util/dom';
* ```
*
* ```ts
* @Page({...})
* @Component({...})
* export class NewsFeedPage {
*
* doRefresh(refresher) {

7
src/components/slides/slides.ts
View File

@ -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
* <ion-slides>
@ -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 {

78
src/config/config.ts
View File

@ -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: `<ion-nav [root]="root"></ion-nav>`
* 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: `<ion-nav [root]="root"></ion-nav>`
* 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: `<ion-nav [root]="root"></ion-nav>`
* 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
* <ion-tabs tabbarPlacement="top">
* <ion-tab tabTitle="Dash" tabIcon="pulse" [root]="tabRoot"></ion-tab>
* </ion-tabs>
* <ion-tab tabTitle="Dash" tabIcon="pulse" [root]="tabRoot"></ion-tab>
* </ion-tabs>
* ```
*
* The last way we could configure is through URL query strings. This is useful for testing while in the browser.
* Simply add `?ionic<PROPERTYNAME>=<value>` 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<PROPERTYNAME>=<value>` 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 : {};
}

38
src/config/directives.ts
View File

@ -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: "<ion-nav></ion-nav>"
* })
*
* 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

13
src/platform/platform.ts
View File

@ -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) => {

5
src/platform/storage/local-storage.ts
View File

@ -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: `<ion-content></ion-content>`
* });
* export class MyClass{