ionic

安装环境: Ubuntu 14.04 64-bit NodeJs安装 官网 https://nodejs.org 速度太慢 国内镜像: https://npm.taobao.org/dist 下对应版本即可 下载: node-v4.2.1-linux-x64.tar.gz 解压 查看bin目录: node, npm. $node/bin 这个目录加到PATH中, 或是链接 node, npm到/usr/bin中 node -v 查看是否安装成功, NodeJs到此安装完成. 1.1 配置npm的模块全局安装目录 (暂且跳过): # 先查看配置 npm config ls #设置 npm config set prefix '~/nodejs/module' #将 {prefix}/bin 即: ~/nodejs/module/bin 加入到 PATH中, 才能在命令行中直接用模块命令 #PATH修改后记得重新source才能生效 1.2 npm使用国内淘宝镜像 http://npm.taobao.org/ 查看说明 使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm : 命令如下: npm install -g cnpm --registry=https://registry.npm.taobao.org 安装模块 $ cnpm install

##ionic轮播的问题解决方案 #### 首先说明了我的问题 先上 html 代码 `<ion-slide-box show-pager="true" ng-if="carouseList" on-slide-changed="slideHasChanged($index)" class="slidebox" auto-play="true" slide-interval="4000" delegate-handle="slideimgs" does-continue="true"> <ion-slide ng-repeat="list in carouseList"> <a ng-href="{{list.url}}" target="_blank"><img ng-src="{{list.img_id}}" alt="{{list.name}}" class="other-img"></a> </ion-slide> </ion-slide-box>` 这段代码显示效果是没有问题的，但是我遇到的问题是：<br > 1. 加载页面后轮播显示的是最后的一张图片，而不是默认的第一张（这个就无所谓了）。 2. 加载页面后不能自动的轮播， 还的手动去滑动去触发。 3. 图片多的话会在页面显示一会儿后才能滑动（不能容忍了╭(╯^╰)╮）。 <br /> ####

ngCordova使用很简单， 首先在项目目录下 ，使用bower工具安装 bower install ngCordova 然后将ng-cordova.js或者ng-cordova.min.js添加到index.html中的cordova.js引入之前 <script src="lib/ngCordova/dist/ng-cordova.js"></script> <script src="cordova.js"></script> 在js中添加ngCordova依赖 angular.module('myApp', ['ngCordova']) 在使用每个插件之前，必须先检测设备是否就绪 　　$ionicPlatform.ready(function() { 　　　　$cordovaPlugin.someFunction().then(success, error); 　　}); 来源： https://www.cnblogs.com/xindejiyi/p/5603099.html

参考文章 https://github.com/driftyco/ng-cordova http://ngcordova.com/docs/plugins/camera/ 官方解释是既可以用来拍照也可以录视频（只试用了拍照功能） 首先 ，装插件 cordova plugin add org.apache.cordova.camera 然后 ，如果之前配置过ngcordova的话，就直接在控制器加上$cordovaCamera就好了 有两种方法获取拍照得到的图片 1，拍照返回64位的图片数据（destinationType: Camera.DestinationType.DATA_URL） 2，拍照返回图片文件的实际存储地址（destinationType: Camera.DestinationType.FILE_URI） 1，拍照返回64位的图片数据（成功了，可是图片数据即使100%的质量也很不清晰） var options = { quality: 50, destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.CAMERA, allowEdit: true, encodingType: Camera.EncodingType.JPEG, targetWidth:

作者： Grey 原文地址： http://www.cnblogs.com/greyzeng/p/5529153.html 操作系统： Windows 10 环境配置： Node.js Java SE Development Kit Android SDK Visual Studio Emulator for Android （可采用其他模拟器，真机，或者Chrome浏览器模拟） Visual Studio Code ( 官方推荐 三款IDE) 安装命令： npm install -g ionic@beta cordova HelloWorld: 新建一个空工程： 命令：ionic start MyFirstApp blank --v2 –-ts 进入项目目录： 命令：cd MyFirstApp 增加平台支持： 命令：ionic platform add android 命令：ionic platform add ios 在Chrome浏览器上模拟运行： 命令：ionic serve -l 运行截图： 在Android模拟器上运行： 打开 Visual Studio Emulator for Android ，运行一个虚拟设备， 在模拟器上运行程序： 命令：ionic run android 运行截图： ---- 下一篇： Ionic2学习笔记（1）：新建一个页面 来源：

1、No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin. 解决办法 index.html 中添加 《meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"》 2、ionic 隐藏 nav-bar 文档上来看，需要在controller中调用 $ionicNavBarDelegate 例如 .controller('DashCtrl', function ($scope, $ionicNavBarDelegate) { $ionicNavBarDelegate.showBar(false); }) 但没起作用。最后在模板中使用标签方法 hide - nav - bar = "true" 该方法起作用。 3、 ng-model 与 input 值的问题 例如 input type="text" ng-model="querystr" ng-model绑定到$scope.querystr 时

Infinite Lists 由于手机不适合使用多页面显示posts，Infinite Lists成为各种新闻、咨询类app的标配。为了在ionic框架中使用到Infinite Lists，我们首先学习ion-list。 ion-list ion-list使用 在ionic中，通过使用ion-list和ion-item来展示数据，通过ng-repeat循环输出，如demo（使用ionic start mydemo tabs命令生成ionic demo）中的templates/tab-friends.html中显示： <ion-list> <ion-item ng-repeat="friend in friends" type="item-text-wrap" href="#/tab/friend/{{friend.id}}"> {{friend.name}} </ion-item> </ion-list> 假如我们返回到html的数据，每次都为20项，则但屏幕划到最后一项或前几项时，则需要监听检测到，并且载入下一个20项数据，从而达到无止境的下滑刷新载入更多的目标。这里，ionic提供了ion-infinite-scroll directive。 ion-infinite-scroll function is more like a scroll detector: it

1. <ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}"> <!-- tabs --> </ion-tabs> 2. 在该控制器下加上.directive： var module = angular.module('app.directives', []); module.directive('showTabs', function ($rootScope) { return { restrict: 'A', link: function ($scope, $el) { $rootScope.hideTabs = false; } }; }).directive('hideTabs', function ($rootScope) { return { restrict: 'A', link: function ($scope, $el) { $rootScope.hideTabs = true; } }; }) 3. 在html页面中引用hide-tabs <ion-view title="New Entry Form" hide-tabs> <!-- view content --> </ion-tabs> 4. 当页面返回主页面时，需要再次显示tabs，则需要在该控制器中加上

说在前面的话 当时搭建此环境的时候，由于网络环境比较差，各种不成功，在网上找了好久教程，趟过很多坑，现在把自己实践成功的写出来，给大家一个参考吧。 操作步骤： 1、安装node.js 2、安装Cordova 3、安装ionic 4、验证 5、 安装iOS－sim 、iOS -deploy 一、安装node.js 要装cordova和ionic，需先安装node.js，因为cordova和ionic需要通过命令在线安装。去官网下载node.js安装包安装,网址是 https://nodejs.org/en/ ,下载那个推荐使用的，如下图： 安装完后，在终端terminal输入以下命令验证是否安装成功： 　　node －v 　　npm -v 二、安装cordova 需要通过命令在线安装。网络环境比较差，通过镜像安装成功（若你能翻墙的话，就不要这么折腾了,直接按官网的操作流程就好了。。。）， 1)设置镜像 npm config set registry http://registry.cnpmjs.org 2）安装cordova （其实也可以ionic一块装的，但是没试过。。。） sudo cnpm install -g cordova 3）测试安装是否成功： cordova -v 三、安装ionic 这个安装的比较纠结， 首先 sudo cnpm install -g ionic

ylbtech-ionic-CSS：ionic 单选框 1. 返回顶部 1、 ionic 单选框 ionic 单选按钮与标准 type="radio" 的 input元素类似。以下展示了现代app类型的单选按钮。 每个 item-radio 中的 type="radio" 的 input 元素的 name 属性都相同。radio-icon 类用于是否显示图标。 ionic 在单选项中使用了 <label> 元素，使其更易点击。 实例 <div class="list"> <label class="item item-radio"> <input type="radio" name="group" value="go" checked="checked"> <div class="radio-content"> <div class="item-content"> Go </div> <i class="radio-icon ion-checkmark"></i> </div> </label> <label class="item item-radio"> <input type="radio" name="group" value="python"> <div class="radio-content"> <div class="item-content"> Python <