AngularJS学习笔记三
模板和数据绑定
Angular应用中的模板只是一些HTML片段而已，我们可以从服务器上加载，或者在<script>标签里定义，处理方式与所有静态资源
相同。如过我们需要UI组件，可以在模板中定义，使用标准的HTML加上Angular指令就可以了。
模板一旦加载到浏览器之后，Angular就会把它和数据整合起来，然后再把模板展开到整个应用中。例如：
1: <div ng-repeat="item in items">
2: <span>{{item.title}}</span>
3: </div>
这里，对于items数组中的每一个元素，Angular将会给外层<div>生成一份拷贝，包括其中的所有内容。
基本的操作流程如下：
1.用户请求应用起始页。
2.用户的浏览器向服务器发起一次HTTP请求，然后加载index.html页面，而这个页面里包含了模板。
3.Angular被加载到页面中，等待页面加载完成，然后查找ng-app指令，用来定义模板边界。
4Angular遍历模板，查找指令和绑定关系，这将触发一系列动作：注册监听器、执行一些DOM操作、从服务器获取初始化数据。这项工作的最后
结果是，应用将会启动起来，并且将模板转换成DOM视图。
5.连接到服务器去加载需要展示给用户的其它数据。
对于每个Angular应用来说，步骤1到步骤3都是标准化的，步骤4到步骤5是可选的。这些步骤可以同步进行也可以一部进行。为了提升性能，对于应用中的
第一个视图可以把数据和HTML模板一起加载进来，从而避免发起多次请求。
显示文本
使用ng-bind指令，我们可以在UI中任何地方显示并刷新文本。它还有两种等价形式。
第一种是使用花括号形似，前面已经见过了：
<p>{{greeting}}</p>
还有一种方式就是使用基于属性的指令，叫做ng-bind：
<p ng-bind=”greeting”></p>
对于输出内容来说两种形式是等价的。
他们两个的区别就是：使用{{}}时第一个加载的页面，未被渲染好的模板会被用户看到，而ng-bind就不会出现这种问题。建议大家在index页面使用ng-bind。
表单输入
在Angular中使用表单也十分方便正如我们前面的几个例子中看到的，我们可以使用ng-model属性把元素绑定到模型属性上，这一机制对所有标准的表单元素
都可以起作用，例如文本框、单选按钮、复选框，等等。我们可以像下面一样把一个复选框绑定到一个属性上：
1: <form ng-controller="someController">
2: <input type="checkbox" ng-model="youCheckedIt"
3: </form>
1.当你选中复选框之后，someController中的$scope的youCheckedIt的属性就会变为true.而反选会让youCheckedIt变为false。
2.如果你在someController中把$scope.youCheckedIt设置为true，那么UI中的复选框就会变成选中状态。设置false则反之。
当用户做了某件事的时候，我们希望程序能够做出某些动作。对于输入元素来说，我们可以使用ng-change属性来指定一个控制器方法，一旦用户修改了
输入值，这个方法就会被调用。例如：
1: <body ng-app>
2: <div ng-controller="StartUpController">
3: <form>
4: Starting:<input ng-change="computeNeed()" ng-model="funding.startingEstimate"/>
5: Recommendation:{{needed}}6: </form>
7: </div>
8: <script type="text/javascript" src="angular.min.js"></script>
9: <script type="text/javascript">
10: function StartUpController($scope){
11: $scope.funding={startingEstimate:0};12: $scope.computeNeed=function(){
13: $scope.needed=$scope.funding.startingEstimate*10; 14: } 15: }16: </script>
17: </body>
上述代码策略有一个潜在问题，即，只有当用户在文本框输入值的时候我们才会计算所需的金额。当用户在这个特定的输入框输入时，输入框就会正确地刷新。
但是，如果还有其他输入框绑定到模型的这个属性上，会怎样呢？如果接收到服务端的数据，导致数据模型刷新，又会怎么样呢？
为了能够正确的刷新输入框，而不管它是通过何种途径进行刷新的，我们需要使用$scope中的$watch()函数。我们可以通过它监视一个表达式，当这个表达式发生改变时就调用
回调函数。
1: <body ng-app>
2: <div ng-controller="StartUpController">
3: <form>
4: Starting:<input ng-model="funding.startingEstimate"/>
5: Recommendation:{{needed}}6: </form>
7: </div>
8: <script type="text/javascript" src="angular.min.js"></script>
9: <script type="text/javascript">
10: function StartUpController($scope){
11: $scope.funding={startingEstimate:0};12: var computeNeed=function(){
13: $scope.needed=$scope.funding.startingEstimate*10; 14: }15: $scope.$watch("funding.startingEstimate",computeNeed)
16: }17: </script>
18: </body>
需要注意，需要监视的表达式位于引号内。表达式可以执行一些简单的操作，并且可以访问到$scope中的属性。
在<form>标签上我们可以使用ng-submit指令来指定一个函数，当提交表单时就可以执行这个函数。ng-submit还会阻止浏览器执行默认的POST操作。
对于其他事件的情况，Angular还提供了一些事件处理指令。对于onclick,可以使用ng-click；对于ondblclick，可以使用ng-dblclick;等等。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
