AngularJS（1、咱们为何选择AngularJS）

时间 2020-01-19

标签 angularjs 咱们为何选择栏目 AngularJS 繁體版

原文原文链接

在学习和使用AngularJS的过程当中，一个这样的问题一直萦绕在咱们心头：咱们为何选择AngularJS
javascript

首先咱们来看一下官方的说明：html

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展现设计的声明式语言，但要构建WEB应用的话它就显得乏力了。因此我作了一些工做（你也能够以为是小花招）来让浏览器作我想要的事。前端

AngularJS使用了不一样的方法，它尝试去补足HTML自己在构建应用方面的缺陷。AngularJS经过使用咱们称为标识符(directives)的结构，让浏览器可以识别新的语法。例如：java

使用双大括号{{}}语法进行数据绑定；angularjs

使用DOM控制结构来实现迭代或者隐藏DOM片断；web

支持表单和表单的验证；ajax

能将逻辑代码关联到相关的DOM元素上；api

能将HTML分组成可重用的组件。浏览器

AngularJS经过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其余的抽象技术同样，这也会损失一部分灵活性。换句话说，并非全部的应用都适合用AngularJS来作。AngularJS主要考虑的是构建CRUD应用。幸运的是，至少90%的WEB应用都是CRUD应用。可是要了解什么适合用AngularJS构建，就得了解什么不适合用AngularJS构建。 app

按官方的意思，就是说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中文官网