即使我声明 ng-app=“MyApp"，为什么我还需要 angular.bootstrap在 JSFiddle [英] Why do I need to angular.bootstrap even when I declare ng-app="MyApp" in JSFiddle
问题描述
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屋！
