angularjs1學習筆記--持續更新

angularJS使用的MVC為何不屬於二十三種設計模式之一？

MVC被GoF (Gang of Four，四人組， 《Design Patterns: Elements of Reusable Object-Oriented Software》/《設計模式》一書的作者：Erich Gamma、Richard Helm、Ralph Johnson、John Vlissides)當做“一組用於構建用戶界面的類集合”。MVC被認為是三種經典設計模式的演變：：觀察者模式(Observer)(Pub/Sub), 策略模式(Strategy)和組合模式(Composite)。MVC屬於架構模式，而不是設計模式。

angularJS的廣播事件，$emit與$broadcast

要想理解angularJS的廣播事件，首先要理解$scope的作用域。$scope的作用域是樹狀結構的，有且有唯一一個根作用域$rootScope。聯繫到樹狀的結構，可以更好的理解angularJS提供兩種事件：向上傳播事件$emit以及向下傳播事件$broadcast。其中向上傳播事件$emit能夠被該樹上的所有父$scope以及同級$scope。向下傳播事件以當前$scope為根，傳播所有的子$scope控制器。這兩種廣播事件當然也對自身控制器起作用。

 下麵是我自己寫的一個例子，介紹了$emit與$broadcast的事件的作用域。

html Code:

<div ng-controller="parentController">
　　<p>{{breadCrumb}},parentController</p>
　　<div ng-controller="currentController">
　　　　<p>{{breadCrumb}},currentController</p>
　　　　<button ng-click="$emit('MyEvent')">
　　　　　　$emit("MyEvent")
　　　　</button>
　　　　<button ng-click="$broadcast('MyEvent')">
　　　　　　$broadcast("MyEvent")
　　　　</button>
　　　　<div ng-controller="childController">
　　　　　　<p>{{breadCrumb}},childController</p>
　　　　</div>
　　</div>
　　<div ng-controller="sameLevelController">
　　　　<p>{{breadCrumb}},sameLevelController</p>
　　</div>
</div>
<div ng-controller="other_controller">
　　<button ng-click="$emit('MyEvent')">
　　　　$emit("MyEvent")
　　</button>
　　<button ng-click="$broadcast('MyEvent')">
　　　　$broadcast("MyEvent")
　　</button>
　　<p>{{breadCrumb}},other_controller</p>
</div>

JavaScript Code:

function parentController($scope) {
　　$scope.breadCrumb = 1;

　　$scope.$on("MyEvent", function() {
　　　　$scope.breadCrumb++;
　　});

}

function currentController($scope) {
　　$scope.$on("MyEvent", function() {
　　　　$scope.breadCrumb--;
　　});
}
function other_controller($scope) {
　　$scope.breadCrumb = 10;

　　$scope.$on("MyEvent", function() {
　　　　$scope.breadCrumb--;
　　});
}
function sameLevelController($scope) {
　　$scope.$on("MyEvent", function() {
　　　　$scope.breadCrumb=$scope.breadCrumb+2;
　　});
}
function childController($scope) {
　　$scope.$on("MyEvent", function() {
　　　　$scope.breadCrumb=$scope.breadCrumb+10;
　　});
}

通過點擊按鈕觀察數字的變化，可以明顯的發現樹型結構作用域對html界面更新的影響，同時還可以註意到子$scope會繼承最近路徑上父$scope傳來的變數值。

 $rootScope綁定的範圍

在angularJS啟動的時候綁定ng-app的內容