为什么即使我声明 ng-app="MyApp" 也需要 angular.bootstrap?在 JSFiddle [英] Why do I need to angular.bootstrap even when I declare ng-app="MyApp" in JSFiddle
问题描述
我真的不明白为什么有必要在我的 CoffeeScript 代码的末尾做一个 angular.bootsrap 文档，['MyApp'] 来管理以下测试应用程序中的模块和控制器:
这是 HTML:
<ul ng-repeat='item in items'><li>{{item.title}}</li><li>{{item.price |货币}}还有 CoffeeScript:
inventoryModule = angular.module 'InventoryModule', []inventoryModule.factory '物品'，->项目 = {}items.query = () ->[{标题:'你好'，价格:'5'}]项目inventoryModule.controller 'InventoryController', ($scope, Items) ->$scope.items = Items.query()angular.bootstrap 文件，["InventoryModule"]如果删除最后一行，应用程序将无法工作.这是为什么?这在其他任何地方都没有真正解释过.
这是一段代码:http://jsfiddle.net/dralexmv/8km8x/11/
如您所见，该应用程序确实有效.如果您删除 bootstrap，它将停止工作.
Tl;dr
将 jsFiddle 中的第二个下拉菜单设置为 No wrap - in "，您将不需要 angular.bootstrap 行.
说明
加载 Angular 库时，它将扫描 DOM，以使用 ng-app 指令查找元素.当它找到一个时，它将开始引导过程.
在该过程中，Angular 将获取 ng-app 属性的值(在您的情况下为 InventoryModule)，并尝试找到具有相同名称的 Angular 模块.如果失败，它将抛出:Uncaught Error: No module: .
在你的小提琴中你已经设置了代码包装".选择框到onLoad".此下拉菜单指示 jsFiddle 何时初始化您放入 JS 框架中的 JS 代码.当它设置为onLoad"时，代码将在 onLoad 窗口事件中运行.
另一方面，Angular 引导过程将在 $(document).ready() 上运行，并且因为 $().ready 事件在 "加载"事件，Angular 将尝试在模块定义之前初始化 InventoryModule 模块，这就是可怕的 No module" 错误将被抛出的地方.
angular.bootstrap() 是一种手动方式来做 Angular 已经在它的 $().ready() 处理程序.
I do not truly understand why it is necessary to do an angular.bootsrap document, ['MyApp'] at the end of my CoffeeScript code that manages the module and controllers in the following test application:
This is the 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>
And the 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"]
If you remove the last line, the applicatoin won't work. Why is that? This is not truly explained anywhere else.
This is a fiddle of the code: http://jsfiddle.net/dralexmv/8km8x/11/
As you can see the application actually works. If you remove the bootstrap it will stop working.
Tl;dr
Set the second drop-down in jsFiddle to "No wrap - in <head>" and you won't need angular.bootstrap line.
Explanation
When Angular library is loaded it will scan the DOM looking for element with ng-app directive. When it finds one it will begin the bootstrapping proces.
In that process Angular will take the value of ng-app attribute (in your case that's InventoryModule) and will try to find an angular module with the same name. If it fails it will throw: Uncaught Error: No module: <module name>.
In your fiddle you have set the "Code Wrap" select box to "onLoad".
This drop-down instructs jsFiddle when to initialize the JS code that you've put in JS frame. When it's set to "onLoad", the code will run in onLoad window event.
On the other hand, Angular bootstrapping process will run on $(document).ready(), and because $().ready event is fired before "onLoad" event, Angular will try to init the InventoryModule module before the module is even defined, and that's where the dreaded "No module" error will be thrown.
angular.bootstrap() is a manual way of doing the same thing that Angular already does in it's $().ready() handler.
这篇关于为什么即使我声明 ng-app="MyApp" 也需要 angular.bootstrap?在 JSFiddle的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
