为什么我需要,甚至当我申报angular.bootstrap NG-应用= QUOT; MyApp的"在的jsfiddle [英] Why do I need to angular.bootstrap even when I declare ng-app="MyApp" in JSFiddle

查看:132
本文介绍了为什么我需要,甚至当我申报angular.bootstrap NG-应用= QUOT; MyApp的"在的jsfiddle的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我不真正了解为什么有必要做一个 angular.bootsrap文件,['MyApp的'] 在我的CoffeeScript code年底,管理在下面的测试应用的模块和控制器:

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:

这是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的的:

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"]

如果您删除了最后一行时,applicatoin将无法工作。这是为什么?这不是真正解释了其他地方。

If you remove the last line, the applicatoin won't work. Why is that? This is not truly explained anywhere else.

这是code的小提琴:
http://jsfiddle.net/dralexmv/8km8x/11/

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.

推荐答案

位于的jsfiddle的第二个下拉为不换行 - 上述&lt; HEAD&gt;中,你会不会需要 angular.bootstrap 行。

Tl;dr

Set the second drop-down in jsFiddle to "No wrap - in <head>" and you won't need angular.bootstrap line.

FIDDLE

当角库加载它会扫描DOM寻找元素与 NG-应用指令。当它找到一个,将开始执行引导审判。

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.

在这个过程角将采取NG-应用属性的值(在您的情况这是 InventoryModule ),并会尝试找到具有相同名称的角模块。如果失败,会抛出:未捕获的错误:没有模块:&LT;模块名称&gt;

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>.

在你的提琴你已经设置了code裹选择框的onLoad。
此下拉指示的jsfiddle时初始化JS code,你已经把在JS框架。当它被设置为的onLoad时,code将在的onLoad 窗口事件。

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.

在另一方面,角引导过程将在 $(文件)。就绪运行(),因为 $()。准备事件之前的onload事件,角将尝试模块甚至定义之前给init InventoryModule 模块的发射,而这也正是可怕的没有模块错误将被抛出。

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()是这样做的角已经做到在它的<一个同样的事情手动方式href=\"https://github.com/angular/angular.js/blob/v1.0.7/src/angular.suffix#L8\"><$c$c>$().ready()处理器。

angular.bootstrap() is a manual way of doing the same thing that Angular already does in it's $().ready() handler.

这篇关于为什么我需要,甚至当我申报angular.bootstrap NG-应用= QUOT; MyApp的&QUOT;在的jsfiddle的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