我是 Angular JS 的初学者。我正在通过以下链接。 http://docs.angularjs.org/tutorial/step_00
什么是引导文件？它们在哪里？
什么是引导的自动引导和手动初始化？我从链接http://docs.angularjs.org/guide/bootstrap
中阅读了手动初始化的缺点如下。谁能解释一下这里的缺点是什么？
【问题讨论】：
标签： javascript angularjs bootstrapping
尽管上面的每个人都回答得很好，我找到了我正在寻找的东西，但似乎仍然缺少一个有效的例子。
虽然在下面的示例中了解 AngularJS 中的自动/手动引导会很有帮助：
AngularJS：自动引导：
Angular 在 DOMContentLoaded 事件或 angular.js 脚本下载到浏览器并且 document.readyState 设置为完成时自动初始化/引导。此时 AngularJS 寻找 ng-app 指令。当找到 ng-app 指令时，Angular 将：
加载与指令关联的模块。
创建应用程序注入器。
从 ng-app 根元素开始编译 DOM。
这个过程称为自动引导。
<html>
<body ng-app="myApp">
<div ng-controller="Ctrl">Hello {{msg}}!</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('Ctrl', function($scope) {
$scope.msg = 'Nik';
});
</script>
</body>
</html>
JSFiddle : http://jsfiddle.net/nikdtu/ohrjjqws/
AngularJS - 手动引导：
您可以使用 angular.bootstrap() 函数手动初始化您的 Angular 应用程序。此函数将模块作为参数，应在 angular.element(document).ready() 函数中调用。当 DOM 准备好进行操作时，将触发 angular.element(document).ready() 函数。
<html>
<body>
<div ng-controller="Ctrl">Hello {{msg}}!</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('Ctrl', function($scope) {
$scope.msg = 'Nik';
});
//manual bootstrap process
angular.element(document).ready(function () { angular.bootstrap(document, ['myApp']); });
</script>
</body>
</html>
JSFiddle : http://jsfiddle.net/nikdtu/umcq4wq7/
注意：
手动引导时不应使用 ng-app 指令 你的应用。
不应混淆自动和手动引导方式 你的应用。
在手动之前定义模块、控制器、服务等 按照上述示例中的定义引导您的应用。
【讨论】：
在角度初始化/ Bootstrap 中以两种方式完成。
让我解释一下，何时何地使用手动和自动引导程序。
手动引导：
假设您必须加载一些数据或必须使用服务器端请求绑定一些模板，但是如果 Angular 应用程序在该操作完成之前自动初始化怎么办？
我们不能根据结果的成功和失败手动初始化我们的应用程序吗？是的，我们可以做到。所以上述问题的解决方案是
考虑一个示例，您正在使用 Worklight Server。您想在 Worklight 服务器初始化后立即进行初始化/引导，在这里您将进行手动引导。 当您想在 Angular 应用程序引导和编译页面之前执行某些操作时，手动初始化非常有用。
angular.element(document).ready(function ()
{
angular.bootstrap(document, ['myApp']);
});
以上代码是worlight初始化后写在main.js文件中的。
自动引导：
Angular 在 DOMContentLoaded 或 angular.js 脚本下载到浏览器时自动初始化/引导。然后它会寻找 ng-app。找到后，它会加载与该 ng-app 指令关联的模块。
【讨论】：
来自 Angular NgModules 页面：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
最后，@NgModule.bootstrap 属性将此 AppComponent 标识为引导组件。当 Angular 启动应用程序时，它会将 AppComponent 的 HTML 渲染放在 DOM 中，在 index.html 的元素标签内。
main.ts 中的引导
您通过在 main.ts 文件中引导 AppModule 来启动应用程序。
Angular 提供了多种针对多个平台的引导选项。本页介绍了两个选项，均针对浏览器。
【讨论】：
Angular JS 自动引导过程
AngularInit() 是第一个通过 jqLite 就绪函数调用自动引导的 Angular api。
<body ng-app=ngAppDemo> <div ng-controller="ngAppDemoController" > I can add: {{a}} + {{b}} = {{ a+b }} </div> </body>
ng-app="ngAppDemo" will be extracted.
【讨论】：
Bootstrapping 相当于初始化或启动您的 Angular 应用程序。有两种主要方法可以做到这一点。
第一个是通过将ng-app 添加到 HTML 中的 an 元素来自动引导，如下所示：
<html ng-app="myApp">
...
</html>
第二个是从 JavaScript 引导，就像这样，在通过 angular.module("myApp", []); 创建您的应用程序之后
angular.bootstrap(document, ['myApp']);
【讨论】：
添加到 Dave Swersky 的答案（我是 Angular 的新手，如果我错了，请纠正我）：
下图，取自angularjs.org bootstrap tutorial。解释 Dave 所阐述的内容。
带有 ng-app 指令的元素内部的 HTML 由 AngularJS 编译。例如：
<body>
<div> {{ 1 + 2 }} </div>
</body>
会这样渲染：
{{ 1 + 2 }}
但是，添加 ng-app 指令：
<body ng-app="module">
<div> {{ 1 + 2 }} </div>
</body>
像这样渲染：
3
这是因为 ng-app “引导”了 body 标签并告诉 Angular 创建内容的“内部表示”。内部表示当然是3。来自教程：
"如果找到 ng-app 指令，那么 Angular 将编译 DOM 将 ng-app 指令视为编译的根。这 允许您告诉它仅将 DOM 的一部分视为 Angular 申请。”
Angular 还会加载与 ng-app 指令相关的模块（Angular 教程中的“模块”）并创建一个应用程序注入器（用于依赖注入）。
【讨论】：
ng-app 指令指示页面的哪一部分（全部或部分，由您决定）是 Angular 应用程序的根。 Angular 读取该根目录中的 HTML 并将其编译为内部表示。这种读取和编译就是引导过程。
手动引导是指您编写代码来执行引导过程，而不是使用ng-app 指令。
【讨论】：