diff --git a/CHANGELOG.md b/CHANGELOG.md
index dcc7ff8502..db321b6284 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -72,21 +72,22 @@ import {Popup} from 'ionic/ionic';
@Page(...)
class MyPage {
-constructor(popup: Popup) {
- this.popup = popup;
-}
-doConfirm() {
- this.popup.confirm({
- title: "Use this lightsaber?",
- subTitle: "You can't exchange lightsabers",
- template: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
- cancelText: "Disagree",
- okText: "Agree"
- }).then((result, ev) => {
- console.log('Confirmed!', result);
- }, () => {
- console.error('Not confirmed!');
- });
+ constructor(popup: Popup) {
+ this.popup = popup;
+ }
+ doConfirm() {
+ this.popup.confirm({
+ title: "Use this lightsaber?",
+ subTitle: "You can't exchange lightsabers",
+ template: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
+ cancelText: "Disagree",
+ okText: "Agree"
+ }).then((result, ev) => {
+ console.log('Confirmed!', result);
+ }, () => {
+ console.error('Not confirmed!');
+ });
+ }
}
```
@@ -97,31 +98,32 @@ import {Alert, NavController} from 'ionic/ionic';
@Page(...)
class MyPage {
-constructor(nav: NavController) {
- this.nav = nav;
-}
-doConfirm() {
- let alert = Alert.create({
- title: "Use this lightsaber?",
- subTitle: "You can't exchange lightsabers",
- body: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
- buttons: [
- {
- text: 'Disagree',
- handler: () => {
- console.log('Disagreed :(');
+ constructor(nav: NavController) {
+ this.nav = nav;
+ }
+ doConfirm() {
+ let alert = Alert.create({
+ title: "Use this lightsaber?",
+ subTitle: "You can't exchange lightsabers",
+ body: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
+ buttons: [
+ {
+ text: 'Disagree',
+ handler: () => {
+ console.log('Disagreed :(');
+ }
+ },
+ {
+ text: 'Agree',
+ handler: () => {
+ console.log('Agreed!');
+ }
}
- },
- {
- text: 'Agree',
- handler: () => {
- console.log('Agreed!');
- }
- }
- ]
- });
+ ]
+ });
- this.nav.present(alert);
+ this.nav.present(alert);
+ }
}
```
@@ -134,21 +136,23 @@ import {Popup} from 'ionic/ionic';
@Page(...)
class MyPage {
-constructor(popup: Popup) {
- this.popup = popup;
+ constructor(popup: Popup) {
+ this.popup = popup;
+ }
+ doPrompt() {
+ this.popup.prompt({
+ title: "New Album",
+ template: "Enter a name for this new album you're so keen on adding",
+ inputPlaceholder: "Album Name",
+ okText: "Save",
+ okType: "secondary"
+ }).then((name) => {
+ console.log('Name entered:', name);
+ }, () => {
+ console.error('Prompt closed');
+ });
+ }
}
-doPrompt() {
- this.popup.prompt({
- title: "New Album",
- template: "Enter a name for this new album you're so keen on adding",
- inputPlaceholder: "Album Name",
- okText: "Save",
- okType: "secondary"
- }).then((name) => {
- console.log('Name entered:', name);
- }, () => {
- console.error('Prompt closed');
- });
```
Now:
@@ -158,36 +162,37 @@ import {Alert, NavController} from 'ionic/ionic';
@Page(...)
class MyPage {
-constructor(nav: NavController) {
- this.nav = nav;
-}
-doConfirm() {
- let alert = Alert.create({
- title: "New Album",
- body: "Enter a name for this new album you're so keen on adding",
- inputs: [
- {
- name: 'album',
- placeholder: 'Album Name'
- }
- ],
- buttons: [
- {
- text: 'Cancel',
- handler: data => {
- console.log('Canceled!', data);
+ constructor(nav: NavController) {
+ this.nav = nav;
+ }
+ doConfirm() {
+ let alert = Alert.create({
+ title: "New Album",
+ body: "Enter a name for this new album you're so keen on adding",
+ inputs: [
+ {
+ name: 'album',
+ placeholder: 'Album Name'
}
- },
- {
- text: 'Ok',
- handler: data => {
- console.log('Submitted', data);
+ ],
+ buttons: [
+ {
+ text: 'Cancel',
+ handler: data => {
+ console.log('Canceled!', data);
+ }
+ },
+ {
+ text: 'Ok',
+ handler: data => {
+ console.log('Submitted', data);
+ }
}
- }
- ]
- });
+ ]
+ });
- this.nav.present(alert);
+ this.nav.present(alert);
+ }
}
```
@@ -200,33 +205,96 @@ import {ActionSheet} from 'ionic/ionic';
@Page(...)
class MyPage {
-constructor(actionSheet: ActionSheet) {
- this.actionSheet = actionSheet;
-}
-doActionMenu() {
- this.actionSheet.open({
- buttons: [
- { text: 'Archive' }
- ],
- titleText: 'Modify your album',
- cancelText: 'Cancel',
- cancel: function() {
- console.log('Canceled clicked');
- },
- destructiveText: 'Delete',
- destructiveButtonClicked: () => {
- console.log('Delete clicked');
- },
- buttonClicked: function(index) {
- if (index == 0) {
- console.log('Archive clicked');
+ constructor(actionSheet: ActionSheet) {
+ this.actionSheet = actionSheet;
+ }
+ doActionSheet() {
+ this.actionSheet.open({
+ buttons: [
+ { text: 'Archive' }
+ ],
+ titleText: 'Modify your album',
+ cancelText: 'Cancel',
+ cancel: function() {
+ console.log('Canceled clicked');
+ },
+ destructiveText: 'Delete',
+ destructiveButtonClicked: () => {
+ console.log('Delete clicked');
+ },
+ buttonClicked: function(index) {
+ if (index == 0) {
+ console.log('Archive clicked');
+ }
+ return true;
}
- return true;
- }
- }).then(actionSheetRef => {
- this.actionSheetRef = actionSheetRef;
- });
+ }).then(actionSheetRef => {
+ this.actionSheetRef = actionSheetRef;
+ });
+ }
+}
+```
+
+Now:
+
+```
+import {ActionSheet, NavController} from 'ionic/ionic';
+
+@Page(...)
+class MyPage {
+ constructor(nav: NavController) {
+ this.nav = nav;
+ }
+ doActionSheet(ev) {
+ let actionSheet = ActionSheet.create({
+ title: 'Modify your album',
+ buttons: [
+ {
+ text: 'Delete',
+ style: 'destructive',
+ handler: () => {
+ console.log('Delete clicked');
+ }
+ },
+ {
+ text: 'Archive',
+ handler: () => {
+ console.log('Archive clicked');
+ }
+ },
+ {
+ text: 'Cancel',
+ style: 'cancel',
+ handler: () => {
+ console.log('Cancel clicked');
+ }
+ },
+ ]
+ });
+
+ this.nav.present(actionSheet);
+ }
+}
+```
+
+##### Modal Refactor
+
+Was:
+
+```
+import {Modal} from 'ionic/ionic';
+
+@Page(...)
+class MyApp {
+
+ constructor(modal: Modal) {
+ this.modal = modal;
+ }
+
+ openContactModal() {
+ this.modal.open(EditUser, { userId: 8675309 });
+ }
}
```
@@ -234,41 +302,17 @@ doActionMenu() {
Now:
```
-import {Alert, NavController} from 'ionic/ionic';
+import {Modal, NavController} from 'ionic/ionic';
@Page(...)
class MyPage {
-constructor(nav: NavController) {
- this.nav = nav;
-}
-doActionMenu(ev) {
- let actionSheet = ActionSheet.create({
- title: 'Modify your album',
- buttons: [
- {
- text: 'Delete',
- style: 'destructive',
- handler: () => {
- console.log('Delete clicked');
- }
- },
- {
- text: 'Archive',
- handler: () => {
- console.log('Archive clicked');
- }
- },
- {
- text: 'Cancel',
- style: 'cancel',
- handler: () => {
- console.log('Cancel clicked');
- }
- },
- ]
- });
-
- this.nav.present(actionSheet);
+ constructor(nav: NavController) {
+ this.nav = nav;
+ }
+ presentModal() {
+ let modal = Modal.create(EditUser, { userId: 8675309 });
+ this.nav.present(modal);
+ }
}
```
diff --git a/ionic/components/item/test/sliding/index.ts b/ionic/components/item/test/sliding/index.ts
index cd1f45a908..6b8723c9b7 100644
--- a/ionic/components/item/test/sliding/index.ts
+++ b/ionic/components/item/test/sliding/index.ts
@@ -1,11 +1,11 @@
-import {App, IonicApp, Popup} from 'ionic/ionic';
+import {App, Page, IonicApp, Alert, NavController} from 'ionic/ionic';
-@App({
+@Page({
templateUrl: 'main.html'
})
-class E2EApp {
- constructor(private app: IonicApp, private popup: Popup) {
+class E2EPage {
+ constructor(private app: IonicApp, private nav: NavController) {
this.items = [];
for (let x = 0; x < 20; x++) {
this.items.push(x);
@@ -21,32 +21,54 @@ class E2EApp {
didClick(item) {
console.log('Clicked, ion-item');
- this.popup.alert({
- title: 'Clicked ion-item!'
+ let alert = Alert.create({
+ title: 'Clicked ion-item!',
+ buttons: ['Ok']
});
+ this.nav.present(alert);
}
archive(item) {
console.log('Archive, ion-item-options button', item);
- this.popup.alert({
- title: 'Archived!'
- }).then(() => {
- item.close();
+ let alert = Alert.create({
+ title: 'Archived!',
+ buttons: [{
+ text: 'Ok',
+ handler: () => {
+ item.close();
+ }
+ }]
});
+ this.nav.present(alert);
}
del(item) {
console.log('Delete ion-item-options button', item);
- this.popup.alert({
- title: 'Deleted!'
- }).then(() => {
- item.close();
+ let alert = Alert.create({
+ title: 'Deleted!',
+ buttons: [{
+ text: 'Ok',
+ handler: () => {
+ item.close();
+ }
+ }]
});
+ this.nav.present(alert);
}
reload() {
window.location.reload();
}
}
+
+
+@App({
+ template: ''
+})
+class E2EApp {
+ constructor() {
+ this.root = E2EPage;
+ }
+}
diff --git a/ionic/components/menu/test/basic/index.ts b/ionic/components/menu/test/basic/index.ts
index efa57bcee2..2cad458b9e 100644
--- a/ionic/components/menu/test/basic/index.ts
+++ b/ionic/components/menu/test/basic/index.ts
@@ -1,18 +1,21 @@
-import {App, IonicApp, Page, NavController, Popup} from 'ionic/ionic';
+import {App, IonicApp, Page, NavController, Alert} from 'ionic/ionic';
-@Page({templateUrl: 'page1.html'})
+@Page({
+ templateUrl: 'page1.html'
+})
class Page1 {
- constructor(popup: Popup) {
- this.popup = popup;
+ constructor(nav: NavController) {
+ this.nav = nav;
}
- openPopup() {
- this.popup.alert({
+ presentAlert() {
+ let alert = Alert.create({
title: "New Friend!",
- template: "Your friend, Obi wan Kenobi, just accepted your friend request!",
- cssClass: 'my-alert'
+ body: "Your friend, Obi wan Kenobi, just accepted your friend request!",
+ cssClass: 'my-alert',
+ buttons: ['Ok']
});
- console.log('openPopup');
+ this.nav.present(alert);
}
}
diff --git a/ionic/components/menu/test/basic/page1.html b/ionic/components/menu/test/basic/page1.html
index 4f83c16b60..ab07ea9b11 100644
--- a/ionic/components/menu/test/basic/page1.html
+++ b/ionic/components/menu/test/basic/page1.html
@@ -48,7 +48,7 @@
-
+
diff --git a/ionic/components/modal/test/basic/index.ts b/ionic/components/modal/test/basic/index.ts
index 365667d879..4caf62acba 100644
--- a/ionic/components/modal/test/basic/index.ts
+++ b/ionic/components/modal/test/basic/index.ts
@@ -198,28 +198,32 @@ class ModalFirstPage {
}
openActionSheet() {
- this.actionSheet.open({
+ let actionSheet = ActionSheet.create({
buttons: [
- { text: 'Share This' },
- { text: 'Move' }
- ],
- destructiveText: 'Delete',
- titleText: 'Modify your album',
- cancelText: 'Cancel',
- cancel: function() {
- console.log('Canceled');
- },
- destructiveButtonClicked: () => {
- console.log('Destructive clicked');
- },
- buttonClicked: function(index) {
- console.log('Button clicked', index);
- if(index == 1) { return false; }
- return true;
- }
- }).then(actionSheetRef => {
- this.actionSheetRef = actionSheetRef;
+ {
+ text: 'Destructive',
+ style: 'destructive',
+ handler: () => {
+ console.log('Destructive clicked');
+ }
+ },
+ {
+ text: 'Archive',
+ handler: () => {
+ console.log('Archive clicked');
+ }
+ },
+ {
+ text: 'Cancel',
+ style: 'cancel',
+ handler: () => {
+ console.log('cancel this clicked');
+ }
+ }
+ ]
});
+
+ this.nav.present(actionSheet);
}
}
diff --git a/ionic/components/nav/nav-router.ts b/ionic/components/nav/nav-router.ts
index b070111571..0e6b1dad34 100644
--- a/ionic/components/nav/nav-router.ts
+++ b/ionic/components/nav/nav-router.ts
@@ -82,7 +82,7 @@ export class NavRouter extends RouterOutlet {
if (pathRecognizer) {
// generate a componentInstruction from the view's PathRecognizer and params
- let componentInstruction = pathRecognizer.generate(viewCtrl.params.data);
+ let componentInstruction = pathRecognizer.generate(viewCtrl.data);
// create a ResolvedInstruction from the componentInstruction
let instruction = new ResolvedInstruction(componentInstruction, null);
diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts
index f6ca1a1676..158ca6370b 100644
--- a/ionic/components/tabs/tab.ts
+++ b/ionic/components/tabs/tab.ts
@@ -52,8 +52,9 @@ import {Tabs} from './tabs';
* }
* ```
*
- * In other cases, you may not want to navigate to a new component, but just call a method.
- * You can use the `(select)` event to call a method on your class.
+ * In other cases, you may not want to navigate to a new component, but just
+ * call a method. You can use the `(select)` event to call a method on your
+ * class. Below is an example of presenting a modal from one of the tabs.
*
* ```html
*
@@ -63,15 +64,15 @@ import {Tabs} from './tabs';
*
* ```ts
* export class Tabs {
- * constructor(modal: Modal){
- * this.modal = modal;
+ * constructor(nav: NavController){
+ * this.nav = nav;
* }
* chat() {
- * this.modal.open(ChatPage);
+ * let modal = Modal.create(ChatPage);
+ * this.nav.present(modal);
* }
* }
* ```
- * In this case, when we tap on the tab, we'll open a modal instead of loading a new component.
*
*
* @property {any} [root] - set the root page for this tab
diff --git a/ionic/components/tabs/test/advanced/index.ts b/ionic/components/tabs/test/advanced/index.ts
index 7d4ebb0771..a0747f10af 100644
--- a/ionic/components/tabs/test/advanced/index.ts
+++ b/ionic/components/tabs/test/advanced/index.ts
@@ -1,6 +1,6 @@
import {RouteConfig, Location} from 'angular2/router';
-import {App, Page, NavController, Modal} from 'ionic/ionic';
+import {App, Page, NavController, Modal, ViewController} from 'ionic/ionic';
@Page({
@@ -42,18 +42,22 @@ class SignIn {
Chat Modal
-
+
`
})
-class ChatPage {}
+class ChatPage {
+ constructor(viewCtrl: ViewController) {
+ this.viewCtrl = viewCtrl;
+ }
+}
@Page({
templateUrl: './tabs.html'
})
class TabsPage {
- constructor(private modal: Modal) {
+ constructor(private nav: NavController) {
this.tab1Root = Tab1Page1
this.tab2Root = Tab2Page1
this.tab3Root = Tab3Page1
@@ -61,7 +65,8 @@ class TabsPage {
chat() {
console.log('Chat clicked!');
- this.modal.open(ChatPage);
+ let modal = Modal.create(ChatPage);
+ this.nav.present(modal);
}
onTabChange() {