我们知道,AngularJs中的数据绑定是双向绑定的,View的改变,会改变Model,Model的改变也会改变View中的值,废话不多说,我们直接上代码。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body ng-app> 8 <input type="text" ng-model="name"/> 9 {{name}} 10 <input type="text" ng-model="name"/> 11 </body> 12 <script type="text/javascript" src="../public/javascripts/lib/angular.js"></script> 13 </html>
代码说明:
1、添加angularjs的引用。
2、使用指令ng-app告诉angularjs应该管理页面的哪一部分。
3、{{name}}这是angularjs的表达式,angularjs的表达式是通过$parse服务解释执行的,关于$parse我后续会讲。讲到这里,简单说一下angularjs表达式跟javascript表达式的区别:
a) angularjs的属性求值是对于scope的,而javascript是针对于window。
b) angularjs表达式的值是宽容的,就是说,对于undefined,null这些值,在angularjs里面是允许的,不会报错。
c) angularjs中,没有流控制语句,比如:条件分支,循环,抛出异常。
d) angularjs中,我们还可以把表达式的值传入过滤器链(filter chains),关于filter我会在后续讲。
4、<input type="text" ng-model="name"/> 这里我们是把表单绑定在一个model中,在angularjs中使用ng-model指令,这里model的值就是相当value,而表单本身就是个View,{{name}}以及后面的表单也是个View。我们在第一个表单中输入数字后,后面的两个View就跟着变。
5、效果如下:
关于数据绑定就讲到这,里面涉及的一些概念跟特性会在后面陆陆续续的讲到,既然angularjs是基于MVC或者MVVM的开发方式,本篇已经提到了View跟Model,那一篇我将讲一下angularjs的控制器跟angularjs的模块。