Question

我真的不明白为什么有必要在我的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，它将停止工作。

Answer 1

铊组成; dr

将jsFiddle中的第二个下拉列表设置为“No wrap-in＆lt; head＆gt;”，您不需要angular.bootstrap行。

FIDDLE

说明

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

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

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

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

angular.bootstrap()是一种手动方式，可以做同样的事情，Angular已经在其$().ready() handler中做了。

Answer 2

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

Uncaught Error: No module: InventoryModule

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

为什么我需要angular.bootstrap即使我声明ng-app =＆＃34; MyApp＆＃34;在JSFiddle中

2 个答案:

铊组成; dr

说明