<!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.13/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/router.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/http.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/Rx.js"></script>
<script src="config.js"></script>
<script src="https://npmcdn.com/ionic-angular@2.0.0-beta.4/bundles/ionic.system.js"></script>
<link href="https://npmcdn.com/ionic-angular@2.0.0-beta.4/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';
@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() {
}
}
SCROLL-CONTENT {
overflow-y: auto !important;
}
CODE {
background: #EFEFEF;
}
.slide-zoom {
height: 100%;
}
.slide-title {
margin-top: 2.8rem;
}
.slide-image {
max-height: 50%;
max-width: 60%;
margin: 18px 0;
}
b {
font-weight: 500;
}
p {
font-size: 1em;
}
h3 {
font-size: 1.2em;
color: #6e6e6e;
text-align: center;
margin-bottom: 15px;
}
.item-toggle {
background-color: white;
border: none;
color: rgb(50, 50, 50);
padding: 0;
}
.item-input {
background-color: white;
border-color: darkgray;
border-width: 1px !important;
border-style: solid;
color: rgb(50, 50, 50);
padding: 0;
border-radius: 10px;
}
.item-select {
background-color: white;
border-color: darkgray;
border-width: 1px !important;
border-style: solid;
color: rgb(50, 50, 50);
padding: 0;
border-radius: 10px;
}
.item-textarea {
height: 200px;
}
.item-textarea .text-input {
height: 280px;
}
System.config({
transpiler: 'typescript',
typescriptOptions: {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
//"module": "commonjs",
//"target": "es6"
}
});
import { App, Platform } from 'ionic-angular/index';
import { HomePage } from './home.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 = HomePage;
}
}
<ion-navbar *navbar>
<ion-title>
Ionic 2 Form
</ion-title>
</ion-navbar>
<ion-content class="has-header gallery-page">
<ion-slides pager>
<ion-slide>
<h2 class="slide-title">Slide 1</h2>
<p>Description</p>
</ion-slide>
<ion-slide>
<h2 class="slide-title">Slide 2</h2>
<p>Description</p>
</ion-slide>
<ion-slide>
<h2 class="slide-title">Slide 3</h2>
<p>Description</p>
</ion-slide>
<ion-slide>
<ion-list no-lines padding>
<h3>Share some information with us about yourself.</h3>
<form>
<p>First Name</p>
<ion-item>
<ion-label hidden></ion-label>
<ion-input type='text'></ion-input>
</ion-item>
<p>Surname</p>
<ion-item>
<ion-label hidden></ion-label>
<ion-input type='text'></ion-input>
</ion-item>
<p>Mobile Number</p>
<ion-item>
<ion-label hidden></ion-label>
<ion-input type='tel'></ion-input>
</ion-item>
<p>Email Address</p>
<ion-item>
<ion-label hidden></ion-label>
<ion-input type='email'></ion-input>
</ion-item>
<p>AutoComplete Test Field</p>
<ion-item>
<ion-label hidden></ion-label>
<ion-input type='text' autocomplete></ion-input>
<!-- http://www.w3schools.com/tags/att_input_autocomplete.asp -->
</ion-item>
<p>AutoCorrect Test Field</p>
<ion-item>
<ion-label hidden></ion-label>
<ion-input type='text' autocorrect></ion-input>
</ion-item>
<p>AutoComplete & AutoCorrect Test Field</p>
<ion-item>
<ion-label hidden></ion-label>
<ion-input type='text' autocorrect autocomplete></ion-input>
</ion-item>
<p>AutoCapitalize Test Field</p>
<ion-item>
<ion-label hidden></ion-label>
<ion-input type='text' autocapitalize="words"></ion-input>
<!-- https://developers.google.com/web/updates/2015/04/autocapitalize?hl=en -->
</ion-item>
<p>Year of Study</p>
<ion-item>
<ion-label hidden>Year of Study</ion-label>
<ion-select style='max-width:90%'>
<ion-option value=1>1</ion-option>
<ion-option value=2>2</ion-option>
<ion-option value=3 checked>3</ion-option>
<ion-option value=4>4</ion-option>
<ion-option value=5>5</ion-option>
<ion-option value=6>6</ion-option>
<ion-option value=7>7</ion-option>
<ion-option value=8>8</ion-option>
<ion-option value=9>9</ion-option>
<ion-option value=10>10</ion-option>
</ion-select>
</ion-item>
<ion-row style='margin-top:20px'>
<ion-item>
<ion-label>Can we contact you?</ion-label>
<ion-toggle #permission checked="true"></ion-toggle>
</ion-item>
</ion-row>
<p>Why did you decide to study Computer Science?</p>
<ion-item>
<ion-label hidden>First Name</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<p>Why did you decide to study Computer Science (proper English)?</p>
<ion-item>
<ion-label hidden>First Name</ion-label>
<ion-textarea autocomplete autocorrect></ion-textarea>
</ion-item>
</form>
<div style='margin-bottom: 30px'></div>
<button block primary>Let's Go</button>
</ion-list>
</ion-slide>
<ion-slide>
<h2 class="slide-title">Ready to Play?</h2>
<button large clear>
Continue
<ion-icon name="arrow-forward"></ion-icon>
</button>
</ion-slide>
</ion-slides>
</ion-content>
You can use this template to show examples of your Ionic 2 issue.
import { Page } from 'ionic-angular/index';
@Page({
templateUrl:"page1.html"
})
export class Page1 {
something: Object;
constructor() {
this.something.foo = 100; // undefined error.
}
}
<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>
Page 1 has an error
</p>
</div>
</ion-content>
import {Page} from 'ionic-angular/index';
import {HomePage} from './home.ts';
@Page({
templateUrl: 'tabs.html'
})
export class TabsPage {
// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root: any = HomePage;
}
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
</ion-tabs>