AngularJS-数据绑定

AngularJS是什么?

AngularJS开发团队:AngularJS是一种构建动态Web应用的结构化框架。

提供了现代Web应用中一些常用的高级功能:

  • 解耦应用逻辑、数据模型和视图
  • Ajax服务
  • 依赖注入
  • 浏览历史
  • 测试
  • 等等


AngularJS有什么不同?

传统的JavaScript框架要求开发人员对整个htmlDom都非常了解,以便利用框架对Dom进行操作,例如jQuery,而AngularJS利用原生MVC模式对html进行了增强,同时,还支持对部分html元素使用AngularJS。


AngularJs_helloworld

 <html ng-app> <head> <meta charset="UTF-8"> <title>HelloWorld</title> <script type="text/javascript" src="http://localhost:8080/angularJs_test/js/angular.js"></script> </head> <body> <input ng-model="name1" type="text" pleaceholder="Your Name"/> <h1>Hello {{name1}}</h1> </body> </html>

效果如下:
AngularJS-数据绑定_第1张图片



AngularJs中的动态绑定

传统的JavaScript框架通过操作dom的方式来修改页面中的数据,而angularjs则是创建动态模板实现视图模型的分离。

以上面的helloworld为例,使用angularjs实现动态绑定的步骤:

  • 引入angularjs核心库
  • 用ng-app标注angularjs的作用范围
  • 指定模型和动态模板(ng-model与{{field}})

AngularJs通过 脏值检查 实现数据的动态显示


  • scope scope是一个普通的js对象,其中的属性可以被视图访问,也可以同控制器进行交互。

你可能感兴趣的:(JavaScript,AngularJS)