6

angular.bootsrap document, ['MyApp']次のテスト アプリケーションで、モジュールとコントローラーを管理する CoffeeScript コードの最後にを実行する必要がある理由がよくわかりません。

これは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/

ご覧のとおり、アプリケーションは実際に動作します。外すbootstrapと動作しなくなります。

4

2 に答える 2

15

Tl;dr

jsFiddle の 2 番目のドロップダウンを"No wrap - in <head>"に設定すると、行は不要になりますangular.bootstrap。

フィドル

説明

ng-appAngular ライブラリがロードされると、DOM をスキャンしてディレクティブを持つ要素を探します。1 つが見つかると、ブートストラップ プロセスが開始されます。

そのプロセスで、Angular は ng-app 属性の値 (あなたの場合はInventoryModule) を取得し、同じ名前の角度モジュールを見つけようとします。失敗すると、次がスローされますUncaught Error: No module: <module name>。

あなたのフィドルでは、「コードラップ」選択ボックスを「onLoad」に設定しました。このドロップダウンは、JS フレームに配置した JS コードをいつ初期化するかを jsFiddle に指示します。「onLoad」に設定すると、コードはonLoadウィンドウ イベントで実行されます。

一方、Angular のブートストラップ プロセスは on で実行され、 「onLoad」イベントの前にイベントが発生する$(document).ready()ため、Angular はモジュールが定義される前にモジュールを初期化しようとし、そこで恐ろしいエラーがスローされます。$().readyInventoryModule"No module"

angular.bootstrap()$().ready()Angular がすでにhandlerで行っているのと同じことを手動で行う方法です。

于 2013-07-06T00:44:16.150 に答える
0

エラーコンソールを見てください。あなたのコードは例外をスローします:

Uncaught Error: No module: InventoryModule

それと関係があると思います。呼び出しによる手動でのブートストラップangular.bootstrapは、実際の問題を回避するようです。

于 2013-07-05T21:54:38.423 に答える