AngularJS筆記
1,客戶模板
angular中,模板和數據都會被髮送到瀏覽器中,然後在客戶端進行裝配
2,MVC
(1)MVC核心概念,把管理數據的代碼(model)、應用邏輯代碼(controller)、向用戶展示數據的代碼
(view)清晰地分離開
(2)Angular應用中:
試圖就是Document ObjectModel
控制器就是Javascript類
模型數據則被儲存在對象屬性中
3,數據綁定
(1)數據綁定可自動將model和view間的數據同步
(2)Angular實現數據綁定的方式,可以讓我們把model當做程序中唯一可信的數據來源。view始終是
model的投影。當model發生變化時,會自動放映到view上。
4,經典模板系統中的數據綁定
(1)大多數模板系統中的數據綁定都是單向的
(2)把模板與model合併在一起變成view,如果在合併之後,model發生了變化,不會自動反映到view上。
(3)用戶在view上的交互也不會反映到model中,開發者必須寫大量代碼不斷地在view與model之間同步數
據。
5,AngularJS模板中的數據綁定
(1)模板是在瀏覽器中編譯的,在編譯階段產生了一個實時更新(live)的視圖
(2)不論在model或是view上發生了變化,都會立刻反映到對方。
(3)model成爲程序中唯一真實的數據來源,極大地簡化了開發着需要處理的編程模型。
6,依賴注入(軟件設計模式)
(1)依賴注入是一種軟件設計模式,用來處理代碼的依賴關係。
(2)Angular的依賴注入只是簡單的獲取它所需要的東西,而不需要創建他們所依賴的東西
類function(){}
數據綁定(雙向綁定):
1,ng-app
ng-app指令告訴Angular應該管理頁面中哪一塊
在<body ng-app="">中加入ng-app,然後內容中打`100`會輸出100,不加則輸出`100`
angular表達式:`name` name是變量
2,angular表達式
(1)angular表達式 用過$parse服務解析執行
(2)與Javascript表達式的區別:1,屬性求值:所有屬性的求值是對於scope的,而javascript是window對
象。2,寬容:表達式求值,對於undefined和null,angular是寬容的,但Javascript會產生
NullPointerExceptions = 3,沒有流程控制語句:在angular表達式裏,不能做以下任何事情:條件分支
、循環、拋出異常4,過濾器(filters):我們可以就將表達式的結果傳入過濾器鏈(filter chains)
js 表達式
var string = "alert(1+2)";
eval(string); 用eval解析string 打印出3
控制器:
<div ng-controller="firstController">
在JS文件中聲明
var firstController = function($scope){
//$scope對象我們叫做作用域
//聲明一個Model
$scope.name = "張三";
}
<div ng-bind="name"> 當頁面加載完畢div內容會自動變成name,並且添加class="ng-binding"用於
解決HTML加載時間的問題
多個控制器的作用域:
<div ng-controller="secondController"> 多個作用域
scope是一個指向應用model的object,也是表達式的執行上下文。
scope被放置於一個類似應用的DOM結構的層次結構中。
angular是怎麼知道變量發生了改變
(1)能通過固定的接口才能改變變量的值,比如說只能通過set()設置變量的值,set被調用時比較一下
就知道了。這中方法的缺點是寫法繁瑣
(2)髒檢查,將原對象複製一份快照,在某個時間,比較現在對象與快照的值,如果不一樣就表明發生變
化,這個策略要保留兩份變量,而且要遍歷對象,比較每個屬性,這樣會有一定性能問題
angular的策略
angular的實現就是實用髒檢查
1,不會髒檢查所有的對象,當對象被綁定到html中,這個對象添加爲檢查對象(watcher).
2,不會髒檢查所有的屬性,同樣當屬性被綁定後,這個屬性會被列爲檢查的屬性
在angular程序初始化時,會將綁定的對象的屬性添加爲監聽對象(watcher),也就是說一個對象綁定了N
個屬性,就會添加N個watcher。
什麼時候去髒檢查
angular所繫統的方法中都會觸發比較時間,比如:controller初始化的時候,所有以ng-開頭的時間執行
後,都會觸發髒檢查
手動觸發髒檢查
$apply僅僅只是進入angular context,然後通過$digest去觸發髒檢查
$apply如果不給參數的華,會檢查該$scope裏面的所有監聽的屬性,推薦給上參數
$scope.$apply(function(){
//這裏會去觸發髒檢查
});