angularjs – 即使我在JSFiddle中声明ng-app =“MyApp”,为什么我还需要angular.bootstrap

我真的不明白为什么有必要在我的CoffeeScript代码的末尾做一个angular.bootsrap文档,[‘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/

正如您所看到的,应用程序确实有效.如果删除引导程序,它将停止工作.

文艺青年最爱的

将jsfiddle中的第二个下拉列表设置为“No wrap-in< head>”你不需要angular.bootstrap线.

FIDDLE

说明

当加载Angular库时,它将使用ng-app指令扫描DOM以查找元素.当它找到一个它将开始自举过程.

在该过程中,Angular将获取ng-app属性的值(在您的情况下为InventoryModule),并将尝试查找具有相同名称的角度模块.如果失败则抛出：未捕获错误：无模块：<模块名称>.

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

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

angular.bootstrap()是一种手动方式,可以完成Angular在$().ready() handler中所做的事情.