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

chore(demos): update demos to work

Browse Source 
* chore(demos): WIP refactor gulp demos task to use SystemJS

move build files into dist/demos and comment out the AoT demos task for
right now. This makes both `gulp demos` and `gulp demos.watch`work
again.

references #8411

* docs(demos): fix infinite scroll demo

* chore(demos): move old demos task to demos.prod

update the demos file with shared tasks, include the shared css

* docs(demos): fix API demos to use correct styles

* chore(demos): remove the main.ts files from each demo

* chore(demos): add prod template and constant

* chore(demos): remove tsconfig and package from demos

* chore(demos): update app.module path to ionic

* chore(demos): update app.module path to ionic

* chore(demos): update prod task for demos to work with AoT

also puts the demo build files into dist/ instead of the src directory

* docs(demos): update deploy and docs tasks for new build

* docs(scripts): update demos README

* chore(demos): fix path for prod build
This commit is contained in:
Brandy Carney
2016-12-13 13:56:22 -05:00
committed by Adam Bradley
parent 3701ee5e37
commit 1f83cde78b
182 changed files with 2946 additions and 3626 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
demos/package.json
View File

@ -1,28 +0,0 @@
{
"name": "ionic-demos",
"private": true,
"version": "1.0.0",
"description": "ionic demos",
"author": "Ionic Team <hi@ionic.io> (http://ionic.io)",
"license": "MIT",
"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/compiler-cli": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/platform-server": "2.2.1",
"@ionic/storage": "^1.1.6",
"ionic-angular": "nightly",
"ionic-native": "2.0.3",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "~0.6.26"
},
"devDependencies": {
"typescript": "^2.0.3"
}
}

64
demos/src/action-sheet/app.component.ts
View File

@ -1,64 +0,0 @@
import { Component } from '@angular/core';
import { ActionSheetController, Platform } from 'ionic-angular';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
constructor(public alertCtrl: ActionSheetController, public platform: Platform) { }
present() {
let actionSheet = this.alertCtrl.create({
title: 'Albums',
buttons: [
{
text: 'Delete',
role: 'destructive',
icon: !this.platform.is('ios') ? 'trash' : null,
handler: () => {
console.log('Delete clicked');
}
},
{
text: 'Share',
icon: !this.platform.is('ios') ? 'share' : null,
handler: () => {
console.log('Share clicked');
}
},
{
text: 'Play',
icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null,
handler: () => {
console.log('Play clicked');
}
},
{
text: 'Favorite',
icon: !this.platform.is('ios') ? 'heart-outline' : null,
handler: () => {
console.log('Favorite clicked');
}
},
{
text: 'Cancel',
role: 'cancel', // will always sort to be on the bottom
icon: !this.platform.is('ios') ? 'close' : null,
handler: () => {
console.log('Cancel clicked');
}
}
]
});
actionSheet.present();
}
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}

68
demos/src/action-sheet/app.module.ts
View File

