ionic UI(1)Introduction

ionic UI(1)Introduction

1 Installation
Make Sure Installed nodeJS 4.x
> node --version
v4.2.2

> npm install -g cordova
> npm install -g ionic
> npm install -g ios-sim

Create the application
> ionic start smart-fisher tabs
Setup this project to use Sass: ionic setup sass
Develop in the browser with live reload: ionic serve
Add a platform (ios or Android): ionic platform add ios [android]
Build your app: ionic build <PLATFORM>
Simulate your app: ionic emulate <PLATFORM>
Run your app on a device: ionic run <PLATFORM>
Package an app using Ionic package service: ionic package <MODE> <PLATFORM>

For iOS
> ionic platform add ios
> ionic build ios
> ionic emulate ios

It is using iphone6 simulator and the window is small.
Check the emulator list
> os-sim showdevicetypes
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, tvOS 9.1
Apple-Watch-38mm, watchOS 2.1
Apple-Watch-42mm, watchOS 2.1

> ionic emulate ios --target="iPhone-6"

> vi  /Users/carl/work/jobs/fishing-record/smart-fisher/platforms/ios/cordova/lib/run.js
The content in that file is as follow:
    var validTargets = ['iPhone-4s', 'iPhone-5', 'iPhone-5s', 'iPhone-6-Plus', 'iPhone-6',
        'iPad-2', 'iPad-Retina', 'iPad-Air', 'Resizable-iPhone', 'Resizable-iPad'];

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

For Android
> ionic platform add android
> ionic build android

Create an image
> /Users/carl/Library/Android/sdk/tools/android avd
Or I am using Genymotion which is much and much faster.

I start the emulator myself and ionic will look genymotion as a real device.
> ionic run android

Start the webpage to develop
> ionic serve --lab

Visit this page
http://localhost:8100/ionic-lab

Or I can start from the sidemenu sample
> ionic start smart-fisher sidemenu

This document is really great
http://coenraets.org/blog/2014/10/ionic-tutorial-and-sample-application/

I will follow this document
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

sample 2
http://coenraets.org/blog/2014/10/ionic-tutorial-and-sample-application/

sample 3
https://devdactic.com/simple-login-example-with-ionic-and-angularjs/

meteor + angularJS + angular material
https://material.angularjs.org/latest/demo/checkbox

For just UI
https://github.com/swiip/generator-gulp-angular#readme
? Existing .yo-rc configuration found, would you like to use it? No
? Would you like to use a REST resource library? None, $http is enough!
? Would you like to use a router? UI Router, flexible routing with nested views
? Which UI framework do you want? Bootstrap, the most popular HTML, CSS, and JS framework
? How do you want to implement your Bootstrap components? Angular UI Bootstrap, Bootstrap components written in pure AngularJS by the AngularUI Team
? Which CSS preprocessor do you want? Sass (Node), Node.js binding to libsass, the C version of the popular stylesheet preprocessor, Sass.
? Which JS preprocessor do you want? None, I like to code in standard JavaScript.
? Which HTML template engine would you want? None, I like to code in standard HTML.

Local storage
http://learn.ionicframework.com/formulas/localstorage/

backend service
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