在学习和使用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建立前端代码框架


AngularJS中文官网