在学习和使用AngularJS的过程中,一个这样的问题一直萦绕在我们心头:我们为什么选择AngularJS
首先我们来看一下官方的说明:
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。
AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。例如:
使用双大括号{{}}语法进行数据绑定;
使用DOM控制结构来实现迭代或者隐藏DOM片段;
支持表单和表单的验证;
能将逻辑代码关联到相关的DOM元素上;
能将HTML分组成可重用的组件。
AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样,这也会损失一部分灵活性。换句话说,并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是,至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建,就得了解什么不适合用AngularJS构建。
按官方的意思,就是说AngularJS其实是html的一个补充,它做了一些事情,使html开发webapp更简单快捷。
下面我们用HelloWorld来看看是怎么简单快捷的:
<html> <head><title>Hello, World in JavaScript</title></head> <body> <p id="greeting"></p> <script type="text/javascript"> var isIE = document.attachEvent; var addListener = isIE ? function(e, t, fn) {e.attachEvent('on' + t, fn);} : function(e, t, fn) {e.addEventListener(t, fn, false);}; addListener(window, 'load', function() { var greeting = document.getElementById('greeting'); if (isIE) { greeting.innerText = 'Hello, World'; } else { greeting.textContent = 'Hello, World'; } }); </script> </body> </html>
一般的控制数据显示到界面,我们需要调用dom操作,现在我们来看下AngularJS怎么操作:
<html ng-app> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <script src="controllers.js"></script> </head> <body> <div ng-controller='HelloController'> <input ng-model='greeting.text'> <p>`greeting`.`text`, World</p> </div> </body> </html>
AngularJS通过数据双向绑定,使input中绑定的数据模型每次修改都能自动显示到<p>标签中,这就是AngularJS的第一个优势,数据$scope的双向绑定,
然后是指令(directives),它所做的就是声明自定义标签来自定义dom,然后通过控制器(controllers)来控制数据的变化(M)以及界面的显示(V)
其次是把MVC的概念从后台带入到前端,使前端大批量的代码得以清晰地编写查看。在下一篇中我们将讲述如何用AngularJS建立前端代码框架