<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/router.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/http.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.15/Rx.js"></script>
<script src="config.js"></script>
<script src="https://npmcdn.com/ionic-angular@2.0.0-beta.5/bundles/ionic.system.js"></script>
<link href="https://npmcdn.com/ionic-angular@2.0.0-beta.5/bundles/ionic.ios.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- this Ionic's root component and where the app will load -->
<ion-app></ion-app>
<script>
System.import('app.ts')
</script>
</body>
</html>
import { Page, NavController } from 'ionic-angular/index';
import { Page1 } from './page1.ts'
@Page({
templateUrl:"home.html"
})
export class HomePage {
greeting: string;
constructor(private nav: NavController) {
this.greeting = "Thanks for your demo and thanks for using Ionic!"
}
goToPage1() {
this.nav.push(Page1);
}
}
SCROLL-CONTENT {
overflow-y: auto !important;
}
CODE {
background: #EFEFEF;
}
.border-top-color-blue {
border-top-color: blue;
}
System.config({
transpiler: 'typescript',
typescriptOptions: {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
//"module": "commonjs",
//"target": "es6"
}
});
import { App, Platform } from 'ionic-angular/index';
import { TabsPage } from './tabs.ts';
@App({
template: '<ion-nav [root]="rootPage"></ion-nav>',
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
constructor(private platform: Platform) {
this.rootPage = TabsPage;
}
}
<ion-navbar *navbar>
<ion-title>
Ionic 2
</ion-title>
</ion-navbar>
<ion-content class="has-header">
<div padding style="text-align: center;">
<h1>Ionic 2 Test</h1>
<p>
Use this template to create a demo environment
where the issues you're facing are reproduced. This will
help us in easily reproducing your issue and solving it faster (:
</p>
<button (click)="goToPage1()">Thanks!</button>
</div>
</ion-content>
You can use this template to show examples of your Ionic 2 issue.
import {Page, Alert} from 'ionic-angular/index';
import {NavController} from "ionic-angular/index";
import {Modal} from "ionic-angular/index";
import {ViewController} from "ionic-angular/index";
@Page({
template: `
<ion-navbar *navbar>
<ion-title>Tab 1</ion-title>
</ion-navbar>
<ion-content padding class="page1">
<ion-list class="border-top-color-blue">
<ion-item class="border-top-color-blue">
<ion-card class="border-top-color-blue">
<ion-card-content class="border-top-color-blue">
<h2 color="primary">My Event</h2>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<h2 color="primary">My Event</h2>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<h2 color="primary">My Event</h2>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<h2 color="primary">My Event</h2>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<h2 color="primary">My Event</h2>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<h2 color="primary">My Event</h2>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<h2 color="primary">My Event</h2>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<h2 color="primary">My Event</h2>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<h2 color="primary">My Event</h2>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<h2 color="primary">My Event</h2>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<h2 color="primary">My Event</h2>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<h2 color="primary">My Event</h2>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<h2 color="primary">My Event</h2>
</ion-card-content>
</ion-card>
</ion-item>
</ion-list>
</ion-content>
`,
})
export class Page1 {
constructor(private nav:NavController) {
}
openModal() {
let modal = Modal.create(MyModal);
this.nav.present(modal);
}
}
@Page({
template: `
<ion-toolbar>
<ion-title>MyMocal</ion-title>
<ion-buttons end>
<button nav-pop>
<ion-icon [name]="'close'"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
<ion-content padding>
<button danger (click)="closeMe()">CloseMe</button>
</ion-content>`
})
export class MyModal {
constructor(private nav:NavController, private viewCtrl:ViewController) {
}
closeMe() {
let confirm = Alert.create({
title: 'Close Me?',
buttons: [
{
text: 'Yes',
handler: () => {
this.viewCtrl.dismiss();
}
},
{
text: 'No'
}
]
});
this.nav.present(confirm);
}
}
import {Page} from 'ionic-angular/index';
import {HomePage} from './home.ts';
import {Page1} from './page1.ts';
@Page({
templateUrl: 'tabs.html'
})
export class TabsPage {
// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root: any = Page1;
tab2Root: any = HomePage;
}
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
</ion-tabs>