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

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。 https://blog.csdn.net/jnshu_i...
這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

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

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

2.知識剖析
$scope

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

controller不一樣，他們的scope是不一樣的，那麼，若是咱們想象js那樣，作一個全局變量該怎麼辦呢？這就要說

到rootScope了。

$rootScope

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

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

scope是html和單個controller之間的橋樑，數據綁定就靠他了。rootscope是各個controller中scope的橋樑。

用rootscope定義的值，能夠在各個controller中使用。

$watch

相信使用過angularjs的同窗都知道，ng中有個比較重要的特色，叫作雙向綁定，那麼這個雙向綁定是如何實現的呢？

當咱們在建立出scope下的一個新屬性的時候，ng就會主動爲咱們新屬性加上$watch這個方法，這個方法會監聽咱們

的數據變化，當數據變化以後，就當即把view和scope上數據同步。

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

$watch(watchExpression, listener, objectEquality);

watchExpression:監聽的對象，它能夠是一個angular表達式如'name',或函數如function();注意若是是函數的話，須要加上（）不能只寫函數名；

listener:當watchExpression變化時會被調用的函數或者表達式,它接收3個參數：newValue(新值), oldValue(舊值), scope(做用域的引用)

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

$state

$state是路由中的一項服務,簡單來講就是給路由一個對應的狀態，讓其根據不一樣的狀態加載不一樣的頁面；

路由的具體用法

$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.編碼實戰
demo1
6.擴展思考
怎麼取消$watch，爲何取消？

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

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

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

參考三：AngularJS $watch用法

8.更多討論
1.$rootScope是否能夠替代$scope？

能夠，可是不建議這樣用，至關於js中的全局變量，定義過多會致使全局污染；

2.數組深拷貝當中的slice()的用法：

slice()可以基於當前數組中的一個或則多個項建立一個新數組；

該方法能夠接收1-2個參數，在只有一個參數的狀況下，該方法返回引用數組的全部項，兩個參數的狀況下，該方法返回起始和結束位置之間的（可是不包括結束項）全部項；

3.$stateParams若是沒有用url接收會怎樣？

若是沒有在url裏面接收，會致使再次提取$stateParams中的數據的時候，會找不到該數據；$stateParams對象中根本就沒有該屬性；