AngularJS Hello World：你的第一个示例程序
詹姆斯·哈特曼
⚡ 智能摘要
AngularJS Hello World 程序只需要一个 HTML 文件、一个脚本引用和两个指令 ng-app 和 ng-controller，即可通过双括号表达式将控制器作用域变量绑定到页面中。
了解 AngularJS 应用程序强大功能的最佳方法是用 AngularJS 创建你的第一个基本程序“Hello World”应用程序。
有很多集成开发环境可供您使用。 AngularJS 开发方面，下面列举了一些常用的方法。在我们的示例中，我们使用 Webstorm 作为我们的 IDE。
- Webstorm
- Sublime Text
- AngularJS Eclipse
- Visual Studio中
你好，世界，AngularJS
版本说明： AngularJS 1.x 已于 2021 年 12 月 31 日停止长期支持，框架团队确认了这一点。 AngularJS 支持正式结束 2022 年 1 月，Angular 1.8.3 版本是最终版本，之后没有发布任何安全补丁。以下每个步骤和代码块都完全按照原样保留。新项目应使用现代 Angular，同样的练习也从这里开始。 ng serve 和一个独立组件 而且仍然使用相同的 {{ }} 插值语法。
下面的示例展示了在 AngularJS 中创建第一个“Hello world”应用程序的最简单方法。
下面带注释的屏幕截图标注了该文件的每个部分，其七个数字与以下内容相符： Code 下方附有说明列表。该代码基于较早的 1.4.0 版本生成，因此其脚本行与代码中指定的版本有所不同。
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf 8"> <title>Guru99</title> </head> <body> <h1 ng-controller="HelloWorldCtrl">{{message}}</h1> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script> angular.module("app", []).controller("HelloWorldCtrl", function($scope) { $scope.message="Hello World" } ) </script> </body> </html>
Code 说明：
- “”ng-应用程序“关键字”用于表明此应用程序应被视为 AngularJS 应用程序。此应用程序可以取任何名称。
- 控制器用于存放业务逻辑。在 h1 标签中，我们想要访问…… 调节器它将包含显示“Hello World”的逻辑，因此我们可以说，在这个标签中，我们想要访问名为“HelloWorldCtrl”的控制器。
- 我们正在使用一个名为“message”的成员变量，它只是一个显示“Hello World”消息的占位符。
- “script 标签”用于引用 angular.js 脚本，该脚本包含了 AngularJS 所需的所有功能。如果没有此引用，尝试使用任何 AngularJS 函数都将无法正常工作。
- “控制器”是我们实际创建业务逻辑的地方，也就是我们的控制器。每个关键字的具体含义将在后续章节中解释。需要注意的是，我们定义了一个名为“HelloWorldCtrl”的控制器方法，该方法在步骤 2 中被引用。
- 我们正在创建一个“函数”，当我们的代码调用此控制器时，该函数将被调用。`$scope` 对象是 AngularJS 中的一个特殊对象，它是一个全局对象。`$scope` 对象用于管理控制器和视图之间的数据。
- 我们创建了一个名为“message”的成员变量，并将其值赋为“Hello World”，然后将该成员变量附加到作用域对象。
注意：ng-controller 指令是定义在 AngularJS （步骤 2）用于在应用程序中定义控制器。在本例中，我们使用 `ng-controller` 关键字定义了一个名为“HelloWorldCtrl”的控制器。控制器的实际逻辑将在（步骤 5）中创建。
如果代码成功执行，则在浏览器中运行代码时将显示以下输出。
输出：
将显示消息“Hello World”。
如何加载 AngularJS：CDN 还是本地文件
上面的例子之所以有效，是因为有一行代码在浏览器到达页面主体末尾之前将框架引入到页面中。AngularJS 以单个组件的形式发布。 Java脚本文件，因此第一个程序无需构建步骤，也无需包管理器。只需在浏览器中打开一个纯 HTML 文件即可。
有两种方法可以导入该文件。
- 引用 CDN 副本。 该示例指向
code.angularjs.org并锁定版本 1.6.9。该主机仍然提供 1.x 版本的构建，最高版本为 1.8.2，而 Google 托管库中不再列出 AngularJS。 - 下载本地副本。 将文件保存在 HTML 页面旁边，并在脚本标签中指向该文件。本地副本可确保示例在离线状态下也能运行，这在代理服务器屏蔽 CDN 时尤为重要。
<!-- Option 1: reference a CDN copy --> <script src="https://code.angularjs.org/1.8.2/angular.min.js"></script> <!-- Option 2: reference a downloaded copy in the same folder --> <script src="angular.min.js"></script>
绝大部分储备使用 angular.js 在学习和 angular.min.js 生产环境中：未压缩的构建版本会输出可读的堆栈信息。 trac而精简版报告的变量已重命名。
文件加载完成后， ng-app 启动框架。AngularJS 会在文档加载完成后查找该属性，将带有该属性的元素视为编译根元素，并启动其值中指定的模块。由此会产生三个结果：
- 只有第一个
ng-app页面上的所有内容都会自动加载。除非另有说明，否则第二个加载项将被忽略。angular.bootstrap手动调用。 - 该值必须指定一个已注册的模块。 angular.module否则控制台会报告
[$injector:modulerr]. - 配售
ng-app，具体采用了html像示例中那样，元素会将整个文档置于 AngularJS 之下；较窄的容器也可以。
{{ }}表达式和ng-model绑定的工作原理
双支架 message h1 标签中的文本并非加载时一次性填充的占位符。AngularJS 会将该文本节点编译成对周围元素的监听器。 范围因此，渲染后的输出 tracks $scope.message 只要页面存在，它就会一直存在。
该循环分三个步骤进行。
- 控制器向其中写入一个值
$scope. - 摘要传递会将每个被监视的表达式与其前一个结果进行比较。
- 每个值发生变化的表达式都会重新渲染到原地。
因此，插值表达式是单向的，从作用域到视图。双向绑定需要 ng模型， 指示 专为表单控件设计。添加 <input ng-model="message"> 在标题旁边，在框中输入内容，标题会随着每次按键而改变，因为 ng-model 会将字段值写回表达式监视的同一作用域属性。
表达式的功能受到刻意限制。它们可以读取作用域属性、调用作用域方法，并且能够默默地容忍未定义的值，但它们不能声明变量、使用控制流语句或访问全局对象，例如…… window.
如何修复空白页或未渲染的 {{ }}
第一个 AngularJS 程序失败通常有两种明显表现：页面空白，或者只显示文本。 {{message}} 此处本应显示“Hello World”的地方却出现了“Hello World”。这两种情况都意味着框架从未接管标记。请打开浏览器控制台，按顺序完成以下检查。
- 确认库已加载。 打开“网络”面板并查找
angular.js请求。如果出现 404 错误或 CDN 无法访问，屏幕上的大括号将保持不变。 - 检查脚本路径。 相对路径指向包含 HTML 文件的文件夹，因此，在某个文件夹中复制该文件也是相对路径。
js子文件夹需求js/angular.min.js. - 验证 ng-app。 属性缺失或拼写错误会导致引导程序无法运行。属性名用连字符连接。
ng-app在标记中，即使指令采用驼峰式命名， Java脚本。 - 阅读控制台错误信息。
[$injector:modulerr]这意味着 ng-app 指定的模块从未注册过。[ng:areq]通常意味着标记中的控制器名称与传递给它的名称不匹配。.controller(). - 寻找第二个 ng-app。 只有第一个元素会被引导，因此留在内部元素上的少量副本会悄无声息地禁用页面的该部分。
其余大部分报告是由另外两个原因造成的。
- 文件协议。 这个单文件示例直接从磁盘打开时运行正常，但任何通过 XHR 获取的模板都会被浏览器源规则阻止。模板出现后，请通过 HTTP 提供该文件夹的服务。
- 牙套一闪而过。 当标记在框架编译之前渲染时，原始表达式会短暂可见。
ng-cloak到元素，或交换表达式ng-bind="message"它从不显示自己的标记。
如果以上方法均不适用，请将页面简化为上述示例，然后一行一行地添加您自己的代码。
