第一讲 phonegap 性能优化 以及 phonegap + Angularjs +ionic_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
第一讲 phonegap 性能优化 以及 phonegap + Angularjs +ionic
上传于||文档简介
&&p​h​o​n​e​g​a​p​学​习​教​程
阅读已结束，如果下载本文需要使用
想免费下载本文？
下载文档到电脑，查找使用更方便
还剩7页未读，继续阅读
你可能喜欢ionic双向数据绑定失效是为什么_百度知道
ionic双向数据绑定失效是为什么
提问者采纳
应该就可以如果你把controller不放在路由上，但是赋值的时候在内部作用域上创建了新变量，直接用ng-controller加上。目测上面有指令自己创建了一级作用域，ng-model取值的时候是通过原型继承获得了值，所以，而是放在ion-content内部
来自团队：
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁应用开发（1）
号称下一代web应用，是一款优秀 的前端 JS 框架，主要特性有：
模块化与依赖注入
双向数据绑定
指令与 UI 控件
Ionic 是一个强大的 HTML5 应用程序开发框架，号称 Advanced HTML5 Hybrid Mobile App Framework 是 AngularJS 移动端解决方案 可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。Ionic 主要关注外观和体验，以及和你的应用 程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。
Ionic 是一个轻量的手机 UI 库，具有速度快，界面现代化、美观等特点。为了解决其他一些 UI 库在手机上运行缓慢的问题
学习 ionic 前为什么要学 Angularjs ？
Ionic 整合（AngularJs integrate）AngularJs
Ionic url 路由使用 AngularUI Router，可以指定不同的路由，方便开发和集成
Ionic 扩展了 AngularJS 指令 （AngularJS Extensions & Directives） ion-tab, ion-content, ion-nav-view, ion-header ionicPopup,ionicLoading, $ionicModal…
Ionic 安装 及 helloword 演示
先安装 node.js
安装 cordova
在cmd中输入
==npm install -g cordova==
或 ==sudo npm install -g cordova==
注意： 部分同学现在直接使用 npm install -g cordova 发现安装了以后 执行 cordova build
android的时候 提示需要安装 platform for android-21 sdk，意思就是需要 最新版本的 sdk
解决方法：
更新 sdk （推荐） 翻墙 代理 或者想其他办法
Sdk 没法更新的情况下面 可以先卸载当前的 cordova，然后再重新指定版本安装 cordova
下载 sdk 包集成 推荐
Android adt 离线包集成 sdk
提示：ctrl+c终止批处理操作
卸载 cordova
重新指定版本 安装 cordova
npm install -g cordova@4.1.2
4.安装ionic
==npm install -g ionic==
或 ==sudo npm install -g ionic==
5.创建运行项目
Ios 创建安装运行
ionic start myproject
cd myproject
ionic platform add ios
ionic build ios
ionic emulate ios
Android 创建安装运行
ionic start myproject
cd myproject
ionic platform add android
ionic build android
ionic emulate android (模拟器运行)
ionic run android (连接上手机运行)
e:\project&ionic start ionic_demo01
可以创建不同的模板，默认是tabs（导航栏）模板
ERROR：运行ionic build android 提示未设置 ANDROID_HOME
解决方案：
新建环境变量 ANDROID_HOME，令其值为Android sdk文件夹的路径
再建 ANDROID_PLATFORM_TOOLS,值为sdk目录下的platform-tools文件夹路径
还有 ANDROID_TOOLS，值为sdk目录下的tools文件夹路径
最后在path环境变量中新增ANDROID_HOME，即末尾添加;%ANDROID_HOME%
ERROR: [Error: Please install Android target: “android-22”.
Hint: Open the SDK manager by running: D:\program\SDK\tools\android.BAT
(打开Android.bat)
You will require:
1. “SDK Platform” for android-22
(安装Android-22)
2. “Android SDK Platform-tools (latest) (安装最新平台工具)
3. “Android SDK Build-tools” (latest)]
(安装最新通用工具)
叫我更新到Android-22，倒霉的是，这个更新需要翻墙。
那么好的，，按照win8教程配置好我的win10vpn，登上账号，终于开始下载了，速度50~500kb/s，波动有点大，50是常态，不过能更新就好。
Android sdk manager安装的选择：Android5.1.1（API22）中，我只选择了SDK Platform，然后就是选择了Tools里面的Android sdk tools和Android sdk platform-tools和Android sdk Build-tools。
除了这些，还有Extras目录下的Android support repository，Android support library，google repository，google USB Driver最好也弄上。
ok，解决了error，继续上路，输入指令ionic build Android，开始编译，速度有点慢，主要是在下载gradle-2.2.1.zip，看来编译还需要gradle打包构建工具，真是麻烦，还好是自动化的。当初弄Android studio也是弄了这个，现在发现Android studio隐藏了很多环境设置细节，越来越喜欢AS了。
ERROR：Could not resolve com.android.tools.build:builder:1.0.0.
通过错误描述，猜测有可能由于网络问题，对应的版本下不下来，无法进行打包构建，缺少gradle1.0.0工具，处于vpn状态下，再次编译，开始下载一堆东东，有点慢，终于成功了
编译完成后，可以在项目目录/platform/andorid/build/outputs/apk文件夹里看到应用的apk安装包了。
至此可以将项目导入到Android studio中，用AS来编辑、运行应用。不过AS的html编辑能力比较差，按照教程的指导，不采用这种方式。html的编辑问题先不管。
接下来准备在命令行界面连接手机
输入adb devices 查看所有设备，提示adb不是有效的命令，应该是还没配置环境变量，将Android sdk目录/platfrom_tools添加进path环境变量中。
在手机设置开发者选项中，打开允许调试开关，连上手机，点击允许调试，再次执行adb devices
在手机上运行
e:\project\ionic_demo01&ionic run android
android中，调整tabs模板的导航栏到底部
浏览器调试（重要，用于调试）
e:\project\ionic_demo01&ionic serve
打开本地的浏览器调试应用，google浏览器（360浏览器）点击F12进行调试，点击左边的小手机图标查看手机上的模拟状态
进入serve状态后，会监听文件的修改，文件修改保存后会自动刷新浏览器以展示修改后的内容（动态预览）
cmd中ctrl+c结束调试
修改app.js文件
通过文本编辑器打开app.js，在config中添加$ionicConfigProvider以及设置：
ironic是要修改项目目录下的www文件夹内的内容，不是platform下的。编写应用也是修改www下的文件
.config(function($stateProvider, $urlRouterProvider
,$ionicConfigProvider) {
$ionicConfigProvider.platform.ios.tabs.style('standard');
$ionicConfigProvider.platform.ios.tabs.position('bottom');
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('standard');
$ionicConfigProvider.platform.ios.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.navBar.alignTitle('left');
$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');
$ionicConfigProvider.platform.ios.views.transition('ios');
$ionicConfigProvider.platform.android.views.transition('android');
使用Crosswalk提高phoneGap应用运行速度
Crosswalk简介
Crosswalk是一款开源 android WebView 引擎，能够使phoneGap应用运行速度提升3-5倍，缺点是安装包体积会变大很多。同时和系统的整合交互方面（比如启动画
面、权限管理、应用切换、社交分享等等）可以做到类似原生应用。 现在 Crosswalk 已经成为众多知名 HTML5 平台和应用的推荐引擎， 包括 Google Mobile Chrome App、 Intel XDK、Famo.us 和 Construct2 等等， 未来的 Cordova 4.X 也计划集成 Crosswalk。同时在去年的中国 iWeb 大会上， Cocos2d-HTML5 游戏引擎也宣布与 Crosswalk 展开合作。
Ionic 中集成 Crosswalk （也可以集成其他的 htnl5 框架 如 jqmobi） 介绍：
1.集成 crosswalk
x:/project&ionic browser add crosswalk
使项目(不能有中文目录，还得翻墙)添加crosswalk webview引擎
2.卸载 crosswalk
x:/project&ionic browser revert android
或者 x:/project&ionic browser remove crosswalk
注意：执行以上命令时需要在线。命令行工具版本必须为1.3.0以上。Android SDK 为 19以上。
如果ionic停止维护了，如何使用ionic进行开发
将github上的ionic代码复制出来，复制到cordova目录下的www目录下，也是可以运行的。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：322次
排名：千里之外angular js 双向数据绑定问题_百度知道
angular js 双向数据绑定问题
//a，但是点击关闭form表单 .#sdq&//把数据绑定给 form表单
if (://b.jpg" target="_blank" title="点击查看大图" class="ikqb_img_alink">击这行数据修改, &#39://b.#myModal&#39.jqGrid(&quot，并且把数据得到赋给 form表单.).com/zhidao/pic/item/4ec2ddd47ca7efcf1b6292;&show&#39, id);//获取行的所有数据
$scope$scope.baidu.update = function() {
var id = $(&
/zhidao/pic/item/fcfaaf51f3deb48f254ea292df5785c.hiphotos.Sdq = data.baidu!$scope.$apply();) {
alert(&quot.jpg" /><img class="ikqb_img" src="http.$$phase) {
var data = $(&).jpg" esrc=");).com/zhidao/wh%3D600%2C800/sign=d253a46dbc12c8fcb4a6fecbcc33be7d/4ec2ddd47ca7efcf1b6292.jqGrid(&#39;);
$(&#39;selrow&#39;
if (id == null || id == &/zhidao/wh%3D450%2C600/sign=5d688a357baa091fddd47ca7efcf1b6292;getGridParam&#39
你这哪是angular，根本就是jq，angular 双绑是通过ng-model实现的。
对啊，我通过jqgrid获取值，然后用angular 绑定给form表单
form表单写了
ng-model的
那贴代码啊，angular很多都是在前台实现的，看你后台的内容，只有赋值。$scope.$$phase$scope.$apply()这俩都是框架内部方法，正常基本用不到的。
&div class=&form-group&&&label class=&col-sm-2 control-label& for=&nf&&年份&&#47;label&&div class=&col-sm-4&&&input class=&form-control& id=&nf& type=&text&ng-model=&sdq.nf& name=&nf& &#47;&&&#47;div&&&#47;div&
ng-model=&sdq.nf& $scope.Sdq = data，大小写不一致， 奇怪你赋值怎么成功的？
这个大小写 我是才改了的
之前是一样的 提问之前我用的大写
现在全部都改成小写了
其他类似问题
为您推荐：
数据绑定的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁数据的双向绑定
Angular沉思录（一）
Angular沉思录接触AngularJS已经两年多了，时常问自己一些问题，如果是我实现它，会在哪些方面选择跟它相同的道路，哪些方面不同。为此，记录了一些思考，给自己回顾，也供他人参考。初步大致有以下几个方面：数据双向绑定视图模型的继承关系模块和依赖注入的设计待定数据的双向绑定Angular实现了双向绑定机制。所谓的双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。一个最简单的示例就是这样：&div ng-controller="CounterCtrl"&
&span ng-bind="counter"&&/span&
&button ng-click="counter++"&increase&/button&
&/div&function CounterCtrl($scope) {
$scope.counter = 1;
}这个例子很简单，毫无特别之处，每当点击一次按钮，界面上的数字就增加一。绑定数据是怎样生效的初学AngularJS的人可能会踩到这样的坑，假设有一个指令：var app = angular.module("test", []);
app.directive("myclick", function() {
return function (scope, element, attr) {
element.on("click", function() {
scope.counter++;
app.controller("CounterCtrl", function($scope) {
$scope.counter = 0;
});&body ng-app="test"&
&div ng-controller="CounterCtrl"&
&button myclick&increase&/button&
&span ng-bind="counter"&&/span&
&/body&这个时候，点击按钮，界面上的数字并不会增加。很多人会感到迷惑，因为他查看调试器，发现数据确实已经增加了，Angular不是双向绑定吗，为什么数据变化了，界面没有跟着刷新？试试在scope.counter++;这句之后加一句scope.digest();再看看是不是好了？为什么要这么做呢，什么情况下要这么做呢？我们发现第一个例子中并没有digest，而且，如果你写了digest，它还会抛出异常，说正在做其他的digest，这是怎么回事？我们先想想，假如没有AngularJS，我们想要自己实现这么个功能，应该怎样？&!DOCTYPE html&
&meta charset="utf-8" /&
&title&two-way binding&/title&
&body onload="init()"&
&button ng-click="inc"&
increase 1
&button ng-click="inc2"&
increase 2
&span style="color:red" ng-bind="counter"&&/span&
&span style="color:blue" ng-bind="counter"&&/span&
&span style="color:green" ng-bind="counter"&&/span&
&script type="text/javascript"&
/* 数据模型区开始 */
var counter = 0;
function inc() {
counter++;
function inc2() {
counter+=2;
/* 数据模型区结束 */
/* 绑定关系区开始 */
function init() {
function bind() {
var list = document.querySelectorAll("[ng-click]");
for (var i=0; i&list. i++) {
list[i].onclick = (function(index) {
return function() {
window[list[index].getAttribute("ng-click")]();
function apply() {
var list = document.querySelectorAll("[ng-bind='counter']");
for (var i=0; i&list. i++) {
list[i].innerHTML =
/* 绑定关系区结束 */
&/html&可以看到，在这么一个简单的例子中，我们做了一些双向绑定的事情。从两个按钮的点击到数据的变更，这个很好理解，但我们没有直接使用DOM的onclick方法，而是搞了一个ng-click，然后在bind里面把这个ng-click对应的函数拿出来，绑定到onclick的事件处理函数中。为什么要这样呢？因为数据虽然变更了，但是还没有往界面上填充，我们需要在此做一些附加操作。从另外一个方面看，当数据变更的时候，需要把这个变更应用到界面上，也就是那三个span里。但由于Angular使用的是脏检测，意味着当改变数据之后，你自己要做一些事情来触发脏检测，然后再应用到这个数据对应的DOM元素上。问题就在于，怎样触发脏检测？什么时候触发？我们知道，一些基于setter的框架，它可以在给数据设值的时候，对DOM元素上的绑定变量作重新赋值。脏检测的机制没有这个阶段，它没有任何途径在数据变更之后立即得到通知，所以只能在每个事件入口中手动调用apply()，把数据的变更应用到界面上。在真正的Angular实现中，这里先进行脏检测，确定数据有变化了，然后才对界面设值。所以，我们在ng-click里面封装真正的click，最重要的作用是为了在之后追加一次apply()，把数据的变更应用到界面上去。那么，为什么在ng-click里面调用$digest的话，会报错呢？因为Angular的设计，同一时间只允许一个$digest运行，而ng-click这种内置指令已经触发了$digest，当前的还没有走完，所以就出错了。$digest和$apply在Angular中，有$apply和$digest两个函数，我们刚才是通过$digest来让这个数据应用到界面上。但这个时候，也可以不用$digest，而是使用$apply，效果是一样的，那么，它们的差异是什么呢？最直接的差异是，$apply可以带参数，它可以接受一个函数，然后在应用数据之后，调用这个函数。所以，一般在集成非Angular框架的代码时，可以把代码写在这个里面调用。var app = angular.module("test", []);
app.directive("myclick", function() {
return function (scope, element, attr) {
element.on("click", function() {
scope.counter++;
scope.$apply(function() {
scope.counter++;
app.controller("CounterCtrl", function($scope) {
$scope.counter = 0;
});除此之外，还有别的区别吗？在简单的数据模型中，这两者没有本质差别，但是当有层次结构的时候，就不一样了。考虑到有两层作用域，我们可以在父作用域上调用这两个函数，也可以在子作用域上调用，这个时候就能看到差别了。对于$digest来说，在父作用域和子作用域上调用是有差别的，但是，对于$apply来说，这两者一样。我们来构造一个特殊的示例：var app = angular.module("test", []);
app.directive("increasea", function() {
return function (scope, element, attr) {
element.on("click", function() {
scope.a++;
scope.$digest();
app.directive("increaseb", function() {
return function (scope, element, attr) {
element.on("click", function() {
scope.b++;
scope.$digest();
//这个换成$apply即可
app.controller("OuterCtrl", ["$scope", function($scope) {
$scope.a = 1;
$scope.$watch("a", function(newVal) {
console.log("a:" + newVal);
$scope.$on("test", function(evt) {
$scope.a++;
app.controller("InnerCtrl", ["$scope", function($scope) {
$scope.b = 2;
$scope.$watch("b", function(newVal) {
console.log("b:" + newVal);
$scope.$emit("test", newVal);
}]);&div ng-app="test"&
&div ng-controller="OuterCtrl"&
&div ng-controller="InnerCtrl"&
&button increaseb&increase b&/button&
&span ng-bind="b"&&/span&
&button increasea&increase a&/button&
&span ng-bind="a"&&/span&
&/div&这时候，我们就能看出差别了，在increase b按钮上点击，这时候，a跟b的值其实都已经变化了，但是界面上的a没有更新，直到点击一次increase a，这时候刚才对a的累加才会一次更新上来。怎么解决这个问题呢？只需在increaseb这个指令的实现中，把$digest换成$apply即可。当调用$digest的时候，只触发当前作用域和它的子作用域上的监控，但是当调用$apply的时候，会触发作用域树上的所有监控。因此，从性能上讲，如果能确定自己作的这个数据变更所造成的影响范围，应当尽量调用$digest，只有当无法精确知道数据变更造成的影响范围时，才去用$apply，很暴力地遍历整个作用域树，调用其中所有的监控。从另外一个角度，我们也可以看到，为什么调用外部框架的时候，是推荐放在$apply中，因为只有这个地方才是对所有数据变更都应用的地方，如果用$digest，有可能临时丢失数据变更。脏检测的利弊很多人对Angular的脏检测机制感到不屑，推崇基于setter，getter的观测机制，在我看来，这只是同一个事情的不同实现方式，并没有谁完全胜过谁，两者是各有优劣的。大家都知道，在循环中批量添加DOM元素的时候，会推荐使用DocumentFragment，为什么呢，因为如果每次都对DOM产生变更，它都要修改DOM树的结构，性能影响大，如果我们能先在文档碎片中把DOM结构创建好，然后整体添加到主文档中，这个DOM树的变更就会一次完成，性能会提高很多。同理，在Angular框架里，考虑到这样的场景：function TestCtrl($scope) {
$scope.numOfCheckedItems = 0;
var list = [];
for (var i=0; i&10000; i++) {
list.push({
checked: false
$scope.list =
$scope.toggleChecked = function(flag) {
for (var i=0; i&list. i++) {
list[i].checked =
$scope.numOfCheckedItems++;
}如果界面上某个文本绑定这个numOfCheckedItems，会怎样？在脏检测的机制下，这个过程毫无压力，一次做完所有数据变更，然后整体应用到界面上。这时候，基于setter的机制就惨了，除非它也是像Angular这样把批量操作延时到一次更新，否则性能会更低。所以说，两种不同的监控方式，各有其优缺点，最好的办法是了解各自使用方式的差异，考虑出它们性能的差异所在，在不同的业务场景中，避开最容易造成性能瓶颈的用法。
「GetParty」
关注微信号，推送好文章
微信中长按图片即可关注}