观《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管道命令可以有多個
?
轉載于:https://www.cnblogs.com/liujiale/p/5953048.html
總結
以上是生活随笔為你收集整理的观《phonegap第三季 angularjs+ionic视频教程 实时发布》学习笔记（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 虚拟机不能显示u盘启动不了怎么办 虚拟机
- 下一篇： 笔记本没鼠标触摸板怎么开启 笔记本无鼠标