AngularJS 學習筆記 （二） 基本概念和用法 之 MVC
阿新 • • 發佈：2020-10-09
如何使用controller
MVC-Controller的實現方式1
PS：玩具級的開發中可以使用，但無法應對大型專案。
MVC-Controller的實現方式2
PS：這樣開發會比較清晰職責，但是如果兩個控制器是一模一樣的。請參照第三種方法的圖2。
MVC-Controller的實現方式3
PS寫一個通用控制器，然後繼承它。是不推薦的。而是使用下圖的service：
PS：把通用的東西寫成一個服務，讓控制器去呼叫它（而不是去繼承它）。
Controller使用過程中的注意點：
- 不要試圖去複用Controller，一個控制器一般只負責一小塊檢視。
- 不要在Controller中操作DOM，這不是控制器的職責。
- 不要在Controller中格式化資料，ng有很好的表單控制元件。
- 不要在Controller裡面做資料過濾，ng有$filter服務。
- 一般來說Controller之間不是互相呼叫，控制器之間的互動會通過事件進行。
如何複用Module
以上圖為例：
- 頁面載入完成後，以ng-app標籤開始，內部所有操作由AngularJS接手。（我覺得說的有點大）
- 指令ng-model = "greeting.text" 定義的是一個全域性模型。在ng-app範圍內可以任意使用。
- model不需要手動建立，AngularJS已經做的很好了。
如何複用view？
PS：
- HTML標籤是<hello></hello>是View（檢視）。
- *.directive("標籤名",function(){return {json格式} }) 設定一個標籤名，以一個什麼樣子顯示。
- 在MyModule中可以隨意使用指定標籤。
AngularJS的MVC是藉助於$scope實現的！！！
$scope是分層的，像是樹形的。最頂層是$rootScope
$scope的事件：
- $emit("MyEvent") 同層和上層響應事件。
- $broadcast("MyEvent") 同層和下層響應時間
- 會不會有其他的呢？
$scope的事件響應：
$scope.$on()("事件引數",function(){$scope.count++; // })
PS：當傳入時間引數時（參照 $emit $broadcast ），發生function中的方法。
神奇的$scope：
- $scope是一個普通的JS物件。
- $scope提供了一些工具的方法，$watch() / $apply()
- $scope是表示式執行的環境，或者叫做作用域。
- $scope是一個樹形結構，與DOM標籤平行。
- 子層 $scope 去繼承父$scope的屬性和方法。
- 每一個AngularJS應用都只有一個根 $scope 物件（一般位於ng-app）
- $scope 是可以發事件的，類似DOM事件，可以向上，也可以向下。
- $scope 不僅僅是MVC的基礎，也是後面實現雙向資料繫結的基礎。
- 除錯，可以使用angular.element[$0].scope() 進行除錯(當前元素的$scope)。
$scope的生命週期：
- Creation 1、建立
- Watcher registration 2、註冊監控
- Model mutation 3、檢測模型的變化
- Mutation observation 4、觀察變化
- Scope destruction 5、銷燬Scope
如果那裡說的不對，請指教。
如果哪裡理解偏差，請指正。
謝謝！
轉載於:https://my.oschina.net/asktao/blog/686020