【转】Angular学习总结--很详细的教程 (2)

  AngularJS是一个新出现的强大客户端技术,提供给大家的一种开发强大应用的方式。这种方式利用并且扩展HTML,CSS和javascript,并且弥补了它们的一些非常明显的不足。本应该使用HTML来实现而现在由它开发的动态一些内容。

  AngularJS有五个最重要的功能和特性:

  3.1 特性一:双向的数据绑定

  数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理,查询和监听DOM。数据绑定是的代码更少,你可以专注于你的应用。

  我们想象一下Model是你的应用中的简单数据。你的Model是你用来读取或者更新的部分。数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的,毫不影响的应用到web应用中。

  传统来说,当Model变化了。 开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面,model变化驱动了DOM中元素变化,另一方面,DOM元素的变化也会影响到Model。这个在用户互动中更加复杂,因为开发人员需要处理和解析这些互动,然后融合到一个model中,并且更新View。这是一个手动的复杂过程,当一个应用非常庞大的时候,将会是一件非常费劲的事情。

  这里肯定有更好的解决方案!那就是AngularJS的双向数据绑定,能够同步DOM和Model等等。

  这里有一个非常简单的例子,用来演示一个input输入框和<h1>元素的双向绑定(例01):

<!-- 例01 --> <!doctype html> <html ng-app="demoApp"> <head> <script src="./js/angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="user.name" placeholder="请输入名字"> <hr> <h1>Hello, {{user.name}}!</h1> </div> </body> </html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgdfyx.html