angualr控制器是什麼？

這裏是修真院前端小課堂，每篇分享文從

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

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

【angualr控制器是什麼？】

 

你們好，我是IT修真院深圳分院第11期的學員葉澤彪，一枚正直純潔善良的WEB程序員，今天給你們分享一下，修真院官網JS任務2，深度思考中的知識點——angualr控制器是什麼？

 

1.背景介紹

瞭解控制器以前，咱們先來了解一下什麼是MVVM模式。MVVM模式是Model-View-ViewMode（模型-視圖-視圖模型）模式的簡稱。

 

在angular中MVVM模式主要分爲四部分：

View：它專一於界面的顯示和渲染，在angular中則是包含一堆聲明式Directive的視圖模板。

ViewModel：它是View和Model的粘合體，負責View和Model的交互和協做，它負責給View提供顯示的數據，以及提供了View中Command事件操做Model的途徑；在angular中$scope對象充當了這個ViewModel的角色；

Model：它是與應用程序的業務邏輯相關的數據的封裝載體，它是業務領域的對象，Model並不關心會被如何顯示或操做，因此模型也不會包含任何界面顯示相關的邏輯。在web頁面中，大部分Model都是來自Ajax的服務端返回數據或者是全局的配置對象；而angular中的service則是封裝和處理這些與Model相關的業務邏輯的場所，這類的業務服務是能夠被多個Controller或者其餘service複用的領域服務。

Controller：這並非MVVM模式的核心元素，但它負責ViewModel對象的初始化，它將組合一個或者多個service來獲取業務領域Model放在ViewModel對象上，使得應用界面在啓動加載的時候達到一種可用的狀態。

 

2.知識剖析

什麼是controller？AngularJS 控制器是常規的 JavaScript 對象。AngularJS 控制器 控制 AngularJS 應用程序的數據。在angularJS中，controller是一個javascript函數/類，用於操做做用域中，各個對象的初始狀態以及相應的行爲。

 

也就是說，在HTML中，綁定ng-controller的那個DOM節點內的全部子標籤，將會是當前controller的做用域。在大型項目中,若是HTML DOM 中有多個做用域，這時你就須要知道你使用的 scope 對應的做用域是哪個。

 

angularJS中view層解析是經過controller的做用域來將$scope對象解析成相應的內容，所以咱們能夠在同一個界面上劃分不一樣的模塊，經過不一樣的控制器控制不一樣的模塊來進行開發，這樣經過劃分模塊的開發方式，對從此維護代碼帶來了便利。

 

3.常見問題

controller之間的數據該如何傳輸？

 

4.解決方案

使用service實現controller之間的數據傳輸。

controller是相對獨立的，兩個controller之間，內存是不共享的，同級DOM下，兩個controller是沒法互相訪問其中的屬性或者方法的。

那麼，在實際項目中，咱們會有不少的頁面和控制器，不一樣頁面下的controller之間有時候是須要傳輸數據的，以前咱們學習了localStorage，用於頁面之間的傳參，而官方建議頁面之間經過service互相訪問。

 

 

5.編碼實戰

 

 

6.擴展思考

在多個controller中進行信息的溝通還有哪些？

1.$rootscope

$scope是html和單個controller之間的橋樑，數據綁定就靠他了。而$rootscope能夠被認爲是全局$scope, 在各個controller裏面均可以顯示，也均可以修改。

2.做用域繼承

做用域嵌套帶來的父子做用域的繼承關係也能夠算是一種父子做用域之間的通訊方式。

3.做用域繼承+$watch

爲了解決做用域繼承不能解決的從子孫到祖先的數據傳遞問題，能夠用$scope.$watch函數來監視數據變化。

 

7.參考文獻

參考一：https://blog.csdn.net/ft63022...

參考二：https://blog.csdn.net/ft63022...

參考三：http://www.cnblogs.com/whitew...

參考四：https://blog.csdn.net/lai_xu/...

 

8.更多討論

1.controller對應的是什麼？

每個controller對應的都是本身控制的一塊視圖，只能夠控制這個視圖內的htnl元素。

2.爲何有時候controller不起做用？

這個涉及的可能比較多，ng-app未定義，或者重複定義了，controller須要控制的東西在controller以外，對應的不是當前的controller。

1. service怎麼傳參？

在請求裏面的url裏傳參

 

9.今天的分享就到這裏啦，歡迎你們點贊、轉發、留言、拍磚~