Angular + Requirejs - Laden in der falschen Reihenfolge

Question

Nov 12, 2013, 08:42 PM

asynchronous requirejs angularjs javascript jquery

Angular + Requirejs - Laden in der falschen Reihenfolge

Ich versuche, eckige und jquery mit requirejs geladen zu haben. Das Beste, was ich tun kann, ist, dass in 50% der Fälle alles korrekt geladen wird, in der anderen Hälfte erhalte ich den FehlerNo Module: mainApp

Ich gehe davon aus, dass dies die Hälfte der Zeit bricht, basierend auf der Geschwindigkeit, mit der requirejs die Skripte asynchron lädt.

Wenn es funktioniert, sehe ich den "Hello World" -Test (obwohl ich vor dem Ersetzen {{text}} blinken sehe, aber ich habe gelesen, wie ich das hier beheben kann). Den Rest der Zeit bekomme ich den Fehler und {{text}} bleibt einfach auf dem Bildschirm.

Github Repo

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>