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

Question

我真的不明白为什么有必要做 angular.bootsrap document, ['MyApp']在以下测试应用程序中管理模块和 Controller 的 CoffeeScript 代码的末尾:

这是 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"]

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

这是代码的 fiddle :
http://jsfiddle.net/dralexmv/8km8x/11/

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

Answer 1

Tl;博士
将 jsFiddle 中的第二个下拉菜单设置为 “没有换行 - ”你不需要angular.bootstrap线。
FIDDLE
解释
加载 Angular 库时，它将扫描 DOM 以查找 ng-app 的元素指示。当它找到一个时，它将开始引导过程。
在该过程中，Angular 将获取 ng-app 属性的值(在您的情况下为 InventoryModule )，并尝试查找具有相同名称的 Angular 模块。如果失败会抛出:Uncaught Error: No module: <module name> .
在您的 fiddle 中，您已将“代码包装”选择框设置为“onLoad”。
此下拉菜单指示 jsFiddle 何时初始化您放入 JS 框架中的 JS 代码。当它设置为“onLoad”时，代码将在 onLoad 中运行窗口事件。
另一方面，Angular 引导过程将在 $(document).ready() 上运行。 , 因为 $().ready事件在“onLoad”事件之前触发，Angular 将尝试初始化 InventoryModule模块甚至在模块被定义之前，这就是可怕的"No module"将抛出错误。angular.bootstrap()是一种手动方式，与 Angular 在它的 $().ready() handler 中所做的相同。 .