Question

我正在研究AngularJS，试图学习基础知识。在JavaScript和服务器编程，HTTP等方面经验丰富，所以我对它的作用有所了解。我正在观看Curran Keller＆＃34; 50例＆＃34; YouTube上的教程（下面的链接），我已经找到了很多关于 Angular的文档......但是没有关于如何的文档。了解Angular如何能够完成所有这些整洁的事情 - 它只是＆＃34;只有＆＃34;一个JavaScript包装器，在Web浏览器中执行 - 在我编写第一个Angular＆＃34; app＆＃34; （正如我目前所想到的那样，带有元数据增强型JS的网页）。 ;-)应该进行讨论！

所以，这就是我认为到目前为止我所收集到的内容：

Angular JS 是 JavaScript。它通过.js文件在浏览器中运行，因此最终指令和标签以及＆＃34;角度代码＆＃34; （控制器）被翻译成JavaScript，这实际上是在浏览器中运行的。

因此，Angular确实只是＆＃34;只是＆＃34;普通JavaScript对象的包装器库。我想这是重点;它简化了其他相当复杂的本土＆＃34; JavaScript代码。例如，Angular不是实例化XMLHttpRequest对象，而是使用它来向服务器GET或POST一些数据，而是提供$ http服务。您只需输入$http.get();

即可

此外，当用户使用页面时，Angular在UI中具有这种强大的动态传播。几乎像在Excel中一样，如果某个数据在某处被更改，那么相同数据的所有其他用法/引用（即变量，HTML表单元素，或只是带有{{myVariable}}的HTML的变量输出）都会相应地更新。自动，立即。

另一个很酷的属性是使用Angular指令增强HTML标记。这是从Angular（即JavaScript）内存中动态生成HTML输出（或纯文本）的一种非常简单的方法。同样，这可以通过简单的vanilla JS，遍历DOM和插入子元素来完成，但Angular减轻了对任何复杂编码的需求。您需要编程的所有内容都是<li ng-repeat="name in names">{{name}}</li>

那么，Angular如何实现这一切，仅使用＃34;＆＃34; 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的例子＆＃34; 50个例子中的Angular.js简介＆＃34; （http://youtu.be/TRrL5j3MIvo）是一个很好的参考。例如，也许这个简单的例子可能是一个起点？在这个例子中，我想知道（除上述想法之外）$scope对象的具体目的是什么。我们可以将它重命名为$ whatever，或者＆＃34; scope＆＃34;保留字？

<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>

Answer 1

我在文档中找到答案时遇到的一件事就是美元符号的作用。

美元符号只是为Angular和JQuery保留的命名约定。它只是为了便于快速辨别Angular / JQuery函数的可读性。请参阅http://google.github.io/styleguide/angularjs-google-style.html#dollarsign。

在这个例子中，我想知道（除了上面的想法）$ scope对象的具体目的是什么。我们可以将它重命名为$ whatever，或者“范围”是保留字吗？

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

在上面的示例中，$ scope用于在控制器和DOM之间进行通信。 DOM只能在角度绑定中引用范围上的项目。打破上面的例子：

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

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

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

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

{{1}}

“names”指的是NameCtrl中相同的$ scope.names（记住，你不要从DOM写入$ scope）。每当控制器NameCtrl更新$ scope.names时，DOM也会更新，为数组'names'中的每个元素创建一个列表项，每个元素也有它自己的$ scope。

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

AngularJS如何做它的作用（使它成为什么）

所以，这就是我认为到目前为止我所收集到的内容：

1 个答案: