angularjs应用骨架(2)
时隔一个星期，接着上一篇的angularjs应用骨架继续聊聊angularjs其他的其他的内容。
区分UI和控制器的职责
在应用控制器中有三种职责：
1、为应用中模型设置初始状态
2、通过$scope对象把数据模型和函数暴露给视图（UI模版）
3、监视模型其余部分的变化，并采取相应的动作
我这主要想说的是第三项的功能：为了让控制器保持小巧可控制的状态，我们的建议是，为视图中的每一块功能区域创建一个控制器。就是说如果你有一个菜单，就创建一个MenuController，如果你有一个面包屑导航就创建一个NavController，你可能已经明白，但是需要明确的是，控制器是绑定在DOM上的，这些片段就是它们需要管理的内容。有两种方式可以把控制器关联到DOM节点上，第一种是通过ng-controller属性来声明，另一种是通过路由把它绑定到一个动态加载的DOM模版片段上，这个模版叫做视图。
如果你的UI带有一些非常复杂的区域，你可以创建嵌套的控制器，它们可以通过继承树结构来共享数据模型和函数，这样你就可以保持代码的简单和可维护性。嵌套控制器非常的简单，只需要把控制器设置到DOM元素内部嵌套的元素上即可，示例如下：
1 <div ng-controller="ParentController"> 2 <div ng-controller="ChildController"></div> 3 </div>
虽然我们把这中方式叫做控制器嵌套，但真实的嵌套发生在$scope对象上。通过内部的原型继承机制，父控制器对象上的$scope会被传递给内部嵌套控制器的$scope.具体到上面的例子就是，ChildController上的$socpe可以访问到ParentController上的$scope对象上的所有属性（和函数）。
利用$scope暴露模型和数据
利用向控制器传递$scope对象的机制，可以把模型数据暴露给视图。在你的应用中可能还有其他的数据，但是只有通过$scope触及这些数据，angular才会把它当成数据模型的一部分。你可以把$scope当成一个上下文环境，它让数据模型上的变化变得可以观察。
对于显式的创建$scope的属性我们已经看见过许多例子。例如：$scope.count=5。还可以通过模版间接的创建数据模型。你可以通过一下几种方式来实现这一点。
1、通过表达式。既然表达式是在控制器中的$scope环境中执行的，而这个$scope与它们管理的元素有关，那么在表达式中设置属性和属性控制器中的$scope属性值是一样的 。也就是说，可以这样做：
1 <button ng-click="count=3"> Set count to 3</button> 2 <div ng-controller="CountController"> 3 <button ng-click="SetCount()">Set count to 3</button> 4 </div> 5 <script type="text/javascript"> 6 function CountController($scope){ 7 $scope.SetCount= function () { 8 $cope.count=3; 9 }; 10 } 11 </script>
2、在表单输入项上使用ng-modal。与表达式类似，ng-model上指定模型参数同样工作在外层控制器内。唯一不同点在于，这样会在表单项和指定的模型之间建立双向绑定关系。
使用$watch监控数据模型的变化
在$scope内置函数中，用的最多的就是$watch函数了，当你的数据模型中某一部分发生变化时，$watch函数可以向你发出通知。你可以监控单个对象的属性，也可以监控需要经过计算的结果（函数），实际上只要是能够当作属性访问到，或者可以当作一个javascript函数被计算出来，就可以被$watch函数监控。它的函数签名是$watch(watchFn,watchAction,deetWatch).
其中参数说明：
watchFn:该参数是一个带有angular表达式或者函数的字符串，它会返回被监控in个的数据模型的当前值。这个表达式会被执行很多次，所以要保证它不会长生其他副作用。也就是说，要保证它被调用很多次而不后悔改变状态。
watchAction：这是一个函数或者表达式，当watchFn发生变化时会被调用。如果是函数形式，它会接收到watchFn的新旧两个值，以及作用域对象的引用。其函数签名为function(newValue,oldValue,scope)。
deepWatch:如果设置为true，会告诉angualr去检查被监控对象的每个值是否发生变化。那么运算负担就会比较重。
示例：当用户添加到购物车中的价值超过美元的时候就会给美元的折扣：
1 <!DOCTYPE html> 2 <html ng-app="MyApp"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="static/js/angular.js" type="text/javascript"></script> 7 <script src="static/app/controller/shopingcartcontroller.js" type="text/javascript"></script> 8 </head> 9 <body ng-controller="myController"> 10 <div> 11 <h1>Your Shoping Cart</h1> 12 <div ng-repeat="item in items"> 13 <span>{{item.title}}</span> 14 <input type="text" ng-model="item.quantity"/> 15 <span>{{item.quantity | currency}}</span> 16 <span>{{item.quantity * item.price | currency}}</span> 17 <button ng-click="remove($index)">remove</button> 18 </div> 19 20 <div>total:{{totalCart()| currency}}</div> 21 <div>Discount:{{bill.discount | currency}}</div> 22 <div>Subtotal:{{ subtotal() | currency}}</div> 23 </div> 24 </body> 25 </html>
1 /** 2 * Created by Administrator on 2015/6/12. 3 */ 4 var app=angular.module('MyApp',[]); 5 app.controller('myController', function ($scope) { 6 $scope.bill={}; 7 $scope.items=[ 8 {title:"羽毛球",quantity:8,price:3.99}, 9 {title:"篮球",quantity:17,price:1.99}, 10 {title:"足球",quantity:5,price:3.99} 11 ]; 12 13 $scope.remove=function(index){ 14 $scope.items.splice(index,1); 15 } 16 17 18 $scope.totalCart= function () { 19 var total=0; 20 for(var i= 0,len=$scope.items.length;i<len;i++){ 21 total=total + $scope.items[i].price * $scope.items[i].quantity; 22 } 23 return total; 24 }; 25 26 $scope.subtotal= function () { 27 return $scope.totalCart() - $scope.discount; 28 }; 29 30 31 function calulateDdiscount(newvalue,oldvalue,scope){ 32 $scope.bill.discount=newvalue > 100 ? 10 :0; 33 }; 34 35 $scope.$watch($scope.totalCart,calulateDdiscount); 36 });
效果图：
$watch()中的性能注意事项
虽然前面的例子能够正确的执行，但是却存在潜在的性能问题。如果你在totalCart()上打一个断点，你会看到，渲染页面时该函数被调用了6次。那么问题来了，为什么会是6次呢？让我们来分析一下：其中的三次我们能容易的追踪到：
1、模版{{totalCart() | currency}}
2、subtotal()函数
3、$watch()函数
然后angualr又把上诉过程重复一边，最终就是6次。当然有方案解决问题：一种是监控数组的变化，然后重新计算$scope属性中的总价、折扣和小计值。
为了方便，我们把模版修改成这样：
1 <div>total:{{bill.total| currency}}</div> 2 <div>Discount:{{bill.discount | currency}}</div> 3 <div>Subtotal:{{ bill.subtotal | currency}}</div>
我们会监控items数组，当数组发生任何变化时，调用一个函数来计算总价，如下：
1 <!DOCTYPE html> 2 <html ng-app="MyApp"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="static/js/angular.js" type="text/javascript"></script> 7 <script src="static/app/controller/shopingcartcontroller.js" type="text/javascript"></script> 8 </head> 9 <body ng-controller="myController"> 10 <div> 11 <h1>Your Shoping Cart</h1> 12 <div ng-repeat="item in items"> 13 <span>{{item.title}}</span> 14 <input type="text" ng-model="item.quantity"/> 15 <span>{{item.quantity | currency}}</span> 16 <span>{{item.quantity * item.price | currency}}</span> 17 <button ng-click="remove($index)">remove</button> 18 </div> 19 20 <div>total:{{bill.totalCart| currency}}</div> 21 <div>Discount:{{bill.discount | currency}}</div> 22 <div>Subtotal:{{ bill.subtotal | currency}}</div> 23 </div> 24 </body> 25 </html>
1 /** 2 * Created by Administrator on 2015/6/12. 3 */ 4 var app = angular.module('MyApp', []); 5 app.controller('myController', function ($scope) { 6 $scope.bill = {}; 7 $scope.items = [ 8 {title: "羽毛球", quantity: 8, price: 3.99}, 9 {title: "篮球", quantity: 17, price: 1.99}, 10 {title: "足球", quantity: 5, price: 3.99} 11 ]; 12 13 $scope.remove = function (index) { 14 $scope.items.splice(index, 1); 15 } 16 17 var calulateTotal = function () { 18 var total = 0; 19 for (var i = 0, len = $scope.items.length; i < len; i++) { 20 total = total + $scope.items[i].price * $scope.items[i].quantity; 21 } 22 $scope.bill.totalCart = total; 23 $scope.bill.discount = total > 100 ? 10 : 0; 24 $scope.bill.subtotal=total - $scope.bill.discount; 25 }; 26 27 $scope.$watch("items", calulateTotal,true); 28 });
效果图就不上了，和上面是一样的。但是你在calulateTotal()函数上打个断点，你会发现页面渲染时只调用了一次。这样在性能上就有了很大的提升。请注意，上面的代码在调用$watch函数时把items写成了一个字符串，那是因为$watch函数可以接受一个函数也可以接受一个字符串，如果把一个字符串传给函数，将会在被调用的$scope作用域中当作表达式来执行。但是，监控items数组，那么angular就要拷贝一份items数组用来比较操作。对于大型的items数组来说，如果angular每次显示页面只需要重新计算bill的值那么性能会好很多。
模版没有改变，控制器发生变化：
1 /** 2 * Created by Administrator on 2015/6/12. 3 */ 4 var app = angular.module('MyApp', []); 5 app.controller('myController', function ($scope) { 6 $scope.bill = {}; 7 $scope.items = [ 8 {title: "羽毛球", quantity: 8, price: 3.99}, 9 {title: "篮球", quantity: 17, price: 1.99}, 10 {title: "足球", quantity: 5, price: 3.99} 11 ]; 12 13 $scope.remove = function (index) { 14 $scope.items.splice(index, 1); 15 } 16 17 //var calulateTotal = function () { 18 // var total = 0; 19 // for (var i = 0, len = $scope.items.length; i < len; i++) { 20 // total = total + $scope.items[i].price * $scope.items[i].quantity; 21 // } 22 // $scope.bill.totalCart = total; 23 // $scope.bill.discount = total > 100 ? 10 : 0; 24 // $scope.bill.subtotal=total - $scope.bill.discount; 25 //}; 26 27 $scope.$watch(function () { 28 var total = 0; 29 for (var i = 0, len = $scope.items.length; i < len; i++) { 30 total = total + $scope.items[i].price * $scope.items[i].quantity; 31 } 32 $scope.bill.totalCart = total; 33 $scope.bill.discount = total > 100 ? 10 : 0; 34 $scope.bill.subtotal=total - $scope.bill.discount; 35 }); 36 });
监控多个东西
如果想监控多个属性或对象，并且其中任何一个发生变化时就去执行一个函数。那该怎么做呢？其实在上面的例子中已经体现出来了。就是有三个商品，不管哪个商品的数量发生改变都会执行calulateTotal()函数，并且我在$watch函数的第三个参数设置成true。
基本上解决上诉问题有两个选择：
1、监控这些属性连接起来之后的值
2、把它们放到一个数组和对象中，然后个deepWatch传递一个true值
如：
$scope.$watch('things.a + things.b',callMe());
或者
$scope.$watch('things',callMe(),true);
如果觉得对你有所帮助就打点一下吧
