- 浏览: 2550894 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
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)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
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(4)ionic2 framework - basic and components and native
2016-03-24 02:33 1260ionic UI(4)ionic2 framework - b ... -
ionic UI(3)TypeScript - handbook
2016-03-22 23:21 634ionic UI(3)TypeScript - handboo ... -
ionic UI(2)ionic2 framework - TypeScript - tutorial
2016-03-22 06:52 1654ionic UI(2)ionic2 framework - T ... -
Parse and Heroku Service(3)Parse Server and Parse Dashboard
2016-03-22 06:30 965Parse and Heroku Service(3)Pars ... -
Parse and Heroku Service(2)Mail Templates and Push Notification
2016-03-22 02:45 581Parse and Heroku Service(2)Mail ... -
Parse and Heroku Service(1)Heroku Installation and Play
2016-03-19 00:13 822Parse and Heroic Service(1)Hero ... -
Hybrid(5)Customize Meteor Directly Google Login
2015-09-01 02:33 910Hybrid(5)Customize Meteor Direc ... -
Hybrid(4)Favorite Places - Google Login
2015-09-01 02:02 1341Hybrid(4)Favorite Places - Goog ... -
Hybrid(3)More Meteor Example - Social
2015-08-11 05:04 755Hybrid(3)More Meteor Example - ... -
Hybrid(2)meteor Running Android and iOS
2015-07-28 23:59 1048Hybrid(2)meteor Running Android ... -
Create the Google Play Account
2015-07-18 06:42 1100Create the Google Play Account ... -
Secure REST API and Mobile(1)Document Read and Understand OAUTH2
2015-07-14 00:36 763Secure REST API and Mobile(1)Do ... -
Screen Size and Web Design
2015-07-11 01:11 724Screen Size and Web Design iPh ... -
Hybrid(1)ionic Cordova meteor
2015-06-25 05:49 470Hybrid(1)ionic Cordova meteor ... -
Android Fire Project(1)Recall Env and Knowledge
2015-02-11 12:28 685Android Fire Project(1)Recall ... -
Android Content Framework(1)Concept
2014-06-14 13:54 1078Android Content Framework(1)Con ... -
Feel Android Studio(1)Install and Update Android Studio
2014-04-11 03:12 2028Feel Android Studio(1)Install a ... -
IOS7 App Development Essentials(2)iBeacon
2014-03-05 05:55 889IOS7 App Development Essentials ... -
IOS7 App Development Essentials(1) Persistent Store
2014-03-05 05:54 1326IOS7 App Development Essentials ... -
Mobile Jquery(5)Update and Know about Express
2014-01-30 06:33 1261Mobile Jquery(5)Update and Know ...
相关推荐
1. **项目结构**:包含`src`目录,其中可能有`app`目录,存放着`Ionic`应用的主要代码,包括页面、服务、组件等。 2. **组件示例**:每个`Ionic UI`组件可能都有一个单独的示例文件,展示其不同用法和配置,例如按钮...
1. `css` - 包含应用的样式文件,可能包括 Ionic 的默认样式和自定义样式。 2. `js` - 存放JavaScript代码,可能包括AngularJS的服务、控制器、指令等。 3. `img` - 图片资源,可能包含应用图标、聊天表情等。 4. `...
【标题】"Ionic AngularJS Mobile UI" 是一个基于AngularJS框架和Ionic库构建的移动应用用户界面(UI)开发项目。这个项目展示了如何利用这两项技术来创建具有高度自适应性和跨平台兼容性的移动应用程序。 【描述】...
**Ionic UI框架详解** Ionic是一款基于HTML5的开源移动应用框架,专为构建原生感观的混合式移动应用而设计。它利用AngularJS(一个强大的JavaScript框架)和Cordova/PhoneGap(允许Web开发技术运行在原生移动平台...
1. **跨平台兼容性**:由于受到Ionic的影响,组件库可能支持Web、Android和iOS等平台。 2. **响应式设计**:组件会根据屏幕大小自动调整布局,适应不同设备。 3. **丰富的组件集**:包含按钮、表单、导航、网格、...
2. **样式资源**:Ionic框架的核心在于其强大的UI组件库,这包括预定义的CSS类和Sass变量,用于创建一致的、响应式的移动界面。开发者可以在这里找到有关如何自定义主题、颜色和字体的指导。 3. **模板和示例项目**...
`ionic start myapp blank --type=ionic1` 这里的 `myapp` 是项目名称,可以根据需要更改。`blank` 是项目类型,创建一个目录。 接下来,使用以下命令将 Android 平台添加到项目中: `ionic cordova platform add...
在 "ionic中文文档1_3" 中,你可能还会发现有关状态管理的信息,如使用 AngularJS 的 `$stateProvider` 和 `$urlRouterProvider` 实现路由管理,或者如何利用 `ngStorage` 或 `ionic-angular` 中的 `$ionicHistory` ...
4. **离子框架组件(Ionic Framework Components)**:如`<ion-menu>`、`<ion-header>`、`<ion-content>`和`<ion-item>`等,这些是构建 Ionic 应用的基本元素,它们提供了丰富的UI交互和布局功能。 5. **服务...
1. 引入依赖:在你的应用的主HTML文件(如`index.html`)中,引入`ionic-datepicker-oysq`的相关CSS和JavaScript文件。 2. 安装模块:在你的AngularJS应用中,你需要导入并注入这个插件的模块。 3. 配置使用:在你...
1. **检查系统需求**:确保你的计算机满足IonicLab的运行要求,通常包括特定的操作系统版本(如Windows 7或更高版本)、足够的硬盘空间以及兼容的JavaScript运行环境,比如Node.js。 2. **下载安装文件**:由于官方...
1. **环境设置**:首先,你需要安装Node.js、npm、Cordova和Ionic CLI,这些都是开发`Ionic2`应用的基础。然后,通过`ionic start`命令创建一个新的项目,选择`blank`模板,并按照项目描述,将这个示例代码导入到你...
1. **Ionic基本架构**:Ionic基于Angular框架,因此,理解Angular的基本概念,如组件、服务、依赖注入等,是构建Ionic应用的基础。同时,Ionic还引入了Ionic Core,提供了一系列UI组件,如导航栏、滑块、按钮等,...
Ionic 提供了一系列UI组件和工具,帮助开发者快速创建美观且功能丰富的跨平台应用。其设计原则是遵循移动平台的设计指南,确保在iOS和Android上拥有一致的用户体验。 **2. Cordova** Apache Cordova 是一个开源的...
Angular 提供了一种声明式编程方式,使得前端开发更加高效,而 Ionic 则在此基础上提供了针对移动设备优化的UI组件和交互设计,如侧滑菜单、下拉刷新、加载指示器等,为开发者构建原生感观的应用提供了便利。...
1. **iBatis**:iBatis 是一个优秀的持久层框架,它允许开发者将SQL语句直接写在配置文件中,解决了Java与数据库交互时的繁琐工作。iBatis 提供了数据访问的灵活性和控制权,使得开发者可以避免过度依赖于ORM框架。...
1. **智能提示**:在编写代码时,插件会自动提供Ionic和AngularJS的指令、服务、模块等的智能提示,帮助开发者快速输入正确的API和标签,减少错误和查找时间。 2. **代码补全**:基于 Ionic 和 AngularJS 的语法...
在本文中,我们将深入探讨如何使用Ionic框架通过HmacSHA1加密方法与Java系统进行安全的数据交互。HmacSHA1(Hash-based Message Authentication Code with SHA-1)是一种用于验证数据完整性和来源的安全算法,常用于...
1. **安装与设置**:讲解如何安装Cordova和Ionic,以及如何配置项目环境,包括创建新的Cordova项目和添加Ionic依赖。 2. **创建基本结构**:介绍如何使用`ionic start`命令创建一个新的应用,以及理解应用的基本...