angular JS 中的 Bootstrapping 是什么意思? [英] What is meant by Bootstrapping in angular JS?
问题描述
我是 Angular JS 的初学者.我正在浏览以下链接.http://docs.angularjs.org/tutorial/step_00
I am a beginner in Angular JS. I was going through the below link. http://docs.angularjs.org/tutorial/step_00
引导文件是什么?它们位于何处?
bootstrapping 的自动引导和手动初始化是什么?我阅读了以下手动初始化的缺点..从链接 http://docs.angularjs.org/guide/bootstrap
What is automatic booting and manual initialization of bootstrapping? I read the disadvantage of manual initialization as below.. from the link http://docs.angularjs.org/guide/bootstrap
谁能具体解释一下这里的缺点是什么?
推荐答案
虽然上面的每个人都给出了完美的答案，我找到了我想要的东西，但仍然缺少一个有效的例子.
Though Everyone above has answered perfectly and I found what I was looking for but still a working example seem missing.
虽然在下面的示例中了解 AngularJS 中的自动/手动引导会很有帮助:
While understanding about Auto / Manual bootstrapping in AngularJS below examples can help a lot :
AngularJS:自动引导:
Angular 会在 DOMContentLoaded 事件或 angular.js 脚本下载到浏览器并且 document.readyState 设置为完成时自动初始化/引导.此时 AngularJS 会寻找 ng-app 指令.当找到 ng-app 指令时，Angular 将:
Angular initializes / bootstraps automatically upon DOMContentLoaded event or when the angular.js script is downloaded to the browser and the document.readyState is set to complete. At this point AngularJS looks for the ng-app directive. When the ng-app directive is found then Angular will:
加载与指令关联的模块.
Load the module associated with the directive.
创建应用程序注入器.
从 ng-app 根元素开始编译 DOM.
Compile the DOM starting from the ng-app root element.
这个过程称为自动引导.
This process is called auto-bootstrapping.
<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() 函数中调用.angular.element(document).ready() 函数在 DOM 准备好进行操作时被触发.
You can manually initialized your angular app by using angular.bootstrap() function. This function takes the modules as parameters and should be called within angular.element(document).ready() function. The angular.element(document).ready() function is fired when the DOM is ready for manipulation.
<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 指令您的应用.
You should not use the ng-app directive when manually bootstrapping your app.
你不应该混淆自动和手动引导方式您的应用.
You should not mix up the automatic and manual way of bootstrapping your app.
在手动之前定义模块、控制器、服务等按照上述示例中的定义引导您的应用.
Define modules, controller, services etc. before manually bootstrapping your app as defined in above examples.
参考: http://www.dotnettricks.com/书籍/angularjs/采访
这篇关于angular JS 中的 Bootstrapping 是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
