AngularJS是如何做它的工作的(是什么让它打勾的)

How does AngularJS do what it does (what makes it tick)

本文关键字：是什么 何做它 工作 AngularJS      更新时间：2023-09-26

我正在看AngularJS，试图学习基础知识。相当有JavaScript和服务器编程，HTTP等方面的经验，所以我确实了解它是做什么的。我正在YouTube上观看Curran Keller的"50个例子"教程(链接如下)，我发现了很多关于 Angular做什么的文档…但是关于它是如何做到的就不多说了。了解Angular如何能够做所有这些整洁的事情——它"只是"一个JavaScript包装器，在web浏览器中执行——将有助于我编写我的第一个Angular"应用"(我目前认为它是带有元数据增强的JS的网页)。(-)应该开始讨论了!

那么，这是我认为我已经收集到的:

Angular JS 是 JavaScript。它通过一个.js文件在浏览器中运行，所以最终指令、标签和"angular代码"(控制器)会被翻译成JavaScript，也就是浏览器中实际运行的代码。

因此，Angular实际上"只是"一个普通JavaScript对象的包装器库。我想这是主要的观点;它简化了原本相当复杂的"原生"JavaScript代码。例如，Angular提供了一个$http服务，而不是实例化一个XMLHttpRequest对象，然后用它向服务器GET或POST一些数据。你只需要输入$http.get();

此外，当用户使用页面时，Angular在UI中有这种强大的动态传播。几乎就像在Excel中一样，如果一段数据在某个地方发生了变化，那么相同数据的所有其他用法/引用(即变量，HTML表单元素，或者只是一个变量输出到HTML的{{myVariable}})都会相应地更新。自动地，立即地。

另一个很酷的属性是用Angular指令增强HTML标签。这是一种非常简单的方法，可以从Angular(即JavaScript)内存中动态生成HTML输出(或纯文本)。同样，这也可以用普通的JS来完成，遍历DOM并插入子元素，但是Angular减轻了这些复杂编码的需要。你只需要编写<li ng-repeat="name in names">{{name}}</li>

那么，Angular是如何使用"仅"JavaScript实现这一切的呢?显然，与GetElementById一样，JavaScript可以访问(读取)和解析HTML DOM，所以我认为Angular首先读取整个文档，并使用ng-app指令查找任何HTML标签。这些会被进一步解析，Angular代码会被转换成生成额外的HTML输出(如ng-repeat)，或者被转换成嵌入的JavaScript(如$scope.name='';)。

我在文档中找不到答案的一件事是美元符号的作用。我想我知道答案，但是我没有信心。因为Angular有自己的类似javascript的编程语言，所以Angular需要能够区分javascript部分(比如HTML FORM元素中使用的变量)和Angular对象。我的意思是，Angular的函数调用是什么，它们的输入/参数是什么。可以这么说，在Angular的单词前加上$可以让Angular js翻译器知道哪些不需要翻译?

也许有人可以跟进这一点，纠正我错在哪里?

Curran Keller的"50个例子介绍Angular.js"(http://youtu.be/TRrL5j3MIvo)中的例子是一个很好的参考。例如，也许下面这个简单的例子可以作为一个起点?在这个例子中，我想知道(除了上面的想法之外)$scope对象的具体目的是什么。我们可以将它重命名为$whatever，或者"scope"是保留字吗?

<html ng-app="nameApp">
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example 14</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
    <script>
      var nameApp = angular.module('nameApp', []);
      nameApp.controller('NameCtrl', function ($scope) {
        $scope.names = ['Larry', 'Curly', 'Moe'];
      });
    </script>
  </head>
  <body ng-controller="NameCtrl">
    <ul>
      <li ng-repeat="name in names">{{name}}</li>
    </ul>
  </body>
</html>

有一件事我在文档中找不到答案，那就是美元符号的作用。

美元符号只是为Angular和JQuery保留的命名约定。这只是为了便于读者快速分辨哪些是Angular/JQuery函数。看到http://google.github.io/styleguide/angularjs-google-style.html dollarsign .

在这个例子中，我想知道(除了上面的想法之外)$scope对象的具体目的是什么。我们可以将它重命名为$whatever，或者"scope"是保留字吗?

$scope是特殊的，它指的是应用程序模型。请参阅docs.angularjs.org/guide/scope和docs.angularjs.org/guide/controller(不能发布直接链接，因为我还没有声誉:)。

在上面的例子中，$scope用于控制器和DOM之间的通信。在angular绑定中，DOM只能引用作用域中的项。分解上面的例子:

<body ng-controller="NameCtrl">

这将实例化名为NameCtrl的控制器，并在DOM和NameCtrl实例之间设置相同的$作用域。该元素和所有子元素现在可以引用与NameCtrl相同的$作用域。

$scope.names = ['Larry', 'Curly', 'Moe'];

这是控制器将模型设置为Larry/Curly/Moe以供DOM消费的地方。

<li ng-repeat="name in names">{{name}}</li>

"names"在NameCtrl中引用了相同的$scope.names(记住，不能从DOM中写入$scope)。每当控制器NameCtrl更新$scope.names时，DOM也会更新，为数组'names'中的每个元素创建一个列表项，并且每个元素也有自己的$scope。

我建议通过一些AngularJS教程应用程序帮助:docs.angularjs.org/tutorial/

相关文章：