ionic UI
ionicUI
1Installation
MakeSureInstallednodeJS4.x
>node--version
v4.2.2
>npminstall-gcordova
>npminstall-gionic
>npminstall-gios-sim
Createtheapplication
>ionicstartsmart-fishertabs
SetupthisprojecttouseSass:ionicsetupsass
Developinthebrowserwithlivereload:ionicserve
Addaplatform(iosorAndroid):ionicplatformaddios[android]
Buildyourapp:ionicbuild<PLATFORM>
Simulateyourapp:ionicemulate<PLATFORM>
Runyourapponadevice:ionicrun<PLATFORM>
PackageanappusingIonicpackageservice:ionicpackage<MODE><PLATFORM>
ForiOS
>ionicplatformaddios
>ionicbuildios
>ionicemulateios
Itisusingiphone6simulatorandthewindowissmall.
Checktheemulatorlist
>os-simshowdevicetypes
iPhone-4s,9.2
iPhone-5,9.2
iPhone-5s,9.2
iPad-2,9.2
iPad-Retina,9.2
iPad-Air,9.2
iPhone-6,9.2
iPhone-6-Plus,9.2
iPhone-6s,9.2
iPhone-6s-Plus,9.2
iPad-Air-2,9.2
iPad-Pro,9.2
Apple-TV-1080p,tvOS9.1
Apple-Watch-38mm,watchOS2.1
Apple-Watch-42mm,watchOS2.1
>ionicemulateios--target="iPhone-6"
>vi/Users/carl/work/jobs/fishing-record/smart-fisher/platforms/ios/cordova/lib/run.js
Thecontentinthatfileisasfollow:
varvalidTargets=['iPhone-4s','iPhone-5','iPhone-5s','iPhone-6-Plus','iPhone-6',
'iPad-2','iPad-Retina','iPad-Air','Resizable-iPhone','Resizable-iPad'];
Andwecanchangethe[window]—>[Scala]toadjustthesizeofthewindow
ForAndroid
>ionicplatformaddandroid
>ionicbuildandroid
Createanimage
>/Users/carl/Library/Android/sdk/tools/androidavd
OrIamusingGenymotionwhichismuchandmuchfaster.
Istarttheemulatormyselfandionicwilllookgenymotionasarealdevice.
>ionicrunandroid
Startthewebpagetodevelop
>ionicserve--lab
Visitthispage
http://localhost:8100/ionic-lab
OrIcanstartfromthesidemenusample
>ionicstartsmart-fishersidemenu
Thisdocumentisreallygreat
http://coenraets.org/blog/2014/10/ionic-tutorial-and-sample-application/
Iwillfollowthisdocument
http://ccoenraets.github.io/ionic-tutorial/install-ionic.html
References:
http://ionicframework.com/getting-started/
http://ionicframework.com/docs/guide/preface.html
http://ionicmaterial.com/
sample
https://github.com/lanceli/cnodejs-ionic
https://github.com/diegonetto/generator-ionic
sample2
http://coenraets.org/blog/2014/10/ionic-tutorial-and-sample-application/
sample3
https://devdactic.com/simple-login-example-with-ionic-and-angularjs/
meteor+angularJS+angularmaterial
https://material.angularjs.org/latest/demo/checkbox
ForjustUI
https://github.com/swiip/generator-gulp-angular#readme
?Existing.yo-rcconfigurationfound,wouldyouliketouseit?No
?WouldyouliketouseaRESTresourcelibrary?None,$httpisenough!
?Wouldyouliketousearouter?UIRouter,flexibleroutingwithnestedviews
?WhichUIframeworkdoyouwant?Bootstrap,themostpopularHTML,CSS,andJSframework
?HowdoyouwanttoimplementyourBootstrapcomponents?AngularUIBootstrap,BootstrapcomponentswritteninpureAngularJSbytheAngularUITeam
?WhichCSSpreprocessordoyouwant?Sass(Node),Node.jsbindingtolibsass,theCversionofthepopularstylesheetpreprocessor,Sass.
?WhichJSpreprocessordoyouwant?None,IliketocodeinstandardJavaScript.
?WhichHTMLtemplateenginewouldyouwant?None,IliketocodeinstandardHTML.
Localstorage
http://learn.ionicframework.com/formulas/localstorage/
backendservice
http://learn.ionicframework.com/formulas/backend-data/
PouchDB
https://medium.com/@pinkyBrayne/offline-apps-using-ionic-framework-pouchdb-and-angularjs-44070fe39cc0#.d92fxypfu
Parse.com
https://parse.com/docs/rest/guide/
https://parse.com/docs/js/guide#data