观《phonegap第三季 angularjs+ionic视频教程 实时发布》学习笔记（一）
一、 phonegap 性能优化 以及 phonegap + Angularjs +ionic
1、安装包括：nodejs-cordova-ionic，sdk，phonegap等等；
2、怎样吧导航设置到底部的解决方案；
3、ionic、JqueryMobile、Sencha的对比：
（1）. Jqmobi
轻量级框架，它的语言基于jquery语言容易上手,运行速度快，但是没有MVC 多人协作开发的概念，项目比较大后 代码不易维护 (中小项目 1-2个人开发很适用)
（2）. SenchaTouch
运行速度快 和 jqmobi运行速度差不多，兼容性好，基于MVC世界上第一个html5 移动开发框架，但是它是一个重量级的框架，需要extjs 基础 代码复杂需要较强的程序基础。 但是sencha architect 是个很不错的可视化开发工具，弥补了sencha的不少缺点
（3）. ionic
运行速度快 和 jqmobi运行速度差不多，轻量级框架，基于Angularjs，支持Angularjs的特性，MVC ，代码易维护 IONIC 是目前最有潜力的一款HTML5手机应用开发框架。通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用。它使用 JavaScript MVVM框架和 AngularJS来增强应用。提供数据的双向绑定，使用它成为Web和移动开发者的共同选择。即将发布的AngularJS 2.0将会专注于移动开发，相信IONIC一定会取得不错的成就
4、crosswalk
Crosswalk开源android WebView 引擎，让Phonegap android应用飞起来（经测试运行速度可以提升 3-5倍）；
Ionic 中集成 Crosswalk （也可以集成其他的htnl5框架 如jqmobi）介绍：1．集成crosswalk—— ionic browser add crosswalk 2.卸载 crosswalk—— ionic browser revert android 或者 ionic browser remove crosswalk
二、 ionic项目简介以及Angularjs 基础(1)
1、打包项目
2、angularjs下载
3、angularjs中常用指令
（1）ng-app：定义应用程序的根元素；
（2）ng-init：为应用程序定义初始值，相当于data-ng-init；
（3）ng-bind：绑定HTML元素到应用程序数据，等同于{{}}；
（4）ng-controller：为应用程序定义控制器对象，ng-app下可以有多个控制器；
（5）{{name}}：name可以是表达式，变量名，对象的属性，数组，用于显示绑定的数据；
（6）ng-repeat：为控制器中的每个数据定义一个模板，可以用于展示数据，列表；
（7）var app=angular.module（"myapp",[依赖的模块]）；
4、$http
（1）$http.get()
——$http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php").success(function(response) {$scope.names = response;});
——$http.get(url,{params:{id:'5'}}) .success(function(response) { $scope.names = response; }).error(function(data){ //错误代码 });
（2）$http.post()
——$http.post(url,postData,config) .success(function(response) { $scope.names = response; }).error(function(data){ //错误代码});
（3）$http.jsonp()
——myUrl = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSON_CALLBACK";
$http.jsonp(myUrl).success( function(data){ $scope.portalcate = data.result; } ).error(function(){ alert('shibai'); });
5、过滤器：过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。
（1）uppercase：格式化字符串为大写{{x in names|uppercase}}。
（2）lowercase：格式化字符串为小写{{x in names|lowercase}}。
（3）currency：格式化数字为货币格式{{x in names|currency}}。
（4）filter:从数组项中选择一个子集{{x in names|filter:name}}。
（5）orderBy：根据某个表达式排列数组{{x in names|orderBy:country}}。
6、angularjs模块
为什么要使用模块？控制器污染了全局命名空间
普通的控制器：
<body>
<div ng-app="" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div>
<script> function myCtrl($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; } </script>
<script src="angular.min.js"></script>
</body>
angularjs模块
<body> <div ng-app="myApp" ng-controller="myCtrl"> {{ firstName + " " + lastName }} </div> <script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); </script> </body>
三、Angularjs MVC 以及 $scope作用域 以及依赖注入中代码压缩问题
1、什么是mvc？
Model：数据模型层 View：视图层，负责展示 Controller：业务逻辑和控制逻辑
优点: 代码模块化 代码逻辑比较清晰、可移值性高，后期维护方便、代码复用，代码规模越来越大的时候，切分职责是大势所趋
缺点：运行效率稍微低一些
2、$scope
$scope多控制器单独作用域
var app = angular.module("myApp", []);
app.controller('firstController',function($scope){ $scope.name='张三'; });
app.controller('secondController',function($scope){ $scope.name='李四'; })
3、$rootScope ——根作用域，全局作用域
4、代码压缩问题
app.controller('name',['$scope',function($scope){$scope.name='张三';}])
app.controller('name',['scope','$rootscope',function($scope,$rootscope){......}])
避免代码压缩过程中把$scope,$rootScope删掉，需要把不想被压缩的$scope,$rootScope写在函数前。
5、Angularjs模块的run方法
run方法初始化全局的数据 ,只对全局作用域起作用 如$rootScope
四、Angularjs $scope里面的$apply方法 和 $watch方法
1、Angularjs $scope里面的$apply方法
AngularJS外部的控制器（DOM事件、外部的回调函数如jQuery UI空间等）调用了AngularJS函数之后，必须调用$apply。在这种情况下，你需要命令AngularJS刷新自已（模型、视图等），$apply就是用来做这件事情的。
$scope.$apply(function() { $scope.variable1 = 'some value'; executeSomeAction(); });
2、Angularjs $scope里面的$watch方法
$watch方法监视Model的变化。
$scope.$watch($scope.sum,function(newVal,oldVal){ //console.log(newVal); //console.log(oldVal); $scope.iphone.fre = newVal >= 100 ? 0 : 10; });
五、Angularjs 工具方法 以及Angularjs中使用jquery
1、Angularjs 工具方法
angular.isArray($scope.name) ——返回true/false
angular.isDate
angular.isDefined
angular.isUndefined
angular.isElement
angular.isFunction
angular.isNumber
angular.isObject
angular.isString
angular.uppercase($scope.name) ——转化为大写
angular.lowercase
angular.equals('a','b') ——返回true/false
angular.extend('b','a') ——b继承a
angular.fromJson() ——字符串转化为Json对象
angular.toJson() ——json对象转化为字符串
angular.copy('a','b') ——将a复制给b
angular.forEach(json,function(key,val){}) ——遍历
angular.bind(name,function(){})
angular.bootstrap() ——动态加载model
2、模块之间的依赖
angular.module('myapp',['ionic'])
3、使用jquery
注意：jquery要放在angularjs上面，先引用jquery
4、var obj1=document.getElementById(Id)
angular.element(obj1).html('.....');
六、 Angularjs 事件指令 input相关指令 和样式指令 DOM操作指令详解
1、Angularjs 事件指令
ng-click/dbclick
ng-mousedown/up
ng-mouseenter/leave
ng-mousemove/over/out
ng-keydown/up/press
ng-focus/blur
ng-submit
ng-selected ——是否选中
ng-change ——状态是否改变
ng-copy
ng-cut
ng-paste
ng-cloak ——解决页面加载完成前出现的{{}}
ng-non-bindable ——直接在页面上使用{{}}，不解析{{}}
2、Angularjs input相关指令
ng-disabled
ng-readonly
ng-checked
ng-value ——ng-value="text"相当于value="text"
3、Angularjs 样式指令
ng-class{类名1：true；类名2：true} /{变量名/类名}
ng-style{color:red}/{变量名}
ng-href='{{url}}'
ng-src='{{url}}'
ng-attr-(suffix)
4、Angularjs DOM操作指令
ng-show
ng-if
ng-switch
ng-open
5、Angularjs
ngBind 显示数据类似于 {{}},需要事先引入插件，用src引入文件之后，在angular.module('myapp',[ngSanitize]);
ngBindTemplate 解决ng-bind中只能绑定一个的问题,需要事先引入插件
ngBindHtml 解析html代码,需要事先引入插件
ngInclude 加载外部页面
ng-init
ng-model ——<input type="text" ng-model="text" ng-model-options="{updateOn : 'blur'}">
ng-model-options 控制双向事件绑定的时候 触发事件的方式ng-model-options="{ updateOn: 'blur' }"
ng-controler
七、Angularjs filter过滤器以及自定义filter过滤器详解
1、过滤器
（1）uppercase，lowercase大小转换
{{ "lower cap string" | uppercase }} //结果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }} //结果：tank is good
（2）json格式化
{{ {foo: "bar", baz: 23} | json }} //结果：{ "foo": "bar", "baz": 23 }
（3）date格式化
{{ 1304375948024 | date }} //结果：May 3, 2011
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} //结果：05/03/2011 @ 6:39AM
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }} //结果：2011-05-03 06:39:08
（4）number格式化
{{ 1.234567 | number:1 }} //结果：1.2
{{ 1234567 | number }} //结果：1,234,567
（5）currency货币格式化
{{ 250 | currency }} //结果：$250.00
{{ 250 | currency:"RMB ￥ " }} //结果：RMB ￥ 250.00
（6）filter查找
{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:'s'}} //查找含有有s的行
//上例结果：[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]
（7）limitTo字符串，对像的截取
{{ "i love tank" | limitTo:6 }} //结果：i love
{{ "i love tank" | limitTo:-4 }} //结果：tank
（8）orderBy对像排序（默认升序，true为降序）
{{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id':true }} //根id降序排
（9）控制器使用 filter
$scope.name = $filter('date')('236478234','hh');
$scope.name = $filter('uppercase')('hello');
（10）Angularjs自定义filter过滤器
第一步. filters.js添加一个module
查看复制打印? angular.module('tanktest', []).filter('tankreplace', function() { return function(input) { return input.replace(/tank/, "=====") }; });
第二步.app.js中加载这个module 查看复制打印? var phonecatApp = angular.module('phonecatApp', [ 'ngRoute', 'phonecatControllers', 'facebookControllers', 'tanktest' ]);
第三步.html中调用 查看复制打印? {{ "TANK is GOOD" | lowercase |tankreplace}} //结果：===== is good 注意：| lowercase |tankreplace管道命令可以有多个
