觀《phonegap第三季 angularjs+ionic視頻教程實時發佈》學習筆記（一）

時間 2019-11-09

標籤 phonegap 第三季 angularjs+ionic angularjs ionic 視頻教程實時發佈學習筆記欄目 AngularJS 简体版

原文原文鏈接

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管道命令能夠有多個