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