ionic UI(2)ionic2 framework - TypeScript - tutorial

ionic UI(2)ionic2 framework - TypeScript - tutorial

1 Basic ENV
> node --version
v4.4.0

> npm install -g cordova

> npm install -g ionic

>npm install -g ios-sim
> npm install -g ios-deploy

> cordova --version
6.0.0

> ionic --version
1.7.14

That is ionic 1 I guess. Let me try with ionic 2.
> npm install -g ionic@beta

Check the version
> ionic --version
2.0.0-beta.19

2 Start a Sample Project
> ionic start cutepuppypics --v2

After create this project, we can easily start the web console version.
> ionic serve

http://localhost:8100/

Build for iOS
> ionic platform add ios

> ionic emulate ios

And we can change the [window] —> [Scala] to adjust the size of the window

Build the Android
> ionic platform add android

I have Genymotion there, and I have a device running there.

>ionic run android

3 Start from the Basic
following this document
http://ionicframework.com/docs/v2/getting-started/tutorial/

Create a new project with tutorial
> ionic start myionic2project tutorial --v2

Start the app in the browser
> ionic serve

Project Structure
www/index.html main entry point for the app.
<ion-app></ion-app>

<script src="cordova.js"></script>
<script src="build/js/app.bundle.js"></script>

app.bundle.js is a concatenated file containing ionic, angularJS and all the app’s Javascripts.

app/app.js
We can use TypeScript here.

This command can create the TypeScript Sample.
> start myionic2project2 tutorial --v2 --ts

4 TypeScript
http://www.typescriptlang.org/

Install TypeScript under NPM env
> npm install -g typescript

> cat greeter.ts
function greeter(person) {
return "Hello," + person;
}

var user = "Carl Luo";
document.body.innerHTML = greeter(user);

Compile the TypeScript Codes
> tsc greeter.ts

If we made something wrong in the TS file, it will throw exceptions during compiling.
> tsc greeter.ts
greeter.ts(5,1): error TS2304: Cannot find name 'adfasdf'.

Some benefit from TypeScript

Type for the Arguments
> cat greeter.ts
function greeter(person: String) {
return "Hello," + person;
}

//var user = "Carl Luo";
var user = 3;
document.body.innerHTML = greeter(user);

> tsc greeter.ts
greeter.ts(7,35): error TS2345: Argument of type 'number' is not assignable to parameter of type 'String'.

Define the Interface as We Needed
> cat greeter.ts
interface Person {
firstname: string;
lastname: string;
}

function greeter(person: Person) {
return "Hello, " + person.firstname + " " + person.lastname;
}

var user = {firstname: "Carl", lastname: "User"} ;

document.body.innerHTML = greeter(user);

The generated JS will be:
> cat greeter.js
function greeter(person) {
return "Hello, " + person.firstname + " " + person.lastname;
}
var user = { firstname: "Carl", lastname: "User" };
document.body.innerHTML = greeter(user);

Add class and constructor
interface Person {
firstname: string;
lastname: string;
}

class Student {
fullname: string;
constructor(public firstname, public middleinitial, public lastname) {
this.fullname = firstname + " " + middleinitial + " " + lastname;

}
}

function greeter(person: Person) {
return "Hello, " + person.firstname + " " + person.lastname;
}

var user = new Student("Carl", "H.", "Luo");
document.body.innerHTML = greeter(user);

Handbook
http://www.typescriptlang.org/Handbook

Language
https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md

References:
http://sillycat.iteye.com/admin/blogs/2284701

http://ionicframework.com/docs/components/#header

https://github.com/ccoenraets/ioconf

https://github.com/loicknuchel/ionic-starter

http://ionicframework.com/docs/v2/native/Camera/

ionic framework
http://captaindanko.blogspot.com/2015/11/ionic-app-with-restful-backend-part-1.html

http://captaindanko.blogspot.com/2015/11/ionic-app-with-restful-backend-part-2.html

https://github.com/cptdanko/IonicAppWithRestBackend

angular2.0
https://angular.io/