AngularJS_02_Bootstrap

最新推荐文章于 2023-06-04 10:21:53 发布

pre_eminent

最新推荐文章于 2023-06-04 10:21:53 发布

阅读量308

点赞数

CC 4.0 BY-SA版权

分类专栏： # AngularJS 文章标签： AngularJS

本文链接：https://blog.youkuaiyun.com/pre_eminent/article/details/83779846

AngularJS 专栏收录该内容

2 篇文章

订阅专栏

本文深入讲解Angular应用的初始化过程，包括自动与手动初始化的方式，以及如何通过ng-app指令指定应用的根模块。同时，探讨了如何在IE7下支持Angular，并介绍了在窗口名称中使用NG_DEFER_BOOTSTRAP!来实现延迟启动。

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

这一章讲述 Angular 初始化过程以及必要的时候用户如何能够手动将 Angular 初始化。

Angular `<script>` 标签

下面例子展示了推荐的在应用中使用 Angular 的自动初始化的代码路径设置。

<!doctype html>
<html ng-app>
  <body>
    ...
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js">
  </body>
</html>

在HTML页面底部放置 script 标签。这样可以优化应用的加载时间，因为避免了HTML加载时被 angular.js 脚步的加载阻滞。你可以在在这里 http://code.angularjs.org 获取 Angular 的最新版本。
- 选择 angular-[version].js 这样一个可读的版本，用来作为开发和调试用
- 选择 angular-[version].min.js 这样一个压缩版本，用来作为产品发布时用
如果你想要你的应用自动启动 Angular 的话，那就把 ng-app 放在应用的根结点中，通常情况下是 <html> 标签中，像下面这样：
```
<html ng-app>
```
如果你的应用需要支持 IE7 ，那么加上 id="ng-app"
```
<html ng-app id="ng-app">
```

自动初始化

Angular 在以下两种情况下自动初始化，

一个是在 DOMContentLoaded 事件触发时，

或者在 angular.js 脚本被执行的同时如果 document.readyState 被置为 'complete' 的话。

初始化时，Angular 会去找 ng-app 这个指明应用开始所在的指令。

如果 ng-app 指令被找到的话，Angular 会做以下几件事：

加载 ng-app 指令所指定的模块
创建应用所需的 injector
以 ng-app 所在的节点为根节点，开始遍历并编译DOM树（ng-app 指出了应用的哪一部份开始时 Angular 去编译的）

<!doctype html>
<html ng-app>
  <body>
    I can add: 6+7
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>  
  </body>
</html>

手动初始化

如果你想在初始化阶段拥有更多的控制权，你可以使用手动方法启动应用。

你需要手动启动的可能会是你想要在你的应用中使用脚本加载器，

或者你可能想要在 Angular 编译页面之前执行一些别的操作。

下面是一个手动初始化 Angular 的例子：

<!doctype html>
<html>
  <body>
    Hello Beyond!
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>    <script>
       angular.element(document).ready(function() {
         angular.module('myApp', []);
         angular.bootstrap(document, ['myApp']);
       });
    </script>
  </body>
</html>

注意，在上面的例子中，我们提供了我们应用要加载的模块名作为 angular.bootstrap 函数的第二个参数。

需要注意的是 angular.bootstrap 不会凭空创建模块，在我们将模块作为参数注入之前，必须创建任一自定义的模块。

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