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