一、Angular优点:
1、MVC:职责清晰,代码模块化。
2、模块化
3、指定系统——directive:我们已经在模板中看到了一些新的属性,这些属性不属于HTML规范。例如:我们引入了双花括号用来实现数据绑定;引入了ng-controller用来指定每个控制器负责监视视图中的哪一部分;引入ng-model,用来把输入数据绑定到模型中的一部分属性上。我们把这些指令叫做HTML扩展指令。
4、双向数据绑定
5、依赖注入:进行数据绑定的$scope对象会被自动传递给我们;我们并不需要调用任何函数去创建这个对象。只要把$scope对象放在控制器的构造函数里面,然后就可以获取它了。并且$scope并不是我们唯一可以获取的东西。如果我们想把数据绑定到用户浏览器中的URL地址上,可以使用$location对象,只要把$location对象放到我们的构造函数中即可,例如:
function HelloCtroller($scope,$location) { $scope.greeting={text:'Hello'}; //这里可以使用$location对象来做一些很酷的事儿}
这种神奇的效果是通过angular的依赖注入机制实现的。依赖注入让我们遵守这样一种开发风格:我们的类只是简单获取它们所需要的东西,而不需要创建那些它们所依赖的东西。
二、Model View Controller
Document {
{someText.message}}
其中,<p>{
{someText.message}}</p> 采用双花括号插值语法,把新的内容插入到现有的模板中。控制器就是你所编写的类或者类型,它的作用是告诉Angular该模型是由哪些对象或者基本数据构成的,只要把这些队形或者基本数据设置到$scope对象上即可,$scope对象会被传递给控制器。
通过$scope对象把数据模型和函数暴露给视图(UI模板)。
这个版本中,我们把ng-app属性设置成了模块的名称myApp。然后我们再调用angular对象创建了一个名为myApp的模块,并且把控制器函数传递给了myApp模块的controller函数。
采用模块机制可以把东西从全局命名空间中隔离开。
三、模块和数据绑定
1、表单输入
Document
对于输入元素说,可以使用ng-change属性来指定一个控制器方法,一旦用户修改了输入元素,这个方法就会被调用。
当用户在这个特定的输入框中输入时,输入框就会正确地刷新。但是,如果还有其他输入框也绑定到模型中的这个属性上,会怎么样呢?如果接受到服务器的数据,导致数据模型进行刷新,又会怎样?
为了能够正确地刷新输入框,而不管他是通过何种途径进行刷新的,我们需要使用$scope中的$watch函数。最基本的一点就是,可以调用$watch()函数来监视一个表达式,当这个表达式发生变化时就会调用一个回调函数。
Document
请注意,$scope.$watch('funding.startingEstimate',computeNeeded) 需要监视的表达式位于引号中,它是一个字符串。这个字符串会被当做angular表达式来执行。当他的值发生变化时,就调用computeNeeded()。
2、列表、表格以及其他迭代型元素
Document
ng-repeat指令可以通过$index返回当前引用的元素序号;还可以通过$first、$middle、$last,ng-repeat指令返回布尔值,告诉你当前元素是否是集合中的第一个元素、中间的某个元素,或者最后一个元素。
3、隐藏和显示/CSS类和样式
Document
- disintegrate
- erase from history
现在可以动态的设置css类和样式了,只要使用{
{}}插值语法把它们进行数据绑定即可。4、ng-class、ng-style
Document { {messageTxt}}
若需要将表格中被选中的行进行高亮显示:
Document
{ {student.id}} | { {student.name}} |
在上面中,我们把ng-class设置为{selected:$index==selectRow}。这样做的效果就是,当模型属性selectRow的值等于ng-repeat中的$index时,selected样式就会被设置到那一行上。而ng-click则是告诉控制器用户点击了哪一行。
5、使用$watch 监控数据模型的变化
当你的数据模型中某一部分发生变化时,$watch函数可以向你发出通知。你可以监控单个对象的属性,也可以监控需要经过计算的结果(函数),实际上只要能够被当作属性访问到,或者可以当做一个Javascript函数被计算出来,就可以被$watch函数监控。它的函数签名为:$watch(watchFn,watchAction,deepWatch);
$watch函数会返回一个函数,当你不再需要接收变更通知时,可以用这个返回的函数注销监控器。
将(二)中的购物车功能进行扩充完整。例如,当用户添加到购物车中的商品价值超过100美元时,我们会给他10美元的折扣。如下:
1 2 3 4 5Document 6 7 8Your Order
910 { {item.title}}11 12 { {item.price|currency}}13 { {item.price*item.quality|currency}}14 1516total:{ {totalCart()|currency}}17discount:{ {bill.discount|currency}}18subtotal:{ {subtotal()|currency}}19 20 50 51
另:watch中的性能注意事项:
上个例子可以正确地运行,但是却潜在性能问题。如果你在totalCart()中打个调试断点,你会发现在渲染这个页面时,该函数被调用了6次。虽然在当前这个应用中它所引起的性能问题并不明显,但是在更加复杂的应用中,运行6次就会成为一个问题。
为什么是6次呢?其中3次我们可以很容易跟踪到,因为在以下每种情况下,它都会运行一次:
- 模板{ {totalCart()|currency}}
- subtotal()函数
- $watch()函数
然后angular把以上整个过程又重复了一遍,最终是6次。angular这样做的目的是,检测模型中的变更已经被完整地进行了传播,并且模型已经被设置好。angular的做法是,把所有被监控的属性都拷贝一份,然后把它们和当前的值进行比较,看看是否发生了变化。
有几种方法可以解决这个问题。一种方法是监控items数组的变化,然后重新计算$scope属性中的总价、折扣和小计值。
Document Your Order
{ {item.title}} { {item.price|currency}} { {item.price*item.quality|currency}}total:{ {bill.totalCart|currency}}discount:{ {bill.discount|currency}}subtotal:{ {bill.subtotal|currency}}
请注意,上面的代码在调用$watch函数时把items写成了一个字符串。这样做是可以的,因为$watch函数既可以接受一个函数(就像我们之前说的),也可以接受一个字符串。如果把一个字符串传递给了$watch函数,它将会在被调用的$watch作用域中当成表达式来执行。
对于这种应用来说,这种策略可能会工作得很好。但是,既然我们在监控items数组,angular就会制作一份数组的拷贝,用来进行比较操作。对于大型的items数组来说,如果每次在angular显示页面时只需要重新计算bill属性,那么性能会好很多。
可以通过创建一个带有watchFn的$watch函数我们就可以实现这一点,watchFn将会像下面这样来重新计算属性值:
myApp.controller("CartController",["$scope",function($scope){ $scope.bill={}; $scope.items=[ {title:'Paint pots',quality:8,price:3.95}, {title:'Polka dots',quality:17,price:12.95}, {title:'Pebbles',quality:5,price:6.95} ]; $scope.$watch(function(){ var total=0; for (var i = 0,len = $scope.items.length; i100?10:0; $scope.bill.subtotal=total-$scope.bill.discount; }) $scope.remove=function(index){ console.log(index); $scope.items.splice(index,1) } }]);