diff --git a/demos/action-menu/index.ts b/demos/action-menu/index.ts
new file mode 100644
index 0000000000..776ca6a9e1
--- /dev/null
+++ b/demos/action-menu/index.ts
@@ -0,0 +1,41 @@
+import {App, ActionMenu} from 'ionic/ionic';
+
+
+@App({
+ templateUrl: 'main.html'
+})
+class IonicApp {
+
+ constructor(actionMenu: ActionMenu) {
+ this.actionMenu = actionMenu;
+ }
+
+ openMenu() {
+
+ this.actionMenu.open({
+ 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(actionMenuRef => {
+ this.actionMenuRef = actionMenuRef;
+ });
+
+ }
+
+}
diff --git a/demos/action-menu/main.html b/demos/action-menu/main.html
new file mode 100644
index 0000000000..ad6b69032a
--- /dev/null
+++ b/demos/action-menu/main.html
@@ -0,0 +1,3 @@
+
+
+
diff --git a/demos/aside/index.ts b/demos/aside/index.ts
new file mode 100644
index 0000000000..126d3a0ffa
--- /dev/null
+++ b/demos/aside/index.ts
@@ -0,0 +1,36 @@
+import {App, IonicApp, IonicView} from 'ionic/ionic';
+
+
+@IonicView({templateUrl: 'page1.html'})
+class Page1 {}
+
+
+@IonicView({templateUrl: 'page2.html'})
+class Page2 {}
+
+
+@App({
+ templateUrl: 'main.html'
+})
+class E2EApp {
+
+ constructor(app: IonicApp) {
+ this.app = app;
+ this.rootView = Page1;
+
+ this.pages = [
+ { title: 'Page 1', component: Page1 },
+ { title: 'Page 2', component: Page2 },
+ ];
+ }
+
+ openPage(aside, page) {
+ // close the menu when clicking a link from the aside
+ aside.close();
+
+ // Reset the content nav to have just this page
+ // we wouldn't want the back button to show in this scenario
+ let nav = this.app.getComponent('nav');
+ nav.setRoot(page.component);
+ }
+}
diff --git a/demos/aside/main.html b/demos/aside/main.html
new file mode 100644
index 0000000000..dd64b065f5
--- /dev/null
+++ b/demos/aside/main.html
@@ -0,0 +1,25 @@
+
+
+
+
diff --git a/demos/aside/page1.html b/demos/aside/page1.html
new file mode 100644
index 0000000000..d5a69c1e30
--- /dev/null
+++ b/demos/aside/page1.html
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+ Aside
+
+
+
+
+
+
+
+ Page 1
+
+
+
+
+
+
+
+
diff --git a/demos/aside/page2.html b/demos/aside/page2.html
new file mode 100644
index 0000000000..3a27780659
--- /dev/null
+++ b/demos/aside/page2.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+ Aside
+
+
+
+
+
+
+ Page 2
+
+
+
+
+
+
diff --git a/demos/list/index.ts b/demos/list/index.ts
new file mode 100644
index 0000000000..43aed36502
--- /dev/null
+++ b/demos/list/index.ts
@@ -0,0 +1,7 @@
+import {App} from 'ionic/ionic';
+
+
+@App({
+ templateUrl: 'main.html'
+})
+class E2EApp {}
diff --git a/demos/list/main.html b/demos/list/main.html
new file mode 100644
index 0000000000..02234cf7f5
--- /dev/null
+++ b/demos/list/main.html
@@ -0,0 +1,104 @@
+List Headers
+
+
+
+
+
+
+ List Header
+
+
+
+
+ Wifi
+
+
+
+
+ Affection
+
+ Very Little
+
+
+
+
+
+ Home
+
+ Where the heart is
+
+
+
+
+
+
+
+
+
+ List Header
+
+
+
+
+ Magic
+
+
+
+
+ Star status
+
+ Super
+
+
+
+
+
+
+
+
+
+ List Header with text that is too long to fit inside the list header
+
+
+
+
+ Pizza
+
+ Always
+
+
+
+
+
+ Beer
+
+ Yes Plz
+
+
+
+
+
+ Wine
+
+ All the time
+
+
+
+
+
+
+
+
+
+
+ New List, no header, Item 1
+
+
+
+
+ New List, no header, Item 2
+
+
+
+
+
diff --git a/demos/modal/index.ts b/demos/modal/index.ts
new file mode 100644
index 0000000000..5195fd9a7c
--- /dev/null
+++ b/demos/modal/index.ts
@@ -0,0 +1,194 @@
+import {App, IonicView, IonicApp, IonicConfig, Platform} from 'ionic/ionic';
+import {Modal, ActionMenu, NavController, NavParams, Animation} from 'ionic/ionic';
+
+
+@App({
+ templateUrl: 'main.html'
+})
+class MyAppCmp {
+
+ constructor(modal: Modal, app: IonicApp, ionicConfig: IonicConfig) {
+ this.modal = modal;
+
+ console.log('platforms', Platform.platforms());
+ console.log('mode', ionicConfig.setting('mode'));
+
+ console.log('core', Platform.is('core'))
+ console.log('cordova', Platform.is('cordova'))
+ console.log('mobile', Platform.is('mobile'))
+ console.log('ipad', Platform.is('ipad'))
+ console.log('iphone', Platform.is('iphone'))
+ console.log('phablet', Platform.is('phablet'))
+ console.log('tablet', Platform.is('tablet'))
+ console.log('ios', Platform.is('ios'))
+ console.log('android', Platform.is('android'))
+ console.log('windows phone', Platform.is('windowsphone'))
+
+ console.log('isRTL', app.isRTL())
+
+ Platform.ready().then(() => {
+ console.log('Platform.ready')
+ });
+
+ }
+
+ openModal() {
+ this.modal.open(ContactModal, {
+ enterAnimation: 'my-fade-in',
+ leaveAnimation: 'my-fade-out',
+ handle: 'my-awesome-modal'
+ });
+ }
+}
+
+@IonicView({
+ template: ''
+})
+export class ContactModal {
+ constructor() {
+ console.log('ContactModal constructor')
+ this.rootView = ModalFirstPage;
+ }
+ viewLoaded() {
+ console.log('ContactModal viewLoaded');
+ }
+ viewWillEnter() {
+ console.log('ContactModal viewWillEnter');
+ }
+ viewDidEnter() {
+ console.log('ContactModal viewDidEnter');
+ }
+ viewWillLeave() {
+ console.log('ContactModal viewWillLeave');
+ }
+ viewDidLeave() {
+ console.log('ContactModal viewDidLeave');
+ }
+ viewWillUnload() {
+ console.log('ContactModal viewWillUnload');
+ }
+ viewDidUnload() {
+ console.log('ContactModal viewDidUnload');
+ }
+}
+
+
+@IonicView({
+ template: `
+ First Page Header
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+})
+export class ModalFirstPage {
+ constructor(
+ nav: NavController,
+ modal: Modal,
+ actionMenu: ActionMenu
+ ) {
+ this.nav = nav;
+ this.modal = modal;
+ this.actionMenu = actionMenu;
+ }
+
+ push() {
+ this.nav.push(ModalSecondPage, { id: 8675309, myData: [1,2,3,4] }, { animation: 'ios' });
+ }
+
+ closeModal() {
+ let modal = this.modal.get();
+ modal.close();
+ }
+
+ closeByHandeModal() {
+ let modal = this.modal.get('my-awesome-modal');
+ modal.close();
+ }
+
+ openActionMenu() {
+ this.actionMenu.open({
+ 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(actionMenuRef => {
+ this.actionMenuRef = actionMenuRef;
+ });
+ }
+}
+
+
+@IonicView({
+ template: `
+ Second Page Header
+
+
+
+
+
+
+
+ `
+})
+export class ModalSecondPage {
+ constructor(
+ nav: NavController,
+ params: NavParams
+ ) {
+ this.nav = nav;
+ this.params = params;
+
+ console.log('Second page params:', params);
+ }
+
+}
+
+
+class FadeIn extends Animation {
+ constructor(element) {
+ super(element);
+ this
+ .easing('ease')
+ .duration(450)
+ .fadeIn();
+ }
+}
+
+Animation.register('my-fade-in', FadeIn);
+
+class FadeOut extends Animation {
+ constructor(element) {
+ super(element);
+ this
+ .easing('ease')
+ .duration(250)
+ .fadeOut();
+ }
+}
+
+Animation.register('my-fade-out', FadeOut);
diff --git a/demos/modal/main.html b/demos/modal/main.html
new file mode 100644
index 0000000000..60fc6135cf
--- /dev/null
+++ b/demos/modal/main.html
@@ -0,0 +1,3 @@
+
+
+
diff --git a/demos/navigation/index.ts b/demos/navigation/index.ts
new file mode 100644
index 0000000000..c525b27b28
--- /dev/null
+++ b/demos/navigation/index.ts
@@ -0,0 +1,130 @@
+import {App, NavController} from 'ionic/ionic';
+import {IonicView, IonicConfig, IonicApp} from 'ionic/ionic';
+import {NavParams, NavController} from 'ionic/ionic';
+
+
+@IonicView({
+ template: '' +
+ '' +
+ '{{title}}' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '{{title}}
' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ ''
+})
+class FirstPage {
+ constructor(
+ nav: NavController,
+ app: IonicApp,
+ config: IonicConfig
+ ) {
+ this.nav = nav;
+ this.title = 'First Page';
+
+ this.pushPage = SecondPage;
+ this.pushData = {
+ id: 420
+ }
+ }
+
+ setItems() {
+ let items = [
+ ThirdPage
+ ];
+
+ this.nav.setItems(items);
+ }
+
+ push() {
+ this.nav.push(SecondPage, { id: 8675309, myData: [1,2,3,4] } );
+ }
+}
+
+
+@IonicView({
+ template: `
+
+ Second page
+ This page does not have a nav bar!
+
+
+
+
+
+
+ `
+})
+class SecondPage {
+ constructor(
+ nav: NavController,
+ params: NavParams
+ ) {
+ this.nav = nav;
+ this.params = params;
+
+ console.log('Second page params:', params);
+ }
+
+ setItems() {
+ let items = [
+ FirstPage,
+ ThirdPage
+ ];
+
+ this.nav.setItems(items);
+ }
+
+ pop() {
+ this.nav.pop();
+ }
+
+ push() {
+ this.nav.push(ThirdPage);
+ }
+
+}
+
+
+@IonicView({
+ template: `
+ Third Page Header
+
+
+
+
+
+
+ `
+})
+class ThirdPage {
+ constructor(
+ nav: NavController
+ ) {
+ this.nav = nav
+ }
+
+ pop() {
+ this.nav.pop()
+ }
+
+}
+
+
+
+@App({
+ template: ''
+})
+class E2EApp {
+ constructor() {
+ this.root = FirstPage;
+ }
+}
diff --git a/demos/slides/index.ts b/demos/slides/index.ts
new file mode 100644
index 0000000000..f1e754eab7
--- /dev/null
+++ b/demos/slides/index.ts
@@ -0,0 +1,47 @@
+import {App, IonicApp, Http} from 'ionic/ionic';
+
+
+@App({
+ templateUrl: 'main.html'
+})
+class MyApp {
+ constructor(private app: IonicApp) {
+ this.extraOptions = {
+ loop: true
+ };
+
+ this.images = [];
+
+ let tags = "amsterdam";
+ let FLICKR_API_KEY = '504fd7414f6275eb5b657ddbfba80a2c';
+
+ let baseUrl = 'https://api.flickr.com/services/rest/';
+
+ Http.get(baseUrl + '?method=flickr.groups.pools.getPhotos&group_id=1463451@N25&safe_search=1&api_key=' + FLICKR_API_KEY + '&jsoncallback=JSON_CALLBACK&format=json&tags=' + tags, {
+ method: 'jsonp'
+ }).then((val) => {
+ this.images = val.photos.photo.slice(0, 20);
+ setTimeout(() => {
+ this.slider.update();
+ });
+ }, (err) => {
+ alert('Unable to load images');
+ console.error(err);
+ })
+ }
+
+ onInit() {
+ setTimeout(() => {
+ this.slider = this.app.getComponent('slider');
+ console.log('Got slider', this.slider);
+ });
+ }
+
+ getImageUrl(item) {
+ return "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret + "_z.jpg";
+ }
+
+ doRefresh() {
+ console.log('DOREFRESH')
+ }
+}
diff --git a/demos/slides/main.html b/demos/slides/main.html
new file mode 100644
index 0000000000..d93835abfe
--- /dev/null
+++ b/demos/slides/main.html
@@ -0,0 +1,13 @@
+
+
+ ![]()
+
+
+