6

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

4

2 回答 2

15

Tl;博士

将 jsFiddle 中的第二个下拉菜单设置为“No wrap - in <head>”，您就不需要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()$().ready()是一种手动方式，它与 Angular 已经在它的handler中做的事情相同。

于 2013-07-06T00:44:16.150 回答
0

查看错误控制台。您的代码引发异常：

Uncaught Error: No module: InventoryModule

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

于 2013-07-05T21:54:38.423 回答