angularjs - 在执行 angular.bootstrap 之前，我是否需要创建一个 Angular 模块？

Question

我见过两种不同的方式来启动 AngularJS:

• ng-app="TodoApp"
• angular.bootstrap(angular.element("body")[0], ["TodoApp"]);

首先有人能告诉我这两者是否相同吗？

我还看到了下面的代码:

var TodoApp = angular.module('TodoApp', ['ngResource']);

是否必须在我发出 angular.bootstrap 命令之前加载上面的代码？

Answer 1

ng:应用

指令* ng:app 可用于自动引导应用程序。可以在 HTML 中放置多个 ng-app 指令，但只有第一个将用于引导应用程序，而其他的将被忽略。第一个 ng:app 所在的元素找到的指令成为 AngularJS 应用程序的“根”(这是附加 $rootScope 的地方)。

[using ng:app] Angular initializes automatically upon DOMContentLoaded event ...

_{*尽管ng:app与其他指令类似地使用，它不是 ng 的一部分模块，它的定义方式与其他 Angular 指令的定义方式不同。}

Angular Bootstrap

另一方面，通过手动引导，您可以在同一页面内初始化多个不同的 Angular 应用。

Examples of when you'd need to do this include using script loaders or the need to perform an operation before Angular compiles a page.  

因此，如果您想使用 RequireJS 等脚本加载器，那么在 RequireJS 运行器方法中，您需要通过调用 angular.bootstrap(... 来初始化您的 Angular 应用程序.

Angular.bootstrap 命令允许您将模块依赖项指定为第二个参数。函数的签名是:

angular.bootstrap(element[, modules]);

当您想手动引导应用程序时，您必须在依赖项数组中指定主 Angular 模块的名称(angular.bootstrap 调用的第二个参数):

// You define your app module:
angular.module('myApp', []);
// Then you specify your app module as a dependency to angular.bootstrap:
angular.bootstrap(element, ['myApp']);

此外，手动引导允许您在初始化 Angular 应用程序之前在 Angular 之外进行一些预处理和配置。

加载顺序

回答问题的第二部分:是的，您需要先加载并执行模块，然后才能在调用 angular.bootstrap 时引用它们。 .

angular.module('TodoApp', ['ngResource']);
angular.bootstrap(document, ['TodoApp']);