@ -1,6 +1,68 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage } from './app.component';
import { Component, NgModule } from '@angular/core';
import { ActionSheetController, IonicApp, IonicModule, Platform } from '../';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
constructor(public alertCtrl: ActionSheetController, public platform: Platform) { }
present() {
let actionSheet = this.alertCtrl.create({
title: 'Albums',
buttons: [
{
text: 'Delete',
role: 'destructive',
icon: !this.platform.is('ios') ? 'trash' : null,
handler: () => {
console.log('Delete clicked');
}
},
{
text: 'Share',
icon: !this.platform.is('ios') ? 'share' : null,
handler: () => {
console.log('Share clicked');
}
},
{
text: 'Play',
icon: !this.platform.is('ios') ? 'arrow-dropright-circle' : null,
handler: () => {
console.log('Play clicked');
}
},
{
text: 'Favorite',
icon: !this.platform.is('ios') ? 'heart-outline' : null,
handler: () => {
console.log('Favorite clicked');
}
},
{
text: 'Cancel',
role: 'cancel', // will always sort to be on the bottom
icon: !this.platform.is('ios') ? 'close' : null,
handler: () => {
console.log('Cancel clicked');
}
}
]
});
actionSheet.present();
}
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}
@NgModule({
declarations: [

18
demos/src/action-sheet/index.html
View File

@ -1,18 +0,0 @@
<!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>

218
demos/src/alert/app.component.ts
View File

@ -1,218 +0,0 @@
import { Component } from '@angular/core';
import { AlertController } from 'ionic-angular';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
testRadioOpen = false;
testRadioResult: any;
testCheckboxOpen = false;
testCheckboxResult: any;
constructor(public alertCtrl: AlertController) {}
doAlert() {
let alert = this.alertCtrl.create({
title: 'New Friend!',
subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
buttons: ['Ok']
});
alert.present();
}
doConfirm() {
let alert = this.alertCtrl.create({
title: 'Use this lightsaber?',
message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
buttons: [
{
text: 'Disagree',
handler: () => {
console.log('Disagree clicked');
}
},
{
text: 'Agree',
handler: () => {
console.log('Agree clicked');
}
}
]
});
alert.present();
}
doPrompt() {
let alert = this.alertCtrl.create({
title: 'Login',
message: 'Enter a name for this new album you\'re so keen on adding',
inputs: [
{
name: 'title',
placeholder: 'Title'
},
],
buttons: [
{
text: 'Cancel',
handler: (data: any) => {
console.log('Cancel clicked');
}
},
{
text: 'Save',
handler: (data: any) => {
console.log('Saved clicked');
}
}
]
});
alert.present();
}
doRadio() {
let alert = this.alertCtrl.create();
alert.setTitle('Lightsaber color');
alert.addInput({
type: 'radio',
label: 'Blue',
value: 'blue',
checked: true
});
alert.addInput({
type: 'radio',
label: 'Green',
value: 'green'
});
alert.addInput({
type: 'radio',
label: 'Red',
value: 'red'
});
alert.addInput({
type: 'radio',
label: 'Yellow',
value: 'yellow'
});
alert.addInput({
type: 'radio',
label: 'Purple',
value: 'purple'
});
alert.addInput({
type: 'radio',
label: 'White',
value: 'white'
});
alert.addInput({
type: 'radio',
label: 'Black',
value: 'black'
});
alert.addButton('Cancel');
alert.addButton({
text: 'Ok',
handler: (data: any) => {
console.log('Radio data:', data);
this.testRadioOpen = false;
this.testRadioResult = data;
}
});
alert.present();
}
doCheckbox() {
let alert = this.alertCtrl.create();
alert.setTitle('Which planets have you visited?');
alert.addInput({
type: 'checkbox',
label: 'Alderaan',
value: 'value1',
checked: true
});
alert.addInput({
type: 'checkbox',
label: 'Bespin',
value: 'value2'
});
alert.addInput({
type: 'checkbox',
label: 'Coruscant',
value: 'value3'
});
alert.addInput({
type: 'checkbox',
label: 'Endor',
value: 'value4'
});
alert.addInput({
type: 'checkbox',
label: 'Hoth',
value: 'value5'
});
alert.addInput({
type: 'checkbox',
label: 'Jakku',
value: 'value6'
});
alert.addInput({
type: 'checkbox',
label: 'Naboo',
value: 'value6'
});
alert.addInput({
type: 'checkbox',
label: 'Takodana',
value: 'value6'
});
alert.addInput({
type: 'checkbox',
label: 'Tatooine',
value: 'value6'
});
alert.addButton('Cancel');
alert.addButton({
text: 'Okay',
handler: (data: any) => {
console.log('Checkbox data:', data);
this.testCheckboxOpen = false;
this.testCheckboxResult = data;
}
});
alert.present();
}
}
@Component({
template: `<ion-nav [root]="root"></ion-nav>`
})
export class ApiDemoApp {
root = ApiDemoPage;
}

220
demos/src/alert/app.module.ts
View File

@ -1,6 +1,220 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage } from './app.component';
import { Component, NgModule } from '@angular/core';
import { AlertController, IonicApp, IonicModule } from '../';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
testRadioOpen = false;
testRadioResult: any;
testCheckboxOpen = false;
testCheckboxResult: any;
constructor(public alertCtrl: AlertController) {}
doAlert() {
let alert = this.alertCtrl.create({
title: 'New Friend!',
subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
buttons: ['Ok']
});
alert.present();
}
doConfirm() {
let alert = this.alertCtrl.create({
title: 'Use this lightsaber?',
message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
buttons: [
{
text: 'Disagree',
handler: () => {
console.log('Disagree clicked');
}
},
{
text: 'Agree',
handler: () => {
console.log('Agree clicked');
}
}
]
});
alert.present();
}
doPrompt() {
let alert = this.alertCtrl.create({
title: 'Login',
message: 'Enter a name for this new album you\'re so keen on adding',
inputs: [
{
name: 'title',
placeholder: 'Title'
},
],
buttons: [
{
text: 'Cancel',
handler: (data: any) => {
console.log('Cancel clicked');
}
},
{
text: 'Save',
handler: (data: any) => {
console.log('Saved clicked');
}
}
]
});
alert.present();
}
doRadio() {
let alert = this.alertCtrl.create();
alert.setTitle('Lightsaber color');
alert.addInput({
type: 'radio',
label: 'Blue',
value: 'blue',
checked: true
});
alert.addInput({
type: 'radio',
label: 'Green',
value: 'green'
});
alert.addInput({
type: 'radio',
label: 'Red',
value: 'red'
});
alert.addInput({
type: 'radio',
label: 'Yellow',
value: 'yellow'
});
alert.addInput({
type: 'radio',
label: 'Purple',
value: 'purple'
});
alert.addInput({
type: 'radio',
label: 'White',
value: 'white'
});
alert.addInput({
type: 'radio',
label: 'Black',
value: 'black'
});
alert.addButton('Cancel');
alert.addButton({
text: 'Ok',
handler: (data: any) => {
console.log('Radio data:', data);
this.testRadioOpen = false;
this.testRadioResult = data;
}
});
alert.present();
}
doCheckbox() {
let alert = this.alertCtrl.create();
alert.setTitle('Which planets have you visited?');
alert.addInput({
type: 'checkbox',
label: 'Alderaan',
value: 'value1',
checked: true
});
alert.addInput({
type: 'checkbox',
label: 'Bespin',
value: 'value2'
});
alert.addInput({
type: 'checkbox',
label: 'Coruscant',
value: 'value3'
});
alert.addInput({
type: 'checkbox',
label: 'Endor',
value: 'value4'
});
alert.addInput({
type: 'checkbox',
label: 'Hoth',
value: 'value5'
});
alert.addInput({
type: 'checkbox',
label: 'Jakku',
value: 'value6'
});
alert.addInput({
type: 'checkbox',
label: 'Naboo',
value: 'value6'
});
alert.addInput({
type: 'checkbox',
label: 'Takodana',
value: 'value6'
});
alert.addInput({
type: 'checkbox',
label: 'Tatooine',
value: 'value6'
});
alert.addButton('Cancel');
alert.addButton({
text: 'Okay',
handler: (data: any) => {
console.log('Checkbox data:', data);
this.testCheckboxOpen = false;
this.testCheckboxResult = data;
}
});
alert.present();
}
}
@Component({
template: `<ion-nav [root]="root"></ion-nav>`
})
export class ApiDemoApp {
root = ApiDemoPage;
}
@NgModule({
declarations: [

6
demos/src/alert/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

14
demos/src/button/app.component.ts
View File

@ -1,14 +0,0 @@
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;
}

20
demos/src/button/app.module.ts
View File

@ -1,6 +1,20 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage } from './app.component';
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule } from '../';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}
@NgModule({
declarations: [

18
demos/src/button/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/button/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

32
demos/src/checkbox/app.component.ts
View File

@ -1,32 +0,0 @@
import { Component } from '@angular/core';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
data = {
jon: true,
daenerys: true,
arya: false,
tyroin: false,
sansa: true,
khal: false,
cersei: true,
stannis: true,
petyr: false,
hodor: true,
catelyn: true,
bronn: false
};
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}

37
demos/src/checkbox/app.module.ts
View File

@ -1,6 +1,37 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage } from './app.component';
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule } from '../';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
data = {
jon: true,
daenerys: true,
arya: false,
tyroin: false,
sansa: true,
khal: false,
cersei: true,
stannis: true,
petyr: false,
hodor: true,
catelyn: true,
bronn: false
};
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}
@NgModule({
declarations: [

18
demos/src/checkbox/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/checkbox/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

18
demos/src/chip/app.component.ts
View File

@ -1,18 +0,0 @@
import { Component } from '@angular/core';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
delete(chip: Element) {
chip.remove();
}
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}

23
demos/src/chip/app.module.ts
View File

@ -1,6 +1,23 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage } from './app.component';
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule } from '../';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
delete(chip: Element) {
chip.remove();
}
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}
@NgModule({
declarations: [

18
demos/src/chip/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/chip/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

143
demos/src/config/app.component.ts
View File

@ -1,143 +0,0 @@
import { Component } from '@angular/core';
import { Platform, NavController } from 'ionic-angular';
if (!window.localStorage) {
Object.defineProperty(window, 'localStorage', new (function () {
var aKeys = [], oStorage = {};
Object.defineProperty(oStorage, 'getItem', {
value: function (sKey) { return sKey ? this[sKey] : null; },
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, 'key', {
value: function (nKeyId) { return aKeys[nKeyId]; },
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, 'setItem', {
value: function (sKey, sValue) {
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', {
get: function () { return aKeys.length; },
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, 'removeItem', {
value: function (sKey) {
if (!sKey) { return; }
document.cookie = encodeURI(sKey) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
},
writable: false,
configurable: false,
enumerable: false
});
this.get = function () {
var iThisIndx;
for (var sKey in oStorage) {
iThisIndx = aKeys.indexOf(sKey);
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 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 = decodeURI(aCouple[0])] = decodeURI(aCouple[1]);
aKeys.push(iKey);
}
}
return oStorage;
};
this.configurable = false;
this.enumerable = true;
})());
}
var CONFIG_DEMO = null;
if (window.localStorage.getItem('configDemo')) {
CONFIG_DEMO = JSON.parse(window.localStorage.getItem('configDemo'));
}
@Component({
templateUrl: 'tabs.html'
})
export class TabPage {
tabOne = ApiDemoPage;
}
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
config: any;
initialConfig: any;
constructor(public platform: Platform, public navCtrl: NavController) {
if (window.localStorage.getItem('configDemo') !== null) {
this.config = JSON.parse(window.localStorage.getItem('configDemo'));
} 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': 'bottom'
};
}
this.initialConfig = JSON.parse(JSON.stringify(this.config));
}
load() {
window.localStorage.setItem('configDemo', JSON.stringify(this.config));
window.location.reload();
}
push() {
this.navCtrl.push(PushPage);
}
}
@Component({
templateUrl: 'push-page.html'
})
export class PushPage {
constructor(public navCtrl: NavController) {}
pop() {
this.navCtrl.pop();
}
}
@Component({
template: '<ion-nav [root]="root" #content></ion-nav>'
})
export class ApiDemoApp {
root = TabPage;
}

150
demos/src/config/app.module.ts
View File

@ -1,6 +1,148 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage, PushPage, TabPage } from './app.component';
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule, Platform, NavController } from '../';
if (!window.localStorage) {
Object.defineProperty(window, 'localStorage', new (function () {
var aKeys = [], oStorage = {};
Object.defineProperty(oStorage, 'getItem', {
value: function (sKey) { return sKey ? this[sKey] : null; },
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, 'key', {
value: function (nKeyId) { return aKeys[nKeyId]; },
writable: false,
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, 'setItem', {
value: function (sKey, sValue) {
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', {
get: function () { return aKeys.length; },
configurable: false,
enumerable: false
});
Object.defineProperty(oStorage, 'removeItem', {
value: function (sKey) {
if (!sKey) { return; }
document.cookie = encodeURI(sKey) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
},
writable: false,
configurable: false,
enumerable: false
});
this.get = function () {
var iThisIndx;
for (var sKey in oStorage) {
iThisIndx = aKeys.indexOf(sKey);
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 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 = decodeURI(aCouple[0])] = decodeURI(aCouple[1]);
aKeys.push(iKey);
}
}
return oStorage;
};
this.configurable = false;
this.enumerable = true;
})());
}
var CONFIG_DEMO = null;
if (window.localStorage.getItem('configDemo')) {
CONFIG_DEMO = JSON.parse(window.localStorage.getItem('configDemo'));
}
@Component({
templateUrl: 'tabs.html'
})
export class TabPage {
tabOne = ApiDemoPage;
}
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
config: any;
initialConfig: any;
constructor(public platform: Platform, public navCtrl: NavController) {
if (window.localStorage.getItem('configDemo') !== null) {
this.config = JSON.parse(window.localStorage.getItem('configDemo'));
} 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': 'bottom'
};
}
this.initialConfig = JSON.parse(JSON.stringify(this.config));
}
load() {
window.localStorage.setItem('configDemo', JSON.stringify(this.config));
window.location.reload();
}
push() {
this.navCtrl.push(PushPage);
}
}
@Component({
templateUrl: 'push-page.html'
})
export class PushPage {
constructor(public navCtrl: NavController) {}
pop() {
this.navCtrl.pop();
}
}
@Component({
template: '<ion-nav [root]="root" #content></ion-nav>'
})
export class ApiDemoApp {
root = TabPage;
}
@NgModule({
declarations: [
@ -10,7 +152,7 @@ import { ApiDemoApp, ApiDemoPage, PushPage, TabPage } from './app.component';
TabPage
],
imports: [
IonicModule.forRoot(ApiDemoApp)
IonicModule.forRoot(ApiDemoApp, CONFIG_DEMO)
],
bootstrap: [IonicApp],
entryComponents: [

18
demos/src/config/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/config/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

70
demos/src/datetime/app.component.ts
View File

@ -1,70 +0,0 @@
import { Component } from '@angular/core';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
wwwReleased = '1991';
netscapeReleased = '1994-12-15T13:47:20.789';
operaReleased = '1995-04-15';
webkitReleased = '1998-11-04T11:06Z';
firefoxReleased = '2002-09-23T15:03:46.789';
chromeReleased = '2008-09-02';
tokyoTime: string;
parisTime: string;
madisonTime: string;
alertTime = '10:15';
operaShortDay = [
's\u00f8n',
'man',
'tir',
'ons',
'tor',
'fre',
'l\u00f8r'
];
constructor() {
this.tokyoTime = this.calculateTime('+9');
this.parisTime = this.calculateTime('+1');
this.madisonTime = this.calculateTime('-6');
// If it is Daylight Savings Time
if (this.dst(new Date())) {
this.parisTime = this.calculateTime('+2');
this.madisonTime = this.calculateTime('-5');
}
}
calculateTime(offset) {
// create Date object for current location
let d = new Date();
// create new Date object for different city
// using supplied offset
let nd = new Date(d.getTime() + (3600000 * offset));
return nd.toISOString();
}
// Determine if the client uses DST
stdTimezoneOffset(today) {
let jan = new Date(today.getFullYear(), 0, 1);
let jul = new Date(today.getFullYear(), 6, 1);
return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
}
dst(today) {
return today.getTimezoneOffset() < this.stdTimezoneOffset(today);
}
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}

76
demos/src/datetime/app.module.ts
View File

@ -1,6 +1,76 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage } from './app.component';
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule } from '../';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
wwwReleased = '1991';
netscapeReleased = '1994-12-15T13:47:20.789';
operaReleased = '1995-04-15';
webkitReleased = '1998-11-04T11:06Z';
firefoxReleased = '2002-09-23T15:03:46.789';
chromeReleased = '2008-09-02';
tokyoTime: string;
parisTime: string;
madisonTime: string;
alertTime = '10:15';
operaShortDay = [
's\u00f8n',
'man',
'tir',
'ons',
'tor',
'fre',
'l\u00f8r'
];
constructor() {
this.tokyoTime = this.calculateTime('+9');
this.parisTime = this.calculateTime('+1');
this.madisonTime = this.calculateTime('-6');
// If it is Daylight Savings Time
if (this.dst(new Date())) {
this.parisTime = this.calculateTime('+2');
this.madisonTime = this.calculateTime('-5');
}
}
calculateTime(offset) {
// create Date object for current location
let d = new Date();
// create new Date object for different city
// using supplied offset
let nd = new Date(d.getTime() + (3600000 * offset));
return nd.toISOString();
}
// Determine if the client uses DST
stdTimezoneOffset(today) {
let jan = new Date(today.getFullYear(), 0, 1);
let jul = new Date(today.getFullYear(), 6, 1);
return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
}
dst(today) {
return today.getTimezoneOffset() < this.stdTimezoneOffset(today);
}
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}
@NgModule({
declarations: [

18
demos/src/datetime/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/datetime/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

70
demos/src/events/app.component.ts
View File

@ -1,70 +0,0 @@
import { Component, ViewChild } from '@angular/core';
import { Events, Nav } from 'ionic-angular';
@Component({
templateUrl: 'login.html'
})
export class Login {
user = {
name: 'Administrator',
username: 'admin'
};
constructor(private events: Events) {}
login() {
this.events.publish('user:login');
}
}
@Component({
templateUrl: 'logout.html'
})
export class Logout {
constructor(private events: Events) {}
logout() {
this.events.publish('user:logout');
}
}
@Component({
templateUrl: 'app.html'
})
export class ApiDemoApp {
@ViewChild(Nav) nav: Nav;
root = Login;
loggedIn = false;
loggedInPages = [
{ title: 'Logout', component: Logout }
];
loggedOutPages = [
{ title: 'Login', component: Login }
];
constructor(private events: Events) {
this.listenToLoginEvents();
}
openPage(menu, page) {
// find the nav component and set what the root page should be
// reset the nav to remove previous pages and only have this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
listenToLoginEvents() {
this.events.subscribe('user:login', () => {
this.loggedIn = true;
});
this.events.subscribe('user:logout', () => {
this.loggedIn = false;
});
}
}

75
demos/src/events/app.module.ts
View File

@ -1,6 +1,75 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, Login, Logout } from './app.component';
import { Component, NgModule, ViewChild } from '@angular/core';
import { Events, IonicApp, IonicModule, Nav } from '../';
@Component({
templateUrl: 'login.html'
})
export class Login {
user = {
name: 'Administrator',
username: 'admin'
};
constructor(private events: Events) {}
login() {
this.events.publish('user:login');
}
}
@Component({
templateUrl: 'logout.html'
})
export class Logout {
constructor(private events: Events) {}
logout() {
this.events.publish('user:logout');
}
}
@Component({
templateUrl: 'app.html'
})
export class ApiDemoApp {
@ViewChild(Nav) nav: Nav;
root = Login;
loggedIn = false;
loggedInPages = [
{ title: 'Logout', component: Logout }
];
loggedOutPages = [
{ title: 'Login', component: Login }
];
constructor(private events: Events) {
this.listenToLoginEvents();
}
openPage(menu, page) {
// find the nav component and set what the root page should be
// reset the nav to remove previous pages and only have this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
listenToLoginEvents() {
this.events.subscribe('user:login', () => {
this.loggedIn = true;
});
this.events.subscribe('user:logout', () => {
this.loggedIn = false;
});
}
}
@NgModule({
declarations: [

18
demos/src/events/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/events/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

30
demos/src/fab/app.component.ts
View File

@ -1,30 +0,0 @@
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;
}

35
demos/src/fab/app.module.ts
View File

@ -1,6 +1,35 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage } from './app.component';
import { Component, NgModule } from '@angular/core';
import { FabContainer, IonicApp, IonicModule } from '../';
@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;
}
@NgModule({
declarations: [

6
demos/src/fab/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

14
demos/src/hide-when/app.component.ts
View File

@ -1,14 +0,0 @@
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;
}

18
demos/src/hide-when/app.module.ts
View File

@ -1,18 +0,0 @@
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 {}

18
demos/src/hide-when/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/hide-when/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

61
demos/src/hide-when/page.html
View File

@ -1,61 +0,0 @@
<ion-header>
<ion-navbar>
<ion-title>HideWhen</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="hide-when-demo">
<h5 margin>Hide Icon Per Platform</h5>
<p margin>In this example we're using the <code>hideWhen</code> directive to decide whether to hide an icon based on the platform.</p>
<ion-grid>
<ion-row>
<ion-col text-center>
<ion-icon name="logo-apple" hideWhen="android,windows"></ion-icon>
</ion-col>
<ion-col>
<code> &lt;ion-icon name="logo-apple" hideWhen="android,windows"&gt;&lt;/ion-icon&gt; </code>
</ion-col>
</ion-row>
<ion-row>
<ion-col text-center>
<ion-icon name="logo-android" hideWhen="ios,windows"></ion-icon>
</ion-col>
<ion-col>
<code> &lt;ion-icon name="logo-android" hideWhen="ios,windows"&gt;&lt;/ion-icon&gt; </code>
</ion-col>
</ion-row>
<ion-row>
<ion-col text-center>
<ion-icon name="logo-windows" hideWhen="ios,android"></ion-icon>
</ion-col>
<ion-col>
<code> &lt;ion-icon name="logo-windows" hideWhen="ios,android"&gt;&lt;/ion-icon&gt; </code>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<style>
.hide-when-demo ion-col {
background: #f8f8f8;
border: 1px solid #ddd;
margin: 1%;
max-width: 48%;
flex: 0 0 48%;
min-height: 120px;
}
.hide-when-demo code {
background: #f8f8f8;
}
.hide-when-demo ion-icon {
font-size: 100px;
}
</style>

14
demos/src/icon/app.component.ts
View File

@ -1,14 +0,0 @@
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;
}

20
demos/src/icon/app.module.ts
View File

@ -1,6 +1,20 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage } from './app.component';
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule } from '../';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}
@NgModule({
declarations: [

18
demos/src/icon/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/icon/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

90
demos/src/infinite-scroll/app.component.ts
View File

@ -1,90 +0,0 @@
import { Component, Injectable } from '@angular/core';
import { InfiniteScroll } from 'ionic-angular';
/**
* Mock Data Access Object
**/
@Injectable()
export class MockProvider {
getData(): any[] {
// return mock data synchronously
let data = [];
for (var i = 0; i < 20; i++) {
data.push( this._getRandomData() );
}
return data;
}
getAsyncData(): Promise<any[]> {
// async receive mock data
return new Promise(resolve => {
setTimeout(() => {
resolve(this.getData());
}, 1000);
});
}
private _getRandomData() {
let i = Math.floor( Math.random() * this._data.length );
return this._data[i];
}
private _data = [
'Fast Times at Ridgemont High',
'Peggy Sue Got Married',
'Raising Arizona',
'Moonstruck',
'Fire Birds',
'Honeymoon in Vegas',
'Amos & Andrew',
'It Could Happen to You',
'Trapped in Paradise',
'Leaving Las Vegas',
'The Rock',
'Con Air',
'Face/Off',
'City of Angels',
'Gone in Sixty Seconds',
'The Family Man',
'Windtalkers',
'Matchstick Men',
'National Treasure',
'Ghost Rider',
'Grindhouse',
'Next',
'Kick-Ass',
'Drive Angry',
];
}
@Component({
templateUrl: 'page.html',
providers: [MockProvider]
})
export class ApiDemoApp {
items: string[];
constructor(private mockProvider: MockProvider) {
this.items = mockProvider.getData();
}
doInfinite(infiniteScroll: InfiniteScroll) {
this.mockProvider.getAsyncData().then((newData) => {
for (var i = 0; i < newData.length; i++) {
this.items.push( newData[i] );
}
infiniteScroll.complete();
if (this.items.length > 90) {
infiniteScroll.enable(false);
}
});
}
}

110
demos/src/infinite-scroll/app.module.ts
View File

@ -1,17 +1,117 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp } from './app.component';
import { Component, Injectable, NgModule } from '@angular/core';
import { InfiniteScroll, IonicApp, IonicModule } from '../';
/**
* Mock Data Access Object
**/
@Injectable()
export class MockProvider {
getData(): any[] {
// return mock data synchronously
let data = [];
for (var i = 0; i < 20; i++) {
data.push( this._getRandomData() );
}
return data;
}
getAsyncData(): Promise<any[]> {
// async receive mock data
return new Promise(resolve => {
setTimeout(() => {
resolve(this.getData());
}, 1000);
});
}
private _getRandomData() {
let i = Math.floor( Math.random() * this._data.length );
return this._data[i];
}
private _data = [
'Fast Times at Ridgemont High',
'Peggy Sue Got Married',
'Raising Arizona',
'Moonstruck',
'Fire Birds',
'Honeymoon in Vegas',
'Amos & Andrew',
'It Could Happen to You',
'Trapped in Paradise',
'Leaving Las Vegas',
'The Rock',
'Con Air',
'Face/Off',
'City of Angels',
'Gone in Sixty Seconds',
'The Family Man',
'Windtalkers',
'Matchstick Men',
'National Treasure',
'Ghost Rider',
'Grindhouse',
'Next',
'Kick-Ass',
'Drive Angry',
];
}
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
items: string[];
constructor(private mockProvider: MockProvider) {
this.items = mockProvider.getData();
}
doInfinite(infiniteScroll: InfiniteScroll) {
this.mockProvider.getAsyncData().then((newData) => {
for (var i = 0; i < newData.length; i++) {
this.items.push( newData[i] );
}
infiniteScroll.complete();
if (this.items.length > 90) {
infiniteScroll.enable(false);
}
});
}
}
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class ApiDemoApp {
rootPage = ApiDemoPage;
}
@NgModule({
declarations: [
ApiDemoApp
ApiDemoApp,
ApiDemoPage
],
imports: [
IonicModule.forRoot(ApiDemoApp)
],
bootstrap: [IonicApp],
entryComponents: [
ApiDemoApp
ApiDemoApp,
ApiDemoPage
],
providers: [
MockProvider
]
})
export class AppModule {}

18
demos/src/infinite-scroll/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/infinite-scroll/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

15
demos/src/input/app.component.ts
View File

@ -1,15 +0,0 @@
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;
}

21
demos/src/input/app.module.ts
View File

@ -1,6 +1,21 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage } from './app.component';
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule } from '../';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}
@NgModule({
declarations: [

18
demos/src/input/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/input/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

82
demos/src/item-reorder/app.component.ts
View File

@ -1,82 +0,0 @@
import { Component,ViewEncapsulation } from '@angular/core';
import { NavController, reorderArray } from 'ionic-angular';
@Component({
templateUrl: 'page.html',
encapsulation: ViewEncapsulation.None
})
export class ApiDemoPage {
songs: any[];
editButton: string = 'Edit';
editing: boolean = false;
constructor(public navCtrl: NavController) {
this.songs = [
{
title: 'Everything Beta',
band: 'Phoria',
album: 'Volition'
},
{
title: 'Hello',
band: 'Adele',
album: '25'
},
{
title: 'Bohemian Rhapsody',
band: 'Queen',
album: 'A Night at the Opera'
},
{
title: 'Don\'t Stop Believin\'',
band: 'Journey',
album: 'Escape'
},
{
title: 'Smells Like Teen Spirit',
band: 'Nirvana',
album: 'Nevermind'
},
{
title: 'All You Need Is Love',
band: 'The Beatles',
album: 'Magical Mystery Tour'
},
{
title: 'Hotel California',
band: 'The Eagles',
album: 'Hotel California'
},
{
title: 'The Hand That Feeds',
band: 'Nine Inch Nails',
album: 'With Teeth'
},
{
title: 'Who Are You',
band: 'The Who',
album: 'Who Are You'
}];
}
toggleEdit() {
this.editing = !this.editing;
if (this.editing) {
this.editButton = 'Done';
} else {
this.editButton = 'Edit';
}
}
reorderData(indexes: any) {
this.songs = reorderArray(this.songs, indexes);
}
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}

87
demos/src/item-reorder/app.module.ts
View File

@ -1,6 +1,87 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage } from './app.component';
import { Component, NgModule, ViewEncapsulation } from '@angular/core';
import { IonicApp, IonicModule, NavController, reorderArray } from '../';
@Component({
templateUrl: 'page.html',
encapsulation: ViewEncapsulation.None
})
export class ApiDemoPage {
songs: any[];
editButton: string = 'Edit';
editing: boolean = false;
constructor(public navCtrl: NavController) {
this.songs = [
{
title: 'Everything Beta',
band: 'Phoria',
album: 'Volition'
},
{
title: 'Hello',
band: 'Adele',
album: '25'
},
{
title: 'Bohemian Rhapsody',
band: 'Queen',
album: 'A Night at the Opera'
},
{
title: 'Don\'t Stop Believin\'',
band: 'Journey',
album: 'Escape'
},
{
title: 'Smells Like Teen Spirit',
band: 'Nirvana',
album: 'Nevermind'
},
{
title: 'All You Need Is Love',
band: 'The Beatles',
album: 'Magical Mystery Tour'
},
{
title: 'Hotel California',
band: 'The Eagles',
album: 'Hotel California'
},
{
title: 'The Hand That Feeds',
band: 'Nine Inch Nails',
album: 'With Teeth'
},
{
title: 'Who Are You',
band: 'The Who',
album: 'Who Are You'
}];
}
toggleEdit() {
this.editing = !this.editing;
if (this.editing) {
this.editButton = 'Done';
} else {
this.editButton = 'Edit';
}
}
reorderData(indexes: any) {
this.songs = reorderArray(this.songs, indexes);
}
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}
@NgModule({
declarations: [

18
demos/src/item-reorder/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/item-reorder/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

97
demos/src/item-sliding/app.component.ts
View File

@ -1,97 +0,0 @@
import { Component, ViewEncapsulation } from '@angular/core';
import { ItemSliding, ToastController } from 'ionic-angular';
@Component({
templateUrl: 'page.html',
encapsulation: ViewEncapsulation.None
})
export class ApiDemoPage {
chats: any[];
logins: any[];
constructor(private toastCtrl: ToastController) {
this.chats = [
{
img: './avatar-cher.png',
name: 'Cher',
message: 'Ugh. As if.',
time: '9:38 pm'
}, {
img: './avatar-dionne.png',
name: 'Dionne',
message: 'Mr. Hall was way harsh.',
time: '8:59 pm'
}, {
img: './avatar-murray.png',
name: 'Murray',
message: 'Excuse me, "Ms. Dione."',
time: 'Wed'
}];
this.logins = [
{
icon: 'logo-twitter',
name: 'Twitter',
username: 'admin',
}, {
icon: 'logo-github',
name: 'GitHub',
username: 'admin37',
}, {
icon: 'logo-instagram',
name: 'Instagram',
username: 'imanadmin',
}, {
icon: 'logo-codepen',
name: 'Codepen',
username: 'administrator',
}];
}
more(item: ItemSliding) {
console.log('More');
item.close();
}
delete(item: ItemSliding) {
console.log('Delete');
item.close();
}
mute(item: ItemSliding) {
console.log('Mute');
item.close();
}
archive(item: ItemSliding) {
this.expandAction(item, 'archiving', 'Chat was archived.');
}
download(item: ItemSliding) {
this.expandAction(item, 'downloading', 'Login was downloaded.');
}
expandAction(item: ItemSliding, action: string, text: string) {
// TODO item.setElementClass(action, true);
setTimeout(() => {
const toast = this.toastCtrl.create({
message: text
});
toast.present();
// TODO item.setElementClass(action, false);
item.close();
setTimeout(() => toast.dismiss(), 2000);
}, 1500);
}
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}

101
demos/src/item-sliding/app.module.ts
View File

@ -1,6 +1,101 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage } from './app.component';
import { Component, NgModule, ViewEncapsulation } from '@angular/core';
import { IonicApp, IonicModule, ItemSliding, ToastController } from '../';
@Component({
templateUrl: 'page.html',
encapsulation: ViewEncapsulation.None
})
export class ApiDemoPage {
chats: any[];
logins: any[];
constructor(private toastCtrl: ToastController) {
this.chats = [
{
img: './avatar-cher.png',
name: 'Cher',
message: 'Ugh. As if.',
time: '9:38 pm'
}, {
img: './avatar-dionne.png',
name: 'Dionne',
message: 'Mr. Hall was way harsh.',
time: '8:59 pm'
}, {
img: './avatar-murray.png',
name: 'Murray',
message: 'Excuse me, "Ms. Dione."',
time: 'Wed'
}];
this.logins = [
{
icon: 'logo-twitter',
name: 'Twitter',
username: 'admin',
}, {
icon: 'logo-github',
name: 'GitHub',
username: 'admin37',
}, {
icon: 'logo-instagram',
name: 'Instagram',
username: 'imanadmin',
}, {
icon: 'logo-codepen',
name: 'Codepen',
username: 'administrator',
}];
}
more(item: ItemSliding) {
console.log('More');
item.close();
}
delete(item: ItemSliding) {
console.log('Delete');
item.close();
}
mute(item: ItemSliding) {
console.log('Mute');
item.close();
}
archive(item: ItemSliding) {
this.expandAction(item, 'archiving', 'Chat was archived.');
}
download(item: ItemSliding) {
this.expandAction(item, 'downloading', 'Login was downloaded.');
}
expandAction(item: ItemSliding, action: string, text: string) {
// TODO item.setElementClass(action, true);
setTimeout(() => {
const toast = this.toastCtrl.create({
message: text
});
toast.present();
// TODO item.setElementClass(action, false);
item.close();
setTimeout(() => toast.dismiss(), 2000);
}, 1500);
}
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}
@NgModule({
declarations: [

18
demos/src/item-sliding/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/item-sliding/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

15
demos/src/item/app.component.ts
View File

@ -1,15 +0,0 @@
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;
}

20
demos/src/item/app.module.ts
View File

@ -1,6 +1,20 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage } from './app.component';
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule } from '../';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}
@NgModule({
declarations: [

18
demos/src/item/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/item/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

14
demos/src/label/app.component.ts
View File

@ -1,14 +0,0 @@
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;
}

19
demos/src/label/app.module.ts
View File

@ -1,6 +1,19 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage } from './app.component';
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule } from '../';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}
@NgModule({
declarations: [

18
demos/src/label/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/label/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

15
demos/src/list/app.component.ts
View File

@ -1,15 +0,0 @@
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;
}

21
demos/src/list/app.module.ts
View File

@ -1,6 +1,21 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage } from './app.component';
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule } from '../';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}
@NgModule({
declarations: [

18
demos/src/list/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/list/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

130
demos/src/loading/app.component.ts
View File

@ -1,130 +0,0 @@
import { Component } from '@angular/core';
import { LoadingController, NavController } from 'ionic-angular';
@Component({
templateUrl: 'page.html',
styleUrls: ['style.css']
})
export class Page1 {
constructor(public loadingCtrl: LoadingController, public navCtrl: NavController) {}
presentLoadingIos() {
let loading = this.loadingCtrl.create({
spinner: 'ios',
content: 'This is the "ios" spinner. It will dismiss after 3 seconds.',
duration: 3000
});
loading.present();
}
presentLoadingDots() {
let loading = this.loadingCtrl.create({
spinner: 'dots',
content: 'This is the "dots" spinner. It will dismiss after 3 seconds.',
duration: 3000
});
loading.present();
}
presentLoadingBubbles() {
let loading = this.loadingCtrl.create({
spinner: 'bubbles',
content: 'This is the "bubbles" spinner. It will dismiss after 3 seconds.',
duration: 3000
});
loading.present();
}
presentLoadingCircles() {
let loading = this.loadingCtrl.create({
spinner: 'circles',
content: 'This is the "circles" spinner. It will dismiss after 3 seconds.',
duration: 3000
});
loading.present();
}
presentLoadingCrescent() {
let loading = this.loadingCtrl.create({
spinner: 'crescent',
content: 'This is the "crescent" spinner. It will dismiss after 3 seconds.',
duration: 3000
});
loading.present();
}
presentLoadingDefault() {
let loading = this.loadingCtrl.create({
content: 'This is the mode specific spinner. It will dismiss after 3 seconds.',
duration: 3000
});
loading.present();
}
presentLoadingCustom() {
let loading = this.loadingCtrl.create({
spinner: 'hide',
content: `
<div class="custom-spinner-container">
<div class="custom-spinner-box"></div>
</div>
<div>This is a custom spinner. It will dismiss after 3 seconds.</div>`,
duration: 3000
});
loading.present();
}
presentLoadingText() {
let loading = this.loadingCtrl.create({
spinner: 'hide',
content: 'This has no spinner, only text. It will dismiss after 3 seconds.',
duration: 3000
});
loading.present();
}
goToPage2() {
let loading = this.loadingCtrl.create({
content: 'This will navigate to the next page and then dismiss after 3 seconds.'
});
loading.present();
setTimeout(() => {
this.navCtrl.push(Page2);
}, 1000);
setTimeout(() => {
loading.dismiss();
}, 4000);
}
}
@Component({
template: `
<ion-header>
<ion-navbar>
<ion-title>Page 2</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>This is another page!</ion-content>
`
})
export class Page2 {}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = Page1;
}

134
demos/src/loading/app.module.ts
View File

@ -1,6 +1,134 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, Page1, Page2 } from './app.component';
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule, LoadingController, NavController } from '../';
@Component({
templateUrl: 'page.html'
})
export class Page1 {
constructor(public loadingCtrl: LoadingController, public navCtrl: NavController) {}
presentLoadingIos() {
let loading = this.loadingCtrl.create({
spinner: 'ios',
content: 'This is the "ios" spinner. It will dismiss after 3 seconds.',
duration: 3000
});
loading.present();
}
presentLoadingDots() {
let loading = this.loadingCtrl.create({
spinner: 'dots',
content: 'This is the "dots" spinner. It will dismiss after 3 seconds.',
duration: 3000
});
loading.present();
}
presentLoadingBubbles() {
let loading = this.loadingCtrl.create({
spinner: 'bubbles',
content: 'This is the "bubbles" spinner. It will dismiss after 3 seconds.',
duration: 3000
});
loading.present();
}
presentLoadingCircles() {
let loading = this.loadingCtrl.create({
spinner: 'circles',
content: 'This is the "circles" spinner. It will dismiss after 3 seconds.',
duration: 3000
});
loading.present();
}
presentLoadingCrescent() {
let loading = this.loadingCtrl.create({
spinner: 'crescent',
content: 'This is the "crescent" spinner. It will dismiss after 3 seconds.',
duration: 3000
});
loading.present();
}
presentLoadingDefault() {
let loading = this.loadingCtrl.create({
content: 'This is the mode specific spinner. It will dismiss after 3 seconds.',
duration: 3000
});
loading.present();
}
presentLoadingCustom() {
let loading = this.loadingCtrl.create({
spinner: 'hide',
content: `
<div class="loading-custom-spinner-container">
<div class="loading-custom-spinner-box"></div>
</div>
<div>This is a custom spinner. It will dismiss after 3 seconds.</div>`,
duration: 3000
});
loading.present();
}
presentLoadingText() {
let loading = this.loadingCtrl.create({
spinner: 'hide',
content: 'This has no spinner, only text. It will dismiss after 3 seconds.',
duration: 3000
});
loading.present();
}
goToPage2() {
let loading = this.loadingCtrl.create({
content: 'This will navigate to the next page and then dismiss after 3 seconds.'
});
loading.present();
setTimeout(() => {
this.navCtrl.push(Page2);
}, 1000);
setTimeout(() => {
loading.dismiss();
}, 4000);
}
}
@Component({
template: `
<ion-header>
<ion-navbar>
<ion-title>Page 2</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>This is another page!</ion-content>
`
})
export class Page2 {}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = Page1;
}
@NgModule({
declarations: [

18
demos/src/loading/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/loading/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

59
demos/src/loading/style.css
View File

@ -1,59 +0,0 @@
.custom-spinner-container {
position: relative;
display: inline-block;
box-sizing: border-box;
width: 100%;
margin-bottom: 20px;
}
.custom-spinner-box {
margin: 0 auto;
position: relative;
box-sizing: border-box;
border: 4px solid #000;
width: 60px;
height: 60px;
animation: spin 3s infinite linear;
}
.custom-spinner-box:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
border: 4px solid #000;
width: 40px;
height: 40px;
animation: pulse 1.5s infinite ease;
}
.wp .custom-spinner-box,
.wp .custom-spinner-box:before {
border-color: #fff;
}
@-webkit-keyframes pulse {
50% {
border-width: 20px;
}
}
@keyframes pulse {
50% {
border-width: 20px;
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

33
demos/src/menu/app.component.ts
View File

@ -1,33 +0,0 @@
import { Component } from '@angular/core';
import { MenuController } from 'ionic-angular';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
activeMenu: string;
constructor(public menu: MenuController) {
this.menu1Active();
}
menu1Active() {
this.activeMenu = 'menu1';
this.menu.enable(true, 'menu1');
this.menu.enable(false, 'menu2');
}
menu2Active() {
this.activeMenu = 'menu2';
this.menu.enable(false, 'menu1');
this.menu.enable(true, 'menu2');
}
}
@Component({
templateUrl: 'app.html'
})
export class ApiDemoApp {
root = ApiDemoPage;
}

36
demos/src/menu/app.module.ts
View File

@ -1,6 +1,36 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage } from './app.component';
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule, MenuController } from '../';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
activeMenu: string;
constructor(public menu: MenuController) {
this.menu1Active();
}
menu1Active() {
this.activeMenu = 'menu1';
this.menu.enable(true, 'menu1');
this.menu.enable(false, 'menu2');
}
menu2Active() {
this.activeMenu = 'menu2';
this.menu.enable(false, 'menu1');
this.menu.enable(true, 'menu2');
}
}
@Component({
templateUrl: 'app.html'
})
export class ApiDemoApp {
root = ApiDemoPage;
}
@NgModule({
declarations: [

18
demos/src/menu/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/menu/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

49
demos/src/modal/app.component.ts
View File

@ -1,49 +0,0 @@
import { Component } from '@angular/core';
import { ModalController, NavParams, ViewController } from 'ionic-angular';
@Component({
templateUrl: 'page.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();
}
}
@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>'
})
export class ApiDemoApp {
root = ModalFirstPage;
}

52
demos/src/modal/app.module.ts
View File

@ -1,6 +1,52 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ModalContentPage, ModalFirstPage } from './app.component';
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule, ModalController, NavParams, ViewController } from '../';
@Component({
templateUrl: 'page.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();
}
}
@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>'
})
export class ApiDemoApp {
root = ModalFirstPage;
}
@NgModule({
declarations: [

18
demos/src/modal/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/modal/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

35
demos/src/nav-params/app.component.ts
View File

@ -1,35 +0,0 @@
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
myParam: string = '';
constructor(public navCtrl: NavController) {}
pushParams() {
this.navCtrl.push(PushPage, { 'myParam': this.myParam });
}
}
@Component({
templateUrl: 'push-page.html'
})
export class PushPage {
myParam: string;
constructor(params: NavParams) {
this.myParam = params.get('myParam');
}
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}

40
demos/src/nav-params/app.module.ts
View File

@ -1,6 +1,40 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage, PushPage } from './app.component';
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule, NavController, NavParams } from '../';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
myParam: string = '';
constructor(public navCtrl: NavController) {}
pushParams() {
this.navCtrl.push(PushPage, { 'myParam': this.myParam });
}
}
@Component({
templateUrl: 'push-page.html'
})
export class PushPage {
myParam: string;
constructor(params: NavParams) {
this.myParam = params.get('myParam');
}
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}
@NgModule({
declarations: [

18
demos/src/nav-params/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/nav-params/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

19
demos/src/navbar/app.component.ts
View File

@ -1,19 +0,0 @@
import { Component } from '@angular/core';
// Use the toolbar demo but pass in the demo name to change the title
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
demo = 'Navbar';
favorites = 'recent';
apps = 'free';
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}

24
demos/src/navbar/app.module.ts
View File

@ -1,6 +1,24 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage } from './app.component';
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule } from '../';
// Use the toolbar demo but pass in the demo name to change the title
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
demo = 'Navbar';
favorites = 'recent';
apps = 'free';
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}
@NgModule({
declarations: [

18
demos/src/navbar/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/navbar/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

44
demos/src/navigation/app.component.ts
View File

@ -1,44 +0,0 @@
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
let pageNum = 2;
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
constructor(public navCtrl: NavController) {}
push() {
this.navCtrl.push(PushPage);
}
}
@Component({
templateUrl: 'push-page.html'
})
export class PushPage {
pageNum = pageNum;
constructor(public navCtrl: NavController) {}
push() {
pageNum++;
this.navCtrl.push(PushPage);
}
pop() {
if (pageNum > 2) {
pageNum--;
}
this.navCtrl.pop();
}
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}

49
demos/src/navigation/app.module.ts
View File

@ -1,6 +1,49 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage, PushPage } from './app.component';
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule, NavController } from '../';
let pageNum = 2;
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
constructor(public navCtrl: NavController) {}
push() {
this.navCtrl.push(PushPage);
}
}
@Component({
templateUrl: 'push-page.html'
})
export class PushPage {
pageNum = pageNum;
constructor(public navCtrl: NavController) {}
push() {
pageNum++;
this.navCtrl.push(PushPage);
}
pop() {
if (pageNum > 2) {
pageNum--;
}
this.navCtrl.pop();
}
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}
@NgModule({
declarations: [

18
demos/src/navigation/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/navigation/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

25
demos/src/platform/app.component.ts
View File

@ -1,25 +0,0 @@
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
isIos: boolean;
isAndroid: boolean;
isWindows: boolean;
constructor(platform: Platform) {
this.isIos = platform.is('ios');
this.isAndroid = platform.is('android');
this.isWindows = platform.is('windows');
}
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}

29
demos/src/platform/app.module.ts
View File

@ -1,6 +1,29 @@
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { ApiDemoApp, ApiDemoPage } from './app.component';
import { Component, NgModule } from '@angular/core';
import { IonicApp, IonicModule, Platform } from '../';
@Component({
templateUrl: 'page.html'
})
export class ApiDemoPage {
isIos: boolean;
isAndroid: boolean;
isWindows: boolean;
constructor(platform: Platform) {
this.isIos = platform.is('ios');
this.isAndroid = platform.is('android');
this.isWindows = platform.is('windows');
}
}
@Component({
template: '<ion-nav [root]="root"></ion-nav>'
})
export class ApiDemoApp {
root = ApiDemoPage;
}
@NgModule({
declarations: [

18
demos/src/platform/index.html
View File

@ -1,18 +0,0 @@
<!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>

6
demos/src/platform/main.ts
View File

@ -1,6 +0,0 @@
import { platformBrowser } from '@angular/platform-browser';
import { enableProdMode } from '@angular/core';
import { AppModuleNgFactory } from './app.module.ngfactory';
enableProdMode();
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

Some files were not shown because too many files have changed in this diff Show More