观《phonegap第三季 angularjs+ionic视频教程 实时发布》学习笔记（一）
1、 phonegap 性能优化 以及 phonegap + Angularjs +ionicphp
一、安装包括：nodejs-cordova-ionic，sdk，phonegap等等；html
二、怎样吧导航设置到底部的解决方案；html5
三、ionic、JqueryMobile、Sencha的对比： node
（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必定会取得不错的成就jquery
四、crosswalkandroid
Crosswalk开源android WebView 引擎，让Phonegap android应用飞起来（经测试运行速度能够提高 3-5倍）；angularjs
Ionic 中集成 Crosswalk （也能够集成其余的htnl5框架 如jqmobi）介绍：1．集成crosswalk—— ionic browser add crosswalk 2.卸载 crosswalk—— ionic browser revert android 或者 ionic browser remove crosswalkjson
2、 ionic项目简介以及Angularjs 基础(1)bootstrap
一、打包项目api
二、angularjs下载
三、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",[依赖的模块]）；
四、$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'); });
五、过滤器：过滤器能够经过一个管道字符（|）和一个过滤器添加到表达式中。
（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}}。
六、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>
3、Angularjs MVC 以及 $scope做用域 以及依赖注入中代码压缩问题
一、什么是mvc？
Model：数据模型层 View：视图层，负责展现 Controller：业务逻辑和控制逻辑
优势: 代码模块化 代码逻辑比较清晰、可移值性高，后期维护方便、代码复用，代码规模愈来愈大的时候，切分职责是大势所趋
缺点：运行效率稍微低一些
二、$scope
$scope多控制器单独做用域
var app = angular.module("myApp", []);
app.controller('firstController',function($scope){ $scope.name='张三'; });
app.controller('secondController',function($scope){ $scope.name='李四'; })
三、$rootScope ——根做用域，全局做用域
四、代码压缩问题
app.controller('name',['$scope',function($scope){$scope.name='张三';}])
app.controller('name',['scope','$rootscope',function($scope,$rootscope){......}])
避免代码压缩过程当中把$scope,$rootScope删掉，须要把不想被压缩的$scope,$rootScope写在函数前。
五、Angularjs模块的run方法
run方法初始化全局的数据 ,只对全局做用域起做用 如$rootScope
4、Angularjs $scope里面的$apply方法 和 $watch方法
一、Angularjs $scope里面的$apply方法
AngularJS外部的控制器（DOM事件、外部的回调函数如jQuery UI空间等）调用了AngularJS函数以后，必须调用$apply。在这种状况下，你须要命令AngularJS刷新自已（模型、视图等），$apply就是用来作这件事情的。
$scope.$apply(function() { $scope.variable1 = 'some value'; executeSomeAction(); });
二、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; });
5、Angularjs 工具方法 以及Angularjs中使用jquery
一、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
二、模块之间的依赖
angular.module('myapp',['ionic'])
三、使用jquery
注意：jquery要放在angularjs上面，先引用jquery
四、var obj1=document.getElementById(Id)
angular.element(obj1).html('.....');
6、 Angularjs 事件指令 input相关指令 和样式指令 DOM操做指令详解
一、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 ——直接在页面上使用{{}}，不解析{{}}
二、Angularjs input相关指令
ng-disabled
ng-readonly
ng-checked
ng-value ——ng-value="text"至关于value="text"
三、Angularjs 样式指令
ng-class{类名1：true；类名2：true} /{变量名/类名}
ng-style{color:red}/{变量名}
ng-href='{{url}}'
ng-src='{{url}}'
ng-attr-(suffix)
四、Angularjs DOM操做指令
ng-show
ng-if
ng-switch
ng-open
五、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
7、Angularjs filter过滤器以及自定义filter过滤器详解
一、过滤器
（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管道命令能够有多个
- 1. 观《phonegap第三季 angularjs+ionic视频教程 实时发布》学习笔记（二）
- 2. Phonegap第三季Angularjs+Ionic教程
- 3. Delphi视频教程第二季
- 4. 精进第一周1.1，观看Xmind视频学习笔记
- 5. # 精进第一周1.0，观看Axure视频学习笔记
- 6. #精进第一周1.0，观看Axure视频学习笔记
- 7. 尚学堂高淇Java300集 第一季第二季第三季视频教程 带源码
- 8. SSH视频教程学习笔记
- 9. 老罗Android视频教程第二季（全套视频+源码）
- 10. 《Go 学习笔记》第三版 发布
- 更多相关文章...
- • 第一个MyBatis程序 - MyBatis教程
- • 第一个Hibernate程序 - Hibernate教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • Kotlin学习（一）基本语法
-
每一个你不满意的现在，都有一个你没有努力的曾经。