ionic UI(2)ionic2 framework - TypeScript - tutorial

ionicUI(2)ionic2framework-TypeScript-tutorial

1BasicENV

>node--version

v4.4.0

>npminstall-gcordova

>npminstall-gionic

>npminstall-gios-sim

>npminstall-gios-deploy

>cordova--version

6.0.0

>ionic--version

1.7.14

Thatisionic1Iguess.Letmetrywithionic2.

>npminstall-gionic@beta

Checktheversion

>ionic--version

2.0.0-beta.19

2StartaSampleProject

>ionicstartcutepuppypics--v2

Aftercreatethisproject,wecaneasilystartthewebconsoleversion.

>ionicserve

http://localhost:8100/

BuildforiOS

>ionicplatformaddios

>ionicemulateios

Andwecanchangethe[window]—>[Scala]toadjustthesizeofthewindow

BuildtheAndroid

>ionicplatformaddandroid

IhaveGenymotionthere,andIhaveadevicerunningthere.

>ionicrunandroid

3StartfromtheBasic

followingthisdocument

http://ionicframework.com/docs/v2/getting-started/tutorial/

Createanewprojectwithtutorial

>ionicstartmyionic2projecttutorial--v2

Starttheappinthebrowser

>ionicserve

ProjectStructure

www/index.htmlmainentrypointfortheapp.

<ion-app></ion-app>

<scriptsrc="cordova.js"></script>

<scriptsrc="build/js/app.bundle.js"></script>

app.bundle.jsisaconcatenatedfilecontainingionic,angularJSandalltheapp’sJavascripts.

app/app.js

WecanuseTypeScripthere.

ThiscommandcancreatetheTypeScriptSample.

>startmyionic2project2tutorial--v2--ts

4TypeScript

http://www.typescriptlang.org/

InstallTypeScriptunderNPMenv

>npminstall-gtypescript

>catgreeter.ts

functiongreeter(person){

return"Hello,"+person;

}

varuser="CarlLuo";

document.body.innerHTML=greeter(user);

CompiletheTypeScriptCodes

>tscgreeter.ts

IfwemadesomethingwrongintheTSfile,itwillthrowexceptionsduringcompiling.

>tscgreeter.ts

greeter.ts(5,1):errorTS2304:Cannotfindname'adfasdf'.

SomebenefitfromTypeScript

TypefortheArguments

>catgreeter.ts

functiongreeter(person:String){

return"Hello,"+person;

}

//varuser="CarlLuo";

varuser=3;

document.body.innerHTML=greeter(user);

>tscgreeter.ts

greeter.ts(7,35):errorTS2345:Argumentoftype'number'isnotassignabletoparameteroftype'String'.

DefinetheInterfaceasWeNeeded

>catgreeter.ts

interfacePerson{

firstname:string;

lastname:string;

}

functiongreeter(person:Person){

return"Hello,"+person.firstname+""+person.lastname;

}

varuser={firstname:"Carl",lastname:"User"};

document.body.innerHTML=greeter(user);

ThegeneratedJSwillbe:

>catgreeter.js

functiongreeter(person){

return"Hello,"+person.firstname+""+person.lastname;

}

varuser={firstname:"Carl",lastname:"User"};

document.body.innerHTML=greeter(user);

Addclassandconstructor

interfacePerson{

firstname:string;

lastname:string;

}

classStudent{

fullname:string;

constructor(publicfirstname,publicmiddleinitial,publiclastname){

this.fullname=firstname+""+middleinitial+""+lastname;

}

}

functiongreeter(person:Person){

return"Hello,"+person.firstname+""+person.lastname;

}

varuser=newStudent("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://ionicframework.com/docs/components/#header

https://github.com/ccoenraets/ioconf

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

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

ionicframework

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/