为什么即使我在 JSFiddle 中声明 ng-app="MyApp" 也需要 angular.bootstrap答案

【问题标题】：Why do I need to angular.bootstrap even when I declare ng-app="MyApp" in JSFiddle为什么即使我在 JSFiddle 中声明 ng-app="MyApp" 也需要 angular.bootstrap
【发布时间】：2013-07-04 00:17:43
【问题描述】：

我真的不明白为什么有必要在我的 CoffeeScript 代码末尾添加一个 angular.bootsrap document, ['MyApp'] 来管理以下测试应用程序中的模块和控制器：

这是 HTML：

<div ng-app='InventoryModule' ng-controller='InventoryController'>
    <ul ng-repeat='item in items'>
        <li>{{item.title}}</li>
        <li>{{item.price | currency}}</li>
    </ul>
</div>

还有 CoffeeScript：

inventoryModule = angular.module 'InventoryModule', []

inventoryModule.factory 'Items', ->
    items = {}
    items.query = () -> [{title: 'Hello', price: '5'}]
    items

inventoryModule.controller 'InventoryController', ($scope, Items) ->
    $scope.items = Items.query()

angular.bootstrap document, ["InventoryModule"]

如果您删除最后一行，应用程序将不起作用。这是为什么？这在其他任何地方都没有得到真正的解释。

这是一段代码： http://jsfiddle.net/dralexmv/8km8x/11/

如您所见，该应用程序确实有效。如果您删除bootstrap，它将停止工作。

【问题讨论】：

标签： angularjs coffeescript jsfiddle

【解决方案1】：

Tl;博士

将 jsFiddle 中的第二个下拉菜单设置为 "No wrap - in "，您将不需要 angular.bootstrap 行。

FIDDLE

说明

当 Angular 库被加载时，它将扫描 DOM 以查找带有 ng-app 指令的元素。当它找到一个时，它将开始引导过程。

在该过程中，Angular 将获取 ng-app 属性的值（在您的情况下为 InventoryModule），并将尝试查找具有相同名称的 Angular 模块。如果失败会抛出：Uncaught Error: No module: <module name>.

在您的小提琴中，您已将“代码包装”选择框设置为“onLoad”。此下拉菜单指示 jsFiddle 何时初始化您放入 JS 框架中的 JS 代码。当它设置为“onLoad”时，代码将在onLoad窗口事件中运行。

另一方面，Angular 引导过程将在$(document).ready() 上运行，并且因为$().ready 事件在“onLoad”事件之前被触发，Angular 将尝试在模块定义之前初始化InventoryModule 模块，并且这就是可怕的"No module" 错误将被抛出的地方。

angular.bootstrap() 是一种手动方式，与 Angular 在其 $().ready() handler 中所做的相同。

【讨论】：

太棒了，很好的解释。
您的解释当然是正确的，修改后的小提琴工作正常。一个旁注：您使用 Javascript 而不是 coffescript（尽管它是 1-1 翻译）。这不应该有任何区别，但令人惊讶的是，我无法通过切换到“No wrap - in ”来使原始的基于 coffescript 的示例正常工作。（当我第一次阅读问题时，我也尝试过，但它也不起作用。）我错过了什么？是 jsFiddle 错误还是我忽略了细微差别？
我使用 JavaScript 是因为我无法阅读 coffescript。 :) 无论如何，如果您将 console.log 放在 coffescript 中，您会看到它仅在 angular 已经引发错误之后才被评估，这意味着，至少在 JSFiddle 中，原始 coffescript 仅在 JS 文件之后评估已加载（并且在 $().ready() 事件之后）。
感谢您的解释！

【解决方案2】：

查看错误控制台。您的代码抛出异常：

Uncaught Error: No module: InventoryModule

我认为这与它有关。通过调用angular.bootstrap 手动引导似乎可以解决实际问题。

【讨论】：