angularJS -- 手动初始化

最新推荐文章于 2020-09-14 16:56:18 发布

原创最新推荐文章于 2020-09-14 16:56:18 发布 · 454 阅读

0 ·

CC 4.0 BY-SA版权

angular学习专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨了AngularJS应用的初始化过程，包括自动初始化和手动初始化两种方式，解析了它们的工作原理及应用场景，同时介绍了如何利用angular.bootstrap进行手动初始化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初始化分为两种：自动初始化和手动初始化

angularJS在两种情况下使用自动初始化，通过ng-app指令配置：

在 DOMContentLoaded 事件触发时
在 angular.js 脚本被执行 && document.readyState 被置为 'complete'

<!DOCTYPE html>
<html>
<head>
	<title>auto-init</title>
	<script type="js/angular.min.js"></script>
</head>
<body ng-app="myApp">

</body>
<script type="text/javascript">
	angular.module('myApp', [])...;
</script>
</html>

自动初始化会把js代码入侵到html文件中，所以又提供了手动初始化，通过angular.bootstrap配置

angular.module('appName',[]);//必须要有
angular.bootstrap(element, [appName], [config]);

参数	参数描述
element	要绑定的DOM元素
appName	module名称
config	详细配置

<!DOCTYPE html>
<html xmlns:ng="http://angular.js.org">
<head>
	<title>初始化</title>
	<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body>
	Hello World!
</body>
<script type="text/javascript">
	angular.element(document).ready(function () {
		// body...
		angular.module('myApp', []);
		angular.bootstrap(document, ['myApp']);
	});
</script>
</html>

以下是 Angular 代码运行时遵循的顺序：

在HTML页面以及所有代码加载完毕后，Angular 会去找到应用的根元素（通常是文档的根节点）
调用 api/angular.bootstrap 去编译各元素成为一个可执行的且双向绑定的应用

angular.bootstrap只会绑定第一次加载的对象，后面重复的绑定或者其他对象的绑定，都会在控制台输出错误提示

延迟启动

这个特色可以让像 Batarang 一样的测试工具横插一杠进入 Angular 的引导进程，并且溜进模块中的DI注册机制中，这样就可以替换或者增强DI提供的服务。

当 api/angular.bootstrap 被调用时，如果 window.name 包含 NG_DEFER_BOOTSTRAP! 前缀，引导进程会被暂停直到 angular.resumeBootstrap() 被调用。

angular.resumeBootstrap() 以一个可选的数组作为参数。这个数组是包含了应用启动时需要被注入的模块。

↑ 这部分不懂，抄教程的，后面若是有研究再补充 ?