我真的不明白为什么有必要在我的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线.
说明
当加载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中所做的事情.