2

angularとjqueryにrequirejsをロードしようとしています。私ができる最善のことは、50％の時間ですべてが正しくロードされ、残りの半分でエラーが発生することですNo Module: mainApp

これは、requirejs がスクリプトを非同期的にロードする速度に基づいて、半分の時間で壊れていると思います。

それが機能すると、「Hello World」テストが表示されます (ただし、置き換えられる前に {{text}} フラッシュが表示されますが、ここでそれを修正する方法を読んでいます)。残りの時間はエラーが発生し、{{text}} が画面に表示されたままになります。

Github リポジトリ

Tree:

index.html
- js
    - libs
        require.js
    - modules
        mainApp.js
    main.js

main.js

require.config({
  paths: {
    'jQuery': '//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min',
    'angular': '//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular',
  },
  shim: {
    'angular' : {'exports' : 'angular'},
    'jQuery': {'exports' : 'jQuery'}
  }
});

require(['jQuery', 'angular', 'modules/mainApp'] , function ($, angular, mainApp) {
  $(function () { // using jQuery because it will run this even if DOM load already      happened
    angular.bootstrap(document, ['mainApp']);
  });
});

modules/mainApp.js

define(['angular'], function (angular) {
  return angular.module('mainApp' , []).controller('MainCtrl', ['$scope', function ($scope) {
      $scope.text = 'Hello World';
  }]);
});

Relevant index.html

<head>
    <script src="js/libs/require.js" data-main="js/main"></script>
</head>
<body>
    <div ng-app="mainApp">
        <div ng-controller="MainCtrl">
            {{text}}
        </div>
    </div>
</body>
4

3 に答える 3

6

domReady ( UPDATED ) を使用して、アプリケーションをブートストラップする前に、DOM が完全にロードされていること、つまりすべての JS ファイルがそこにあることを確認できます。

requirejs.config({
    paths: {
        jquery: '/path/to/jquery',
        angular: 'path/to/angular',
        domReady: '/path/tp/domReady'
    }, shim: {
        angular: {
            exports: 'angular'
        },  
    }   
});
define(['jquery', 'angular', 'modules/mainApp'], 
    function($, angular, 'mainApp') {
        // tell angular to wait until the DOM is ready
        // before bootstrapping the application
        require(['domReady'], function() {
            angular.bootstrap(document, ['mainApp']);
        }); 
});

この落とし穴の詳細については、RequireJS の公式ドキュメントを参照してください。

RequireJS を使用すると、DOM の準備が整う前にスクリプトが完了するほど迅速にスクリプトを読み込むことができます。DOM と対話しようとする作業は、DOM の準備が整うまで待機する必要があります。

トリックはこのブログ投稿にあります。

編集ブログ投稿のアドバイスに従う場合は、以前に投稿したものの代わりに、この domReady スクリプトを使用してください: https://github.com/requirejs/domReady/blob/master/domReady.js。

于 2013-11-12T20:14:12.980 に答える