Angular JS中的Bootstrapping是什么意思？

一尘不染

Angular JS中的Bootstrapping是什么意思？

angularjs

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

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

什么是自动引导和引导的手动初始化？我从链接 http://docs.angularjs.org/guide/bootstrap中阅读了如下所示的手动初始化的缺点。

谁能解释一下这里的缺点是什么？

阅读 235

2020-07-04

共1个答案

一尘不染

尽管上面的每个人都回答得很完美，我发现了我要找的东西，但是仍然缺少一个可行的例子。

在理解以下AngularJS中的自动/手动引导时，以下示例将有很大帮助：

AngularJS：自动引导：

当DOMContentLoaded事件或将angular.js脚本下载到浏览器并将document.readyState设置为完成时，Angular会自动初始化/引导。在这一点上，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指令。
您不应该混淆自动和手动引导应用程序的方式。
如上述示例中所述，在手动引导应用程序之前，请定义模块，控制器，服务等。

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

2020-07-04