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

Question

我并没有真正理解为什么angular.bootsrap document, ['MyApp']在我的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"]

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

这是代码的小提琴：http :
//jsfiddle.net/dralexmv/8km8x/11/

如您所见，该应用程序实际上可以正常工作。如果将bootstrap其卸下，它将停止工作。

Answer 1

l

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

小提琴

说明

加载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()处理程序中已经做过的事情的方式。