栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

Angular JS中的Bootstrapping是什么意思?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Angular JS中的Bootstrapping是什么意思?

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

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

AngularJS:自动引导:

当DOMContentLoaded事件或将angular.js脚本下载到浏览器并将document.readyState设置为完成时,Angular会自动初始化/引导。在这一点上,AngularJS寻找ng-
app指令。找到ng-app指令后,Angular将:

  1. 加载与指令关联的模块。

  2. 创建应用程序注入器。

  3. 从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/

注意 :

  1. 手动引导应用程序时,不应使用ng-app指令。

  2. 您不应该混淆自动和手动引导应用程序的方式。

  3. 如上述示例中所述,在手动引导应用程序之前,请定义模块,控制器,服务等。

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



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/426945.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号