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/