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的内容