Question

我是Angular JS的初学者。我正在通过以下链接。 http://docs.angularjs.org/tutorial/step_00

什么是引导程序文件？他们在哪里？

什么是自动引导和手动初始化引导？我从链接http://docs.angularjs.org/guide/bootstrap

中读到了手动初始化的缺点，如下所示

有人能解释这里的缺点吗？

Answer 1

Bootstrapping相当于初始化或启动Angular应用程序。有两种主要方法可以做到。

第一种是通过将ng-app添加到HTML中的元素来自动引导，如下所示：

<html ng-app="myApp">
...
</html>

第二个是在通过angular.module("myApp", []);

创建应用之后从JavaScript引导，就像这样

angular.bootstrap(document, ['myApp']);

Answer 2

虽然上面的每个人都回答得很完美，但我找到了我想要的东西，但仍然缺少一个有效的例子。

虽然在下面的示例中了解AngularJS中的自动/手动引导可以提供很多帮助：

AngularJS：自动引导：

Angular在DOMContentLoaded事件时或在将angular.js脚本下载到浏览器并且document.readyState设置为完成时自动初始化/ bootstraps。此时，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.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指令你的应用。
您不应混淆自动和手动引导方式你的应用。
手动定义模块，控制器，服务等按照以上示例中的定义引导您的应用。

参考： http://www.dotnettricks.com/books/angularjs/interview

Answer 3

添加Dave Swersky的答案（我是Angular的新手，如果我错了，请纠正我）：

以下图片取自angularjs.org bootstrap tutorial。解释戴夫所表达的内容。

enter image description here

带有ng-app指令的元素内的HTML由AngularJS编译。例如：

<body>
    <div> {{ 1 + 2 }} </div>
</body>

将呈现为：

{{ 1 + 2 }}

但是，添加ng-app指令：

<body ng-app="module">
    <div> {{ 1 + 2 }} </div>
</body>

这样渲染：

这是因为ng-app“引导”了body标签，并告诉Angular创建内容的“内部表示”。内部表示当然是3。从教程：

“如果找到ng-app指令，那么Angular将编译DOM 将ng-app指令视为编译的根。这个允许你告诉它只将DOM的一部分视为Angular 应用“。

Angular还会加载与ng-app指令关联的模块（Angular教程中的“module”），并创建一个应用程序注入器（用于依赖注入）。

Answer 4

ng-app指令指示页面的哪一部分（全部或部分，由您决定）是Angular应用程序的根。 Angular读取该根中的HTML并将其编译为内部表示。这种读取和编译是自举过程。

手动引导是指编写代码以执行引导过程而不是使用ng-app指令。

Answer 5

Angular JS自动引导程序

AngularInit（）是第一个通过jqLite ready函数调用自动启动绑定的Angular api。

ready（）调用DOM ready
从ready（）
Angular Init使用element.querySelectorAll（）从DOM中提取ng-app元素，使用以下格式之一 - “ng：app”，“ng-app”，“x-ng-app”，“data-ng-app” “ 防爆。

  <body ng-app=ngAppDemo>
      <div ng-controller="ngAppDemoController" >
          I can add: {{a}} + {{b}} =  {{ a+b }}         </div>
  </body>

ng-app="ngAppDemo" will be extracted.

提取使用正则表达式模块，例如module =“ngAppDemo”
最后引导（...）被调用，创建全局注入器＆amp;罗杰和靴带绑角度应用。

Answer 6

来自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提供了针对多个平台的各种引导选项。此页面介绍了两个选项，均以浏览器为目标。

Answer 7

在angular初始化/ Bootstrap中有两种方式。

让我解释一下，何时何地使用手动和自动引导。

手动引导程序：

假设您必须使用服务器端请求加载一些数据或绑定某些模板，但是如果在该操作完成之前自动初始化angular应用程序怎么办？

我们能否根据结果的成功和失败手动初始化应用程序？是的，我们可以做到。因此，解决上述问题的方法是

考虑一个示例，您正在使用Worklight Server。您想要在Worklight Server初始化后立即进行初始化/引导，这里您将进行手动引导。当您要在角度应用程序引导和编译页面之前执行某些操作时，手动初始化很有用。

angular.element(document).ready(function () 
  {
         angular.bootstrap(document, ['myApp']);
  });

上面的代码在worlight初始化后写在main.js文件中。

自动引导：

Angular在DOMContentLoaded或将angular.js脚本下载到浏览器时自动初始化/引导，然后它将查找ng-app。找到后，它将加载与该ng-app指令关联的模块。

在角度JS中Bootstrapping是什么意思？

7 个答案: