在角度JS中Bootstrapping是什么意思？
sab*_*ari 59 javascript bootstrapping angularjs
我是Angular JS的初学者.我正在通过以下链接. http://docs.angularjs.org/tutorial/step_00
什么是引导程序文件？他们在哪里？
什么是自动引导和手动初始化引导？我从链接http://docs.angularjs.org/guide/bootstrap中读到了手动初始化的缺点,如下所示
任何人都可以解释这里的缺点究竟是什么？
knr*_*nrz 54
Bootstrapping相当于初始化或启动Angular应用程序.有两种主要方法可以做到这一点.
第一种是通过添加ng-app到HTML中的元素来自动引导,如下所示:
<html ng-app="myApp">
...
</html>
第二个是在通过创建应用程序之后从JavaScript引导,就像这样 angular.module("myApp", []);
angular.bootstrap(document, ['myApp']);
Nik*_*ari 28
虽然上面的每个人都得到了很好的回答,但我发现了我正在寻找的东西,但仍然缺乏一个有效的例子.
虽然在下面的示例中了解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
Kev*_*vin 21
添加到Dave Swersky的答案(我是Angular的新手,如果我错了,请纠正我):
以下图片取自angularjs.org bootstrap教程.解释戴夫所阐述的内容.
具有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教程中的"module")并创建应用程序注入器(用于依赖注入).
Dav*_*sky 10
该ng-app指令指示页面的哪一部分(全部或部分,由您决定)是Angular应用程序的根.Angular读取该根中的HTML并将其编译为内部表示.这种读取和编译是引导过程.
手动引导是指编写代码以执行引导过程而不是使用该ng-app指令.
小智 6
Angular JS Auto引导程序
AngularInit()是第一个通过jqLite ready函数调用自动启动捆绑的Angular api.
- ready()调用DOM就绪
- 从ready()调用的angularInit()
- Angular Init使用element.querySelectorAll()从DOM中提取ng-app元素,其中包括以下格式之一 - "ng:app","ng-app","x-ng-app","data-ng-app"Ex.
Run Code Online (Sandbox Code Playgroud)<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"
- 最后bootstrap(..)被调用,它创建全局注入器和rootscope并启动角度应用程序.
| 归档时间： |
|
| 查看次数： |
55448 次 |
| 最近记录： |