2

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

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

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

我还看到以下代码：

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

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

4

2 回答 2

4

ng:应用程序

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

[使用 ng:app ] Angular 在 DOMContentLoaded 事件时自动初始化...

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

angular.bootstrap

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

你需要这样做的例子包括使用脚本加载器或需要在 Angular 编译页面之前执行操作。  

因此，如果您想使用 RequireJS 之类的脚本加载器，那么在 RequireJS 运行器方法中，您将需要通过调用angular.bootstrap(....

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

angular.bootstrap(element[, modules]);

当您想要手动引导应用程序时，您必须在依赖项数组中指定主角度模块的名称（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']);
于 2013-04-08T08:30:01.810 回答
1

  1. 这两行是相同的（假设您的body元素上有 ng-app）。

  2. 你应该按这个顺序做：

    1. 包括 angular.js
    2. 包括您的所有代码（控制器等）
    3. 调用引导程序

注意，在调用 bootstrap 之后你不能定义新的模块（至少现在，因为没有动态模块加载和延迟加载）。这是因为加载 AngularJS 应用程序有几个步骤 - 配置和运行。并且运行后无法运行其他模块的配置步骤。

于 2013-04-08T07:48:41.653 回答