angularjs學習筆記，系統學習整理angular。angularjs、$scope、$parse、$interpolate ...
您好，我是一名後端開發工程師，由於工作需要，現在系統的從0開始學習前端js框架之angular，每天把學習的一些心得分享出來，如果有什麼說的不對的地方，請多多指正，多多包涵我這個前端菜鳥，歡迎大家的點評與賜教。謝謝！
第一天，簡單瞭解了其中中一些基本概念
1、angularjs的解釋
angularjs是Google旗下的一個前端js框架，其與html、css、js配合使用，從而使得web開發更加的簡單快捷。
angularjs有4大特性：MVC、模塊化、指令系統、雙向數據綁定。在學習過程中也是圍繞這幾點進行系統的學習。
2、angularjs創建一個頁面的簡單特性
a.首先要引用angularjs類庫
b.在html頁面要標註ng-app屬性，該標註表示所在範圍內的DOM結構才收angularjs所控制
c.數據綁定模塊的預設格式為{{參數名稱}}，當然這個格式是可以自定義設置的
d.第DOM標簽添加angular屬性時，都是以ng-開始
e.angular框架中數據模型數據的變更會動態的綁定顯示到view中
f.angular框架外的js修改數據模型的變化不會動態的綁定顯示到view中，需要藉助$apply手動更新
f.Scope提供$watch方法監視Model的變化
g.Scope提供$apply方法傳播Model的變化
3、創建一個簡單angularjs頁面實現數據綁定
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-app="myApp"> <div ng-controller="myContro"> <div>名字：<input type="text" ng-model="name" placeholder="請輸入姓名" /></div> <div>你輸入的姓名為：【{{name}}】請核對</div> <div ng-click="clear()">清空輸入</div> </div> </body> </html> <script src="../Scripts/angular.js"></script> <script type="text/javascript"> var myApp = angular.module("myApp", []); myApp.controller("myContro", function ($scope) { //// 清空輸入函數 $scope.clear = function () { $scope.name = ""; } //// 2s後直接給name賦值，但是試圖不會實時更新 setTimeout(function () { $scope.name = "開始輸入"; }, 2000); //// 10s後給name賦值，並手動 setTimeout(function () { $scope.$apply(function () { $scope.name = "輸入結束"; }); }, 10000); //// $watch監控模型name中字的改變 $scope.$watch("name", function (newValue, oldValue) { if (newValue != oldValue) { console.log("name值又發生了改變：改變前的值：【" + oldValue + "】、改變後的值【" + newValue + "】"); } }); }); </script>
4、模塊
為了代碼的高效，整潔，提高代碼的可重用性、可讀性，angular引入了模塊的概念module,簡單的裡面，模塊就是講頁面代碼分割成不同的獨立模塊。
一個應用可以包含多個模塊，各個模塊包含其核心的邏輯代碼，不同模塊間相互獨立。一個ng-app代表一個模塊。
AngularJS允許我們使用angular.module()方法來聲明模塊，這個方法能夠接受兩個參數， 第一個是模塊的名稱，第二個是依賴列表，也就是可以被註入到模塊中的對象列表。 angular.module('myApp', []);
5、作用域
angular作用域是其最主要核心特征之一，通過$scope來表示。作用如下：
a.應用的作用域是和應用的數據模型相關聯的
b.同時作用域也是表達式執行的上下文。
c.$scope 對象是定義應用業務邏輯、控制器方法和視圖屬性的地方。
d.作用域是視圖和控制器之間的膠水
e.$scope對象就是一個普通的JavaScript對象，我們可以在其上隨意修改或添加屬性。
g.$scope也有父子級之分，和麵向對象的類的繼承一樣，子級的$scope繼承父級的$scope,其中跟$scope表示為：$rootScope
h.提供觀察者以監視數據模型的變化
i.可以將數據模型的變化通知給整個應用，甚至是系統外的組件
j.可以進行嵌套，隔離業務功能和數據
k.給表達式提供運算時所需的執行環境
6、控制器
控制器的關鍵詞為ng-controller,其作用還是講頁面邏輯根據功能模塊分割中更小模塊。
控制器是可以嵌套的，作用域也是嵌套的
定義使用方式如下：
var app = angular.module('模塊名稱', []);
app.controller('控制器名稱', function($scope) {
控制器內的業務邏輯代碼...
});
7、表達式
angular的表達式主要學習兩個表達式：解析達式，關鍵詞（ $parse）、插值字元串表達式，關鍵詞（ $interpolate）
a.解析達式，關鍵詞（ $parse），其結果是一個函數，也就是執行一個邏輯運算表達式
特征：解析異常不會拋出異常
代碼實例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-app="myApp" ng-controller="myContro"> <div> 表達式：<input type="text" ng-model="expression" placeholder="請輸入表達式"/> </div> <div> <input type="button" value="開始運算" ng-click="calculat()"/> </div> <div>表達式運算結果：{{reult}}</div> </body> </html> <script src="../Scripts/angular.js"></script> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("myContro", function ($scope, $parse) { $scope.expression = ""; $scope.reult = ""; $scope.calculat = function () { $scope.reult = $parse($scope.expression)($scope); } }); </script>
b.插值字元串表達式，關鍵詞（ $interpolate）
簡單理解就是格式化字元串，通過{{站位字元串名稱}}對字元串解析站位，然後通過關鍵詞$interpolate返回的函數對站位字元串名稱賦值，得到最終的字元串。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-app="myApp" ng-controller="myContro"> <div> 表達式：<input type="text" ng-model="name" placeholder="請輸入名稱" /> </div> <div> <input type="text" multiple="" ng-model="textValue"/> </div> <div>預覽：{{reviewReult}}</div> </body> </html> <script src="../Scripts/angular.js"></script> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("myContro", function ($scope, $interpolate) { $scope.name = ""; $scope.textValue = ""; $scope.reviewReult = ""; $scope.reviewReultTemp = "{{name}},您好,{{textValue}}"; var template = $interpolate($scope.reviewReultTemp); $scope.$watch("name", function (newValue, oldValue, ) { if (newValue != oldValue) { $scope.reviewReult = template({ name: $scope.name, textValue: $scope.textValue}); } }); }); </script>
今天就到此為止，明天我們繼續，加油！
