在做angular.bootstrap之前,我是否需要创建一个角度模块?

时间:2013-04-08 02:24:01

标签: angularjs

我已经看到两种不同的方式来启动AngularJS:

  • 纳克应用内= “TodoApp”
  • angular.bootstrap(angular.element(“body”)[0],[“TodoApp”]);

首先有人可以告诉我这些是否相同?

我还看到以下代码:

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

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

2 个答案:

答案 0 :(得分:4)

纳克:应用

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

  

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

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

angular.bootstrap

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

  

当您需要执行此操作的示例包括使用脚本加载器或在Angular编译页面之前执行操作的需要。   

因此,如果您想使用诸如RequireJS之类的脚本加载器,那么在RequireJS runner方法中,您需要通过调用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.bootstrap时引用它们。

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

答案 1 :(得分:1)

  1. 这两行都相同(假设您的body元素上有ng-app)。

  2. 你可以这样做:

    1. 包括angular.js
    2. 包括所有代码(控制器等)
    3. call bootstrap
  3. 注意,在调用bootstrap之后,您无法定义新模块(至少现在,因为没有动态模块加载和延迟加载)。这是因为加载AngularJS应用程序有几个步骤 - 配置和运行。运行后,无法运行其他模块的配置步骤。