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
ionic UI(1)Introduction
猜你喜欢
转载自sillycat.iteye.com/blog/2284701
今日推荐
周排行