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

前端之家收集整理的这篇文章主要介绍了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中所做的事情.

猜你在找的Angularjs相关文章