angular之中，$state $watch $scope $rootScope 分別是什麼？

本人是腹黑 優雅的程序員一小枚~~

angular之中，$state $watch $scope $rootScope 分別是什麼？

1.背景介紹

在平時的編碼中，咱們總會想着有什麼方法可以簡化咱們的工做流程，讓咱們只專心於業務邏輯和數據的處理，而angularjs 就爲咱們程序員實現了這一點。$scope $rootScope $watch 和 $state就是裏面的幾個方法，今天着重跟你們討論一下這 幾個方法

2.知識剖析

（1）$scope

$scope在angularjs中，你能夠把它理解成做用域，每一個不一樣的controller，都具備它不一樣的做用域，因此 controller不一樣，他們的scope是不一樣的，

當你在 AngularJS 建立控制器時，你能夠將 $scope 對象看成一個參數傳遞:

{{carname}}

當在控制器中添加 $scope 對象時，視圖 (HTML) 能夠獲取了這些屬性。 視圖中，你不須要添加 $scope 前綴, 只須要添加屬性名便可，如： {{carname}}。 若是咱們想象js那樣，作一個全局變量該怎麼辦呢？這就要說 到rootScope了。

（2）$rootScope

$rootScope是由angularJS加載模塊的時候自動建立的，每一個模塊只會有1個rootScope;

$rootScope就至關於一個全局做用域，因此咱們保存在其中的東西是全局性的，在任一controller之中都可以使用

scope是html和單個controller之間的橋樑，數據綁定就靠他了。rootscope是各個controller中scope的橋樑。 用rootscope定義的值，能夠在各個controller中使用。

（3）$watch:

相信使用過angularjs的同窗都知道，ng中有個比較重要的特色，叫作雙向綁定，那麼這個雙向綁定是如何實現的呢？ 當咱們在建立出scope下的一個新屬性的時候，ng就會主動爲咱們新屬性加上$watch這個方法，這個方法會監聽咱們 的數據變化，當數據變化以後，就當即把view和scope上數據同步。

雖然angular會爲每個ng-model添加一個$watch事件，但咱們還能夠定義本身的$watch，因此須要瞭解一下$watch的用法；

$watch(watchExpression, listener, objectEquality);

watchExpression,須要監控的表達式

listener,處理函數，函數參數以下 function(newValue,oldValue, scope)

objectEquality,是否深度監聽，若是設置爲true,它告訴Angular檢查所監控的對象中每個屬性的變化. 若是你但願監控數組的個別元素或者對象的屬性而不是一個普通的值, 那麼你應該使用它

（4）$state

在ajax技術發展普及以後，由於其不會留下歷史記錄方便瀏覽器訪問和對於seo不友好的特色，一個新技術應運而生： 路由，$state就是路由中的一項服務。

路由的具體用法

此處可點→→→ui-rooter的使用方法

（5）$stateParams

$stateParams是一個對象，包含 url 中每一個參數的鍵/值。$stateParams能夠爲控制器或者服務提供 url 的各個部分。 注意：$stateParams必須與一個控制器相關，而且$stateParams中的「鍵/值」也必須事先在那個控制器的url屬性中有定義。

3.常見問題

watch的深度監聽是什麼意思呢？有什麼優缺點呢？

4.解決方案

$watch在對待基本類型和引用類型會有不一樣的處理方式，這就要首先說一說$watch函數的第三個參數。它在默認狀況下是false。在默認狀況下，即不顯式指明第三個參數或者將其指明爲false時，咱們進行的監視叫作「引用監視」。引用監視的原詞的「reference watch」，它的意思是隻要監視的對象引用沒有發生變化，就不算它發生了變化。具體來講，在上面的例子中，只要是items的引用沒有發生變化，就算items中的一些屬性發生了變化，$watch也會當作沒有看見。

若是咱們將$watch的第三個變量設置爲true，那麼此時咱們進行的監視叫作「全等監視」，原詞是「equality watch」。此時，只要$watch的對象有一點風吹草動，它立刻就跳出來

既然全等監視這麼好，那麼咱們爲何不直接用全等監視呢？固然，任何事情都有好的壞的兩個方面，全等監視當然是好，可是它在運行時須要先遍歷整個監視對象，而後在每次$digest以前使用angular.copy()將整個對象深拷貝一遍而後在運行以後用angular.equal()將先後的對象進行對比，可是到了實際生產時，咱們要面對的數據千千萬萬，可能由於全等監視這一個設置就會消耗大量的資源，讓應用停滯不前

5.編碼實戰

demo

6.擴展思考

怎麼取消$watch，爲何取消？

$watch的性能消耗較大，因此對於已經不須要監視的watch，記得定時取消掉。

7.參考文獻

參考一：Angular.js中使用$watch監聽模型變化

參考二：關於$watch應用的一些小技巧

參考三：AngularJS $watch用法

8.更多討論

PPT

視頻

感謝你們觀看奧。