- 浏览: 2483330 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
nation:
你好,在部署Mesos+Spark的运行环境时,出现一个现象, ...
Spark(4)Deal with Mesos -
sillycat:
AMAZON Relatedhttps://www.godad ...
AMAZON API Gateway(2)Client Side SSL with NGINX -
sillycat:
sudo usermod -aG docker ec2-use ...
Docker and VirtualBox(1)Set up Shared Disk for Virtual Box -
sillycat:
Every Half an Hour30 * * * * /u ...
Build Home NAS(3)Data Redundancy -
sillycat:
3 List the Cron Job I Have>c ...
Build Home NAS(3)Data Redundancy
ionic UI
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
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
发表评论
-
Stop Update Here
2020-04-28 09:00 259I will stop update here, and mo ... -
NodeJS12 and Zlib
2020-04-01 07:44 428NodeJS12 and Zlib It works as ... -
Docker Swarm 2020(2)Docker Swarm and Portainer
2020-03-31 23:18 309Docker Swarm 2020(2)Docker Swar ... -
Docker Swarm 2020(1)Simply Install and Use Swarm
2020-03-31 07:58 319Docker Swarm 2020(1)Simply Inst ... -
Traefik 2020(1)Introduction and Installation
2020-03-29 13:52 290Traefik 2020(1)Introduction and ... -
Portainer 2020(4)Deploy Nginx and Others
2020-03-20 12:06 376Portainer 2020(4)Deploy Nginx a ... -
Private Registry 2020(1)No auth in registry Nginx AUTH for UI
2020-03-18 00:56 372Private Registry 2020(1)No auth ... -
Docker Compose 2020(1)Installation and Basic
2020-03-15 08:10 323Docker Compose 2020(1)Installat ... -
VPN Server 2020(2)Docker on CentOS in Ubuntu
2020-03-02 08:04 396VPN Server 2020(2)Docker on Cen ... -
Buffer in NodeJS 12 and NodeJS 8
2020-02-25 06:43 333Buffer in NodeJS 12 and NodeJS ... -
NodeJS ENV Similar to JENV and PyENV
2020-02-25 05:14 414NodeJS ENV Similar to JENV and ... -
Prometheus HA 2020(3)AlertManager Cluster
2020-02-24 01:47 355Prometheus HA 2020(3)AlertManag ... -
Serverless with NodeJS and TencentCloud 2020(5)CRON and Settings
2020-02-24 01:46 288Serverless with NodeJS and Tenc ... -
GraphQL 2019(3)Connect to MySQL
2020-02-24 01:48 205GraphQL 2019(3)Connect to MySQL ... -
GraphQL 2019(2)GraphQL and Deploy to Tencent Cloud
2020-02-24 01:48 390GraphQL 2019(2)GraphQL and Depl ... -
GraphQL 2019(1)Apollo Basic
2020-02-19 01:36 272GraphQL 2019(1)Apollo Basic Cl ... -
Serverless with NodeJS and TencentCloud 2020(4)Multiple Handlers and Running wit
2020-02-19 01:19 260Serverless with NodeJS and Tenc ... -
Serverless with NodeJS and TencentCloud 2020(3)Build Tree and Traverse Tree
2020-02-19 01:19 258Serverless with NodeJS and Tenc ... -
Serverless with NodeJS and TencentCloud 2020(2)Trigger SCF in SCF
2020-02-19 01:18 250Serverless with NodeJS and Tenc ... -
Serverless with NodeJS and TencentCloud 2020(1)Running with Component
2020-02-19 01:17 233Serverless with NodeJS and Tenc ...
相关推荐
看代码之前,修改样式之前, 请仔细阅读项目根目录下readme.md文件
使用ionic实现的聊天界面ui,包括:单聊,群组,个人中心,发送邮件,登陆和注册。
Zawgyi Unicode转换器Ionic本机应用程序(Android)是免费的开源Zawgyi-One和标准的缅甸Unicode转换器,适用于Android和iOS,使用Angular,Typescript,SCSS编写,并带有Ionic Native,Ionic UI组件等。 行动应用程...
在ionic官网下载的,基于html5的移动端的开发框架。
√ 使用Ionic UI组件创建复杂交互 √ 一次编译,“到处”发布(iOS和Android) √ 使用原生设备硬件以及设备特定功能 √ 涵盖完整的移动应用开发过程 读者需要了解HTML、CSS和JavaScript知识;对于AngularJS,懂...
协作员工目录 建立在 Ionic 和 Angular 之上 这是一个以分层方式维护员工目录的简单应用程序,以便用户可以跟踪直接老板和下线员工的详细信息。... 贡献是 UI 框架 - Ionic + Angular、Phone Gap、Android SDK Manager
ionic angularjs mobile ui 自适应,是我学习的例子,项目可导入eclipse中直接,需要的下载.
为 React 打造的一套 ionic 风格的可复用 UI 组件库
TutorialsPoint iBatis Ionic Jackson IP jQMobile jQUI Laravel IDEA Jenkins 教程
由于国内下载ionic4的demo资源有时候会出现奇怪的错误产生,所以我在官网下载了一份已经下载好的demo提供给大家下载!
Author Chris Griffith takes you step-by-step through Ionic’s powerful collection of UI components, and then helps you use it to build three cross-platform mobile apps. Whether you’re new to this ...
ireader##An Rss reader using ionic and localforage is a Free and open source, Ionic ...使用Ionic的UI框架使用LocalForage作为离线存储;希望对大家学习Ionic有一定引导作用;使用方法下载压缩包,或者git clone下
Ionic 调用原生的功能是基于 Cordova,Cordova 提供了使用JavaScript 调用 Native 功能,ionic 自己也封装了一套漂亮的 CSS UI 库。 2.1.3 开发工具 Visual Studio Code 2.1.4 管理工具 Git 2.2 环境搭建 2.2.1...
特征“ Vanilla” Ionic框架:照常使用Ionic UI组件(尽可能开箱即用),以展示其功能和性能。 由Auth Connect和Identity Vault支持的登录页面:登录后,使用Ionic Identity Vault将由Auth0驱动的用户访问令牌安全地...
Design complex interfaces with Ionic's UI controls Build once and deploy for both iOS and Android Use native device hardware and device-specific features Covers the entire mobile development process
主要为大家详细介绍了Ionic3 UI组件之autocomplete的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
ionic是一个用来开发混合手机应用的,开源的,免费的代码库。... ionic的开发添加android和ios环境。...ionic提供很多css组件[2] 和javascript UI库。 ionic可以支持定制android和ios的插件,也支持服务端REST的敏捷开发。
- 使用Ionic提供的UI 组件。Ionic本身是致力于建立统一的移动混合app构建平台,核心基础是Angular+Cordova。 - 通过Angular指令封装,以及预定义的CSS,提供了开箱即用的HTML5 Mobile组件。 - 构建与开发支持,能够...
Develop engaging mobile experiences with a native-looking UI in Ionic and AngularJS. Use out-of-the-box Ionic functionalities, customize existing components, and add new components with this ...
Ionic 6 / Angular 10 Fitness主题/模板(Android + Ios + Web)App 蓝| Angular 11 Admin后端/具有Firebase /材质设计 离子模板 如果您想使用最新版本的Ionic框架构建自己的Fruit应用程序,并允许您通过此应用程序...