AngularJS筆記

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(){

//這裏會去觸發髒檢查

});


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章